D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hichamelhady
Full window
Github gist
bar chart using div
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:22;position:fixed;top:0;right:0;bottom:0;left:0; } div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override height later */ background-color: teal; margin-right: 2px; } </style> </head> <body> <script type="text/javascript"> var dataset = []; //Initialize empty array for (var i = 0; i < 25; i++) { var newNumber = Math.round(Math.random() * 30); dataset.push(newNumber); } d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) { var barHeight = d * 5; //Scale up by factor of 5 return barHeight + "px"; }); </script> </body>
https://d3js.org/d3.v4.min.js