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!!
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!