D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Pacsangon
Full window
Github gist
Porcentaje de suscriptores a Internet en el años 2000
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Internet</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <style> body{ background-color: #EEE } svg { background-color: #FFF } rect { fill:green } </style> </head> <body> <H1>Porcentaje de suscriptores a Internet en el años 2000</H1> <svg width="2000px" height="2000px"></svg> <script> d3.csv("IndividualsInternet_0014b.csv", function(datafromCSV){ datafromCSV.sort(function(a,b){ return d3.descending(parseFloat(a.y2000),parseFloat(b.y2000)); }); var item = d3.select("svg").selectAll("rect").data(datafromCSV) item.enter().append("rect") .attr("x",5) .attr("y",function(d,i) { console.log("____________________________") console.log("Este es ",this) console.log("d es ", d) console.log("i es ", i) console.log("____________________________") return i *10 }) .attr("width", function (d) { return d.y2000 * 10 }) .attr("height", 8) .append("title") .text(function(d){ return d.Paises+" tiene: "+d.y2000+ "% de suscriptores en el año 2000." }); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js