D3 Examples - DataJoinTinker

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar {
      background-color: teal;
      height: 20px;
      margin-top: 2px;
    }
    
    .bar2 {
      background-color: red;
      height: 20px;
      margin-top: 2px;
    }
  </style>
</head>
​
<body>
  <div id="chart">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
  
  <div id="chart2" />
  
  <script>
    const data = [90,70,50,30,10];
     
       
    // plain simple teal
    d3.select ('#chart')
    .selectAll('div')
    .data(data)
        .attr('class', 'bar')
        .style('width', function(d){
      return d+'px'
    })
    
    
    d3.select ('#chart2')
    .data(data)
    .enter()
        .append('div')
        .attr('class', 'bar2')
        .style('width', function(d){
      return 
    })
    
​
  </script>
</body>
​
    