DynamicChart_Animated

forked from JoelGallagher's block: Entererer

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

https://d3js.org/d3.v4.min.js