D3 Examples - DynamicChart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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;
      }
  </style>
</head>
​
<body>
    <button onclick="render('math')">Math</button>
        <button onclick="render('science')">Science</button>
  
  <div id="chart"/>
  
  <script>
   
    
    const data = [
{ name: 'Alice', math: 93, science: 84 },
{ name: 'Bobby', math: 81, science: 97 },
{ name: 'Carol', math: 74, science: 88 },
{ name: 'David', math: 64, science: 76 },
{ name: 'Emily', math: 80, science: 94 }
]
    
    function render(subject) {
        const bars = d3.select("#chart")
                                .selectAll("div")
                                .data(data, function(d){return d.name})
      
      const newBars = bars.enter()
                                .append('div')
                                .attr('class', 'bar')
                                .style('width',0)
      
      newBars.merge(bars)
                .transition()
                .style('width', function(d){return d[subject] + 'px'})
    }
    
    render('math') // render the math data when the page first loads
    
​
  </script>
</body>
​
    