D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
barras (w35) -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>d3js</title> <script src="https://d3js.org/d3.v5.min.js"></script> <style> .chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 0px; margin: 5px; color: white; height: 12px; } </style> </head> <body> <div id="parrafos"></div> <div class="chart"></div> <div id="svg"></div> <script> var datos = [{"platform":"Mobile Games","earnings":538308}, {"platform":"Console Games","earnings":334596}, {"platform":"PC Games","earnings":317755}]; d3.select("div#parrafos").selectAll("p").data(datos).enter().append("p") .attr("class","p1") .text( function(d,i) {return i+1 + ". " + d.platform + " " + d.earnings.toLocaleString(); } ) // .text( (d,i) => i+1 + ". " + d.platform + " " + d.earnings.toLocaleString() ) var color = "#7BAAF7"; d3.select("div.chart").selectAll("div").data(datos).enter().append("div") .style("width", function(d) { return d.earnings/3000 + "px"; }) .text(function(d) { return d.platform; }) .attr("title", function(d) { return "u$s " + d.earnings.toLocaleString(); } ); // TODO (para la proxima clase) // 1. agregar las escalas lineales // 2. dibujar las barras con SVG (rect y text) </script> </body> </html>
https://d3js.org/d3.v5.min.js