D3 Examples - mali_poverty_2003

xxxxxxxxxx
 
<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> 
    