D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
broadwym
Full window
Github gist
mali_poverty_2003_v1
Built with
blockbuilder.org
<html> <head> <title>A D3 chart</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width="400" height="500"> //shapes go here in svg <rect x="0" width="15" fill="pink"></rect> <rect x="25" width="15" fill="green"></rect> <rect x="50" width="15" fill="blue"></rect> <rect x="75" width="15" fill="yellow"></rect> <rect x="100" width="15" fill="orange"></rect> <rect x="125" width="15" fill="grey"></rect> <rect x="150" width="15" fill="red"></rect> <rect x="175" width="15" fill="brown"></rect> <rect x="200" width="15" fill="black"></rect> <rect x="225" width="15" fill="silver"></rect> <rect x="250" width="15" fill="teal"></rect> <rect x="275" width="15" fill="purple"></rect> </svg> <script> //data goes here var malidata = [63.8, 30.1, 75.9, 62.4, 59.5, 65.8, 68.2, 76.2, 76.8, 78.7, 92.8, 28.6]; // think of this as the engine that makes it all run d3.selectAll('rect') .data(malidata) .attr('height', function(d){ return d/2 * 1.5; }) .attr('y', function(d){ return 150 - d/2 * 1.5; }); </script> </body> </html>
https://d3js.org/d3.v4.min.js