Spreadheet

by hmadrid75

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
<h2>Goleadores en mundiales</h2>
<div id="chart"></div>

JavaScript

//Aquí va la dirección del spreadsheet
  	var url = '';

  	//Función de tabletop para traer la data
  	Tabletop.init( { key: url,
                     callback: dibujar,
                     simpleSheet: true,
                     parseNumbers:true } );

  	//Función propia que recibe la data cuando ya está cargada y podemos dibujar nuestra viz
  	function dibujar(data){
  		console.log(data);
		//Crear viz
  	}

//Aquí va la dirección del spreadsheet
var url = 'https://docs.google.com/spreadsheets/d/1IutWx3iCEXDTC3qYSZaaN4qlZnuYz0mg1tbDtFa-RqU/edit?usp=sharing';

//Función de tabletop para traer la data
Tabletop.init( { key: url,
                 callback: dibujar,
                 simpleSheet: true, // solo tiene 1 hoja
                 parseNumbers:true } ); // convierte numero en numero, y no txt

//Función propia que recibe la data cuando ya está cargada y podemos dibujar nuestra viz
function dibujar(data){ // imprime la data
  //Imprime data
  console.log(data);
}

// Tamaños
var margin = {top: 20, right: 20, bottom: 150, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Crear SVG
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
//Máximos
var golesMax = d3.max(data,function(d){
      return d.goles;
    });
var partidosMax = d3.max(data,function(d){
    return d.partidos;
  });
//Escalas
var x = d3.scale.linear()
  .domain([0,partidosMax])
    .range([0, width]);

var y = d3.scale.linear()
  .domain([0,golesMax])
    .range([height, 0]);