JSFiddle - React, Tailwind, and code Playground

by jpraden

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>

CSS

.axis {
  font-size: 10px;
  font-family: sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 10)
    .attr("dy", ".20em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

JavaScript

//Aquí va la dirección del spreadsheet
var url = 'https://docs.google.com/spreadsheets/d/1xKnWf6R5fvNpt05NDAfAwuEYDuJyIEH6nHwEpLquVmk/edit#gid=0';

//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){
  //Imprime data
  console.log(data);
}