D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
soedomoto
Full window
Github gist
D3 With <div>
Author :
<!DOCTYPE html> <html> <head> <title> D3 Test </title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <style> div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override this later */ background-color: teal; margin-right: 2px; } </style> </head> <body> <h1>Simple Barchart</h1> <p>I'm hosted with GitHub Pages.</p> <script type="text/javascript"> var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ]; d3.select("body").selectAll("div") .data(dataset) // <-- The answer is here! .enter() .append("div") .attr("class", "bar") .style("height", function(d) { var barHeight = d * 5; return barHeight + "px"; }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js
