D3 Examples - Stacked bar to grouped bar

xxxxxxxxxx
 
<!DOCTYPE html>
<style>
    .axis .domain {
        display: none;
    }
​
</style>
​
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        // Source: https://bl.ocks.org/mbostock/3886208
        var n = 11, // number of samples
            m = 4; // number of series
​
        var t = d3.transition()
            .duration(750)
            .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;
​
            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(["#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 + ")");
​
            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(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(500)
                                .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(500)
                                .attr("width", function() {
                                    return x.bandwidth()
                                })
//                                 .transition(t)
                                .attr("x", function() {
                                    return x(i)
                                })
                        }
                    })
                })
                stacked = !stacked;
            })
        });
​
    </script>
​
    