Menu
I have been at it for a couple of weeks and cant seem to figure out how to draw the below chart with multiple paths. Focus+Context via Brushing chart
I have tried to create a jsfiddle but was not able to replicate the screen that i do get. At this point what i have is similar to the original chart just with one path instead of area and the brushing works. Basically trying to combine the Focus chart and Multi-Series Line Chart Multiseries chart .
However when I try to add another path nothing works. Please suggest any ideas or changes that I need to make for it to work. Also are there any other similar charts (or chart exaples) that I can look at. The data could be rearranged in any way or form for this to work.
Jsfiddle
<div id='dashboardChart'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg">
</div>
path {
fill:none;
stroke:white;
stroke-width:2px;
}
.axis path, .axis line {
fill: none;
stroke: #CCC;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.path_green {
stroke:green;
}
.path_red {
stroke:red;
}
.path_yellow {
stroke:yellow;
}
function drawChart() {
var margin = {
top: 5,
right: 10,
bottom: 100,
left: 50
},
margin2 = {
top: 200,
right: 10,
bottom: 20,
left: 50
},
width = 1075 - margin.left - margin.right,
height = 280 - margin.top - margin.bottom,
height2 = 280 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brush);
var area = d3.svg.area()
.interpolate("monotone")
.x(function (d) {
return x(d.date);
})
.y0(height)
.y1(function (d) {
return y(d.red);
});
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function (d) {
return x2(d.date);
})
.y0(height2)
.y1(function (d) {
return y2(d.red);
});
var svg = d3.select("#dashboardChart #svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var data = [{
"date": "2013-02-08T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 1
}, {
"date": "2013-02-07T05:00:00.000Z",
"data": null,
"red": 485,
"yellow": 0,
"green": 491
}, {
"date": "2013-02-06T05:00:00.000Z",
"data": null,
"red": 2884,
"yellow": 0,
"green": 2881
}, {
"date": "2013-02-05T05:00:00.000Z",
"data": null,
"red": 3191,
"yellow": 0,
"green": 3188
}, {
"date": "2013-02-04T05:00:00.000Z",
"data": null,
"red": 180,
"yellow": 0,
"green": 184
}, {
"date": "2013-02-03T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-02-02T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-02-01T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-31T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-30T05:00:00.000Z",
"data": null,
"red": 1,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-29T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 2
}, {
"date": "2013-01-28T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-27T05:00:00.000Z",
"data": null,
"red": 1,
"yellow": 1,
"green": 1
}, {
"date": "2013-01-26T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 1
}, {
"date": "2013-01-25T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-24T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-23T05:00:00.000Z",
"data": null,
"red": 49,
"yellow": 0,
"green": 45
}, {
"date": "2013-01-22T05:00:00.000Z",
"data": null,
"red": 59,
"yellow": 0,
"green": 64
}, {
"date": "2013-01-21T05:00:00.000Z",
"data": null,
"red": 119,
"yellow": 1,
"green": 125
}, {
"date": "2013-01-20T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 1,
"green": 0
}, {
"date": "2013-01-19T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-18T05:00:00.000Z",
"data": null,
"red": 84,
"yellow": 0,
"green": 81
}, {
"date": "2013-01-17T05:00:00.000Z",
"data": null,
"red": 76,
"yellow": 1,
"green": 77
}, {
"date": "2013-01-16T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 1,
"green": 0
}, {
"date": "2013-01-15T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-14T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-13T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-12T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-11T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}, {
"date": "2013-01-10T05:00:00.000Z",
"data": null,
"red": 0,
"yellow": 0,
"green": 0
}];
x.domain(d3.extent(data.map(function (d) {
return d.date;
})));
y.domain([0, d3.max(data.map(function (d) {
return d.red;
}))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("clip-path", "url(#clip)")
.attr("d", area)
.attr("class", "path_red");
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("d", area2)
.attr("class", "path_red");
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
function brush() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
}
drawChart();
625
As per your comment, you were able to plot the three areas but had difficulty in brushing them. I have an working example here: http://jsfiddle.net/BVzyq/1/ wherein, I have added three <path> elements corresponding to the three colors in the data: ['red', 'yellow', 'green'].
I abstracted out the functions which could take in a color and return the appropriate d value:
var area = function (color) {
return d3.svg.area()
.interpolate("monotone")
.x(function (d) {
return x(d.date);
})
.y0(height)
.y1(function (d) {
return y(d[color]);
});
};
var area2 = function (color) {
return d3.svg.area()
.interpolate("monotone")
.x(function (d) {
return x2(d.date);
})
.y0(height2)
.y1(function (d) {
return y2(d[color]);
});
};
They can be abstracted further, but these are closest to the code you have written. These functions are used while creating the paths:
focus.selectAll('path')
.data(['red', 'yellow', 'green'])
.enter()
.append('path')
.attr('clip-path', 'url(#clip)')
.attr('d', function (col) {
return area(col)(data);
})
.attr('class', function (col) {
return "path_" + col + " data";
});
// ...
context.selectAll('path')
.data(['red', 'yellow', 'green'])
.enter()
.append('path')
.attr('d', function (col) {
return area2(col)(data);
})
.attr('class', function (col) {
return "path_" + col;
});
The CSS classes seemed to suggest this form of data-join. I also added another class data to the paths which correspond to the time-series plots. This makes it easy to distinguish these <path>s from those meant for the axis.
Finally, in the brush function, recalculate the d attribute for all path.data elements:
function brush() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.selectAll("path.data").attr("d", function (col) {
return area(col)(data);
});
focus.select(".x.axis").call(xAxis);
}
Note that I changed some of the values in data to make all the three colours visible.
191
Great solution musically_ut, for others having a similar problem. I was able to load additional csv's, like the example found in this link - Focus+Context via Brushing but was really hung up on how to brush all of the lines together, even though they were both rendering properly in area and area2.
Turns out, looking at your code, all I had to do was change focus.select to focus.selectAll like you have. Thanks!
And for anyone working with the original tutorial code, you can add alternate csv's just by copying the following code and pointing to your new csv:
d3.csv("sp501.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.price = +d.price;
});
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("clip-path", "url(#clip)")
.attr("d", area)
.attr("class", "timeLine2");
context.append("path")
.datum(data)
.attr("class", "timeLine2")
.attr("d", area2);
context.append("g")
.attr("class", "x axis2")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
