BarChartAnimation

<!DOCTYPE html>
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  form {
  	position: absolute;
  	left: 60px;
  	top: 40px;
	}

label {
  	display: block;
	}
  
  .xAxis .domain {
    display: none;
  }
</style>
  
<body>
    
  <form>
    
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
  <label><input type="radio" name="mode" value="stacked"checked> Stacked</label>
  </form> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  
// This work is a result of many reading and github projects,especially inspired from Mike Bostock’s work

var parseDate = d3.timeParse("%b %Y");
var formatTime = d3.timeFormat("%Y");
  
var margin = {top: 30, right: 30, bottom: 30, left: 40},
    width = 900 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;
 
  
var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);
	
 
var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
var x = d3.scaleBand()
	.range([0, width])
	.padding(0.4);
  
var x1 = d3.scaleBand()
  .padding(0.1);
  
var yBar = d3.scaleLinear()
	.range([height, 0]);
  
var yStack = d3.scaleLinear()
  .range([height, 0]);

var color = d3.scaleOrdinal()
	.range(["#00aaf9", "#00ff44", "#ede73f", "#696969"]);
  
// Import Stock data and build the transitional informations 
 
d3.csv("stocks.csv", function(StockInfo) {

var nest_by_year = d3.nest()
  	.key(function(d) {return formatTime(parseDate(d.date)); })
  	.entries(StockInfo);
 
	var Transitional_Info = [];

nest_by_year.forEach(function(KeyYear) {
    
    var nest_by_symbol = d3.nest()
    	.key(function(d) {return d.symbol; })
    	.rollup(function(v) {return d3.mean(v,function(d) {return d.price; })})
    	.object(KeyYear.values);
    
    Transitional_Info.push({
      key: +KeyYear.key,
      values: nest_by_symbol
    });
  });
  
  var Merged_data = Transitional_Info.map(function(d) {
    var merged = {year: d.key};
    Object.keys(d.values).forEach(function(key) {
      merged[key] = d.values[key];
    });
    return merged;
  });
  
  var keys = d3.keys(Merged_data[0]).slice(1);
  
  // Summing values grouped by key
  
  var Summing = [];
  Merged_data.forEach(function(d){
    Summing.push(d3.sum(keys, function(key) {return d[key]; }))
  });
  
  x.domain(Merged_data.map(function(d) {return d.year; }));
  x1.domain(keys).range([0, x.bandwidth()]);
  yBar.domain([0, d3.max(Merged_data, function(d) {return d3.max(keys, function(key) {return d[key]; }); })]);
  yStack.domain([0, d3.max(Summing)]);

legend.append("path")
    .style("fill", function(d) {return color(d); })
    .attr("d", d3.symbol().type(d3.symbolSquare).size(100) )
    .attr("transform", "translate(" + width/2.5 + "," + 20 +")");

legend.append("text")
    .attr("x", width/2.5 + 15)
    .attr("y", 20)
    .attr("dy", ".35em")
    .style("text-anchor", "start")
    .text(function(d) {return d; });
});
</script>

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