D3 graphing selective portions of data set

Question

I have a large time series data set I need to graph, and am trying to use D3 to do it. I plan to have my graph have the x-axis be time, and allow for movement of the graph in the x direction. I want to have the graph only load/display the points that exist in the current time range on the screen.

For example, if my dataset has times 1-100, but the graph starts out with times 1-10 shown, the graph should only graph points 1-10. Then the user may move to the right and see times 5-15 and the graph should update accordingly.

Can anyone explain to me how this might be done via d3? I am having a hard time bridging the understanding from an entire data set being loaded in at once and graphed immediately to selective graphing of subsets of the data.

Nicol

Answer 1

I think you are looking for the selection.filter() function. For example you can have:

var allNodes = vis.selectAll("Nodes").data(data.nodes); 
var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
//use normal graph functions on validNodes.  

You can also apply filter directly on the array of nodes.

Didache

Thanks for the reply. Makes sense. Can I dynamically know how to set the bounds for the filter function? Ideally I'd like to get the bounds of the x axis, if you follow. If they scrolled over to 5-15, the bound should be d.time >=5 && d.time <=15 etc – Nicol

You should be able to find this in the API: github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis . Otherwise I don't know. – Didache

I've had luck with x.domain() giving me the min and max of the x axis. I'll mark this as correct because I will need to use the filter with the domain information. – Nicol