D3-transitions

<!DOCTYPE html>
<style>
    .axis .domain {
        display: none;
    }
</style>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    //source https://learnjsdata.com/group_data.html
    //       https://bl.ocks.org/mbostock/3943967
        var n = 11, // number of months
            m = 4; // number of enterprises
        
        var t = d3.transition()
            .duration(1000)
            .ease(d3.easeLinear);

var stacked = true;

d3.csv("stock.csv", function(data) {
          
          var donnees = d3.nest()
          		.key(function(d){
                   		return d.date.substring(d.date.legnth-4)
               })
          		.entries(data)
          
          donnees.forEach(function(it,ind) {
            donnees[ind] = {
              year: it.key,
              symbols: d3.nest()
              		.key(function(d) {
                    return d.symbol
                  })
              		.entries(it.values) 
            }
            donnees[ind].symbols.forEach(function(el,i) {
              donnees[ind].symbols[i] = {
                symbol: el.key,
                price: d3.mean(el.values, function(d){
                  return d.price
                })
              }
            })
          })
          
          
          donneesfin = d3.range(n).map(function(ind) {
                return d3.range(m).map(function(i) {
                    return Math.round(donnees[ind].symbols[i].price * 10) / 10
                });
            })
          
          
            var margin = {top: 20, right: 30, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

var y = d3.scaleLinear()
                .domain([0, 500])
                .rangeRound([height, 0])
                .nice();

var y_bis = d3.scaleLinear()
                .domain([0, 150])
                .rangeRound([height, 0])
                .nice();

var x = d3.scaleBand()
                .rangeRound([0, width])
                .paddingInner(0.05)
                .align(0.1)
                .domain(d3.range(n));

var z = d3.scaleOrdinal()
                .range(["#7fc14c", "#c5ed58", "#c5ae29", "#db5a04"]);
          
            var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g").selectAll("g")
                .data(d3.stack().keys(d3.range(m))(donneesfin))
                .enter().append("g")
                .style("fill", function(d) {
                    return z(d.key);
                })
                .selectAll("rect")
                .data(function(d) {
                    return d;
                })
                .enter().append("rect")
                .attr("x", function(d, i) {
                    return x(i);
                })
                .attr("y", function(d) {
                    return y(d[1]);
                })
                .attr("height", function(d) {
                    return y(d[0]) - y(d[1]);
                })
                .attr("width", x.bandwidth());

svg.on("click", function() {
                svg.selectAll("g").each(function(d, index) {
                    d3.select(this).selectAll("rect").each(function(e, i) {
                        if (stacked) {
                            d3.select(this).transition(t)
                                .attr("x", function() {
                                    return x(i) + ((index - 1) % 4) * x.bandwidth() / 4
                                })
                                .attr("width", function() {
                                    return x.bandwidth() / 5
                                })
                                .transition(t).delay(400)
                                .attr("y", function(d) {
                                    return height - (y_bis(d[0]) - y_bis(d[1]));
                                })
                                .attr("height", function(d) {
                                    return y_bis(d[0]) - y_bis(d[1]);
                                })
                        } else {
                            d3.select(this).transition()
                                .attr("y", function(d) {
                                    return y(d[1]);
                                })
                                .attr("height", function(d) {
                                    return y(d[0]) - y(d[1])
                                })
                                .transition().delay(400)
                                .attr("width", function() {
                                    return x.bandwidth()
                                })
                                .attr("x", function() {
                                    return x(i)
                                })
                        }
                    })
                })
                stacked = !stacked;
            })
        })
  </script>
</body>

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