javascriptd3.jstransitionstream-graph

Updating D3 streamgraph with new data


I have a streamgraph and I would like to update it by changing its data. I have a line graph which transitions between data sets perfectly and I am trying to adapt the same code for my streamgraph but with little success. I can change the color of each stream but not the data.

Here is my update line function

  function UpdateData() {
    // Get new data
    d3.csv("data2.csv", function(data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.age = +d.age;
        });

    // Rescale range
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return Math.max(d.age); })]);

    var valueline = d3.svg.line()
        //.interpolate("interpolation")
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.age); });

    var svg = d3.select("body").transition();

    // change the line
    svg.select(".line") 
        .duration(750)
        .attr("d", valueline(data));

    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);

    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);
    });}    

Here is my attempt at the same function for my streamgraph...

function UpdateData() {             
    var customPalette = ["#8c564b", "#e377c2", "#7f7f7f"];        
    var colours = d3.scale.ordinal().range(customPalette);
    var nest = d3.nest().key(function(d) { return d.age; });

    // Get new data
    d3.csv("data2.csv", function(error, data) {
    data.forEach(function(d) {
            d.date = format.parse(d.date);
            d.amount = +d.amount;
        });

    var svg = d3.select("body").transition();

    var layers = stack(nest.entries(data));

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

        svg.selectAll(".layer")
            .duration(750)
            .data(layers)
            .attr("class", "layer")
            .attr("d", function(d) { return (d.values); })
            .style("fill", function(d, i) { return colours(i); });                
        });
    }

The colors change but the values wont pass to the graph. Any advice or suggestions would be hugely appreciated!!


Solution

  • Success!!

    Finally got it. Instead of targeting layers, I should have been targeting the paths themselves!

    So, call your new data,

        // Get the data again
        d3.csv("PopulationStats/UK.csv", function(error, data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.amount = +d.amount;
            });
    

    Nest it

    var layers = stack(nest.entries(data));
    

    And update your paths.

       d3.selectAll("path")
       .data(layers)
      .transition()
       .duration(750)
       .style("fill", function(d, i) { return colours(i); })
       .attr("d", function(d) { return area(d.values); });
    

    So simple, but took me 2 days to figure out!