Old school D3 from simpler times

All examples By author By category About

elangobharathi

Full window Github gist

transition

Built with blockbuilder.org

forked from elangobharathi's block: exit enter update

<!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; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var margin = {left: 40, right: 40, top: 40, bottom: 40};
    var width = 800 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

var data = [
      [200, 400, 80, 100, 80, 370, 250],
      [200, 300, 400],
      [100, 90, 100, 200]
    ];
    
    var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
    
    function updateBars(data) {
      
      var t = d3.transition()
      	.duration(4000);
      
      var rectWidth = 40;
			var rects = svg.selectAll('rect')
        .data(data);
      
      rects.exit()
	      .transition(t)
      	.attr('y', height)
      	.attr('height', 10)
        .remove();
      
      var enter = rects.enter()
        .append('rect')
      	.attr('width', rectWidth)
        .attr('stroke', 'white');
      
      rects = enter.merge(rects)      
	      .attr('fill', function(d) { return colorScale(d)})
        .transition(t)
	      .attr('x', function(d, i) { return (i * rectWidth) + margin.left})
        .attr('y', function(d) { return (height - d) })
        .attr('height', function(d) { return d})

//         .on('click', function(d) { console.log(d)});
    }
        
    var index = 0;
    
    setInterval(function() {
    	updateBars(data[index % 3]);
    	index++;
    }, 2000);

</script>
</body>

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