D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
broadwym
Full window
Github gist
mali_poverty_2003_v2
Built with
blockbuilder.org
<head> <title>A D3 chart</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <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]; var svg = d3.select('body') // returns only body selection .append('svg') // returns only svg selection .attr('width', 500) // returns svg selection .attr('height', 150); // returns svg selection svg.selectAll('rect') // Q: How do these imaginary rectangles exist? .data(malidata) .enter() // A: Binding and appending .append('rect') .attr('x', function(d, i){ return i * 25; }) .attr('width', 15) .attr('fill', '#a2c09f') .attr('height', function(d){ return d/3 * 1.5; }) .attr('y', function(d){ return 150 - d/3 * 1.5; }); </script> </body>
https://d3js.org/d3.v4.min.js