D3 Examples - d3js Exercice 4

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:52;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar {
        background-color: #0021ff;
        height: 20px;
        margin-top: 5px;
        }
  </style>
</head>
​
<body>
  <div id="chart">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
  <script>
    
    const data = [ 90, 70, 50, 30, 10 ];
 
    d3.select('#chart')
    .selectAll('div')
    .data(data) // pair each number in the array with an empty div 
        .attr('class', 'bar') // color, height, and spacing via CSS 
        .style('width', function(d) {
        return d + 'px' // use the data items as pixel widths 
    })
​
  </script>
</body>
​
    

d3js Exercice 4 - selection, data

d3js Exercice 4 - selection, data