Transition Stacked Bar - Grouped Bar

forked from romsson's block: Stacked bar chart v4

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

</style>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        var n = 11, // number of samples
            m = 4; // number of series

var t = d3.transition()
            .duration(1000)
            .ease(d3.easeLinear);

var stacked = true;

var data = d3.range(m).map(function() {
            return d3.range(n).map(Math.random);
        });

var dataFormat = [];

d3.csv("stock.csv", function(data) {

var dataset = d3.nest()
                .key(function(d) {
                    return d.date.substring(d.date.length - 4)
                })
                .entries(data)
            dataset.forEach(function(item, index) {
                dataset[index] = {
                    year: item.key,
                    symbols: d3.nest()
                        .key(function(e) {
                            return e.symbol
                        })
                        .entries(item.values)
                }
                dataset[index].symbols.forEach(function(el, i) {
                    dataset[index].symbols[i] = {
                        symbol: el.key,
                        price: d3.mean(el.values, function(a) {
                            return a.price
                        })
                    }
                })
            })

dataFormat = d3.range(n).map(function(index) {
                return d3.range(m).map(function(i) {
                    return Math.round(dataset[index].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;

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

// y grouped
            var y_gr = d3.scaleLinear()
                .domain([0, 500])
                .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(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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 + ")");

// Création du graphique initial stacked
            svg.append("g").selectAll("g")
                .data(d3.stack().keys(d3.range(m))(dataFormat))
                .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_st(d[1]);
                })
                .attr("height", function(d) {
                    return y_st(d[0]) - y_st(d[1]);
                })
                .attr("width", x.bandwidth());

// Gestion de la transition
            svg.on("click", function() {
                svg.selectAll("g").each(function(d, index) {
                    d3.select(this).selectAll("rect").each(function(e, i) {
                        if (stacked == true) {
                            d3.select(this).transition(t)
                              	.attr("width", function() {
                                    if(x(i)!=undefined) {
                                    	return x.bandwidth() / 5
                                    }
                                })
                              	.attr("x", function() {
                                    if(x(i)!=undefined) {
                                    	return x(i) + ((index - 1) % 4) * x.bandwidth() / 4
                                    }
                                })
                            		.transition(t).delay(200)
                                /*.attr("height", function(d) {
                                    return y_gr(d[0]) - y_gr(d[1]);
                                })*/
                                .attr("y", function(d) {
                                    return height - (y_gr(d[0]) - y_gr(d[1]));
                                })
                        } else {
                            d3.select(this).transition()
                                /*.attr("height", function(d) {
                                    return y_st(d[0]) - y_st(d[1])
                                })*/
                                .attr("y", function(d) {
                                    return y_st(d[1]);
                                })
                                .transition(t).delay(200)
                                .attr("x", function() {
                                    if(x(i)!=undefined) {
                                    	return x(i)
                                    }
                                })
                                .attr("width", function() {
                                    return x.bandwidth()
                                })
                        }
                    })
                })
                if(stacked == true){
                  stacked = false
                } else {
                  stacked = true
                }
            })
        });

</script>

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