Develop Reference

Prepare data for line chart of active tasks using d3

I am trying to create a Line Chart to display how many Task have started, how many have ended, and how many are active at a given moment. The relevant Data of my Tasks is given in the form (taskID,taskType,starttime,endtime,caller,callerType). An example of this Data is given here:
TaskID,TaskType,Start,End,Caller,CallerType,Generation
construct,construct,0,6.5,Null,Null,0
start1,startsweep,0.4,0.7,construct,construct,1
start2,startsweep,0.8,4,construct,construct,1
start3,startsweep,1.5,3,construct,construct,1
start4,startsweep,2,3.3,construct,construct,1
start5,startsweep,2.8,4.9,construct,construct,1
start6,startsweep,3.4,4,construct,construct,1
start7,startsweep,4.1,5.6,construct,construct,1
start8,startsweep,5,6,construct,construct,1
start9,startsweep,5.1,5.7,construct,construct,1
start10,startsweep,6,6.3,construct,construct,1
start11,startsweep,1.2,1.7,start2,startsweep,2
start12,startsweep,1.7,2.9,start2,startsweep,2
start13,startsweep,2.2,3,start2,startsweep,2
start14,startsweep,3.1,3.9,start2,startsweep,2
start15,startsweep,3,4,start5,startsweep,2
start16,startsweep,5.1,5.4,start8,startsweep,2
start17,startsweep,1.3,1.5,start11,startsweep,3
start18,startsweep,1.9,2.5,start12,startsweep,3
start19,startsweep,3.1,3.8,start15,startsweep,3
start20,startsweep,5.2,5.3,start16,startsweep,3
start21,startsweep,1.35,1.4,start17,startsweep,4
start22,startsweep,3.15,3.75,start19,startsweep,4
start23,startsweep,5.2,5.25,start20,startsweep,4
start24,startsweep,3.15,3.25,start22,startsweep,5
start25,startsweep,3.2,3.3,start22,startsweep,5
start26,startsweep,3.25,3.7,start22,startsweep,5
start27,startsweep,3.6,3.7,start22,startsweep,5
start28,startsweep,3.3,3.5,start26,startsweep,6
start29,startsweep,3.4,3.45,start28,startsweep,7
The problem that I am having is how exactly to prepare this data for a line chart, given that a line chart only accepts data in the form (x[],y[]). I´ve been stuck thinking about creating a timespan with the minimum and maximum time and n Steps inbetween and then computing the starting(ending or active) tasks for the nearest step. So for this example createTimespan(0,6.5,20) would create an array with 20 equally spaced numbers between 0 and 6.5, to thereafter count how many task started (ended or are active) in each of these steps. This would be a good enough solution for the given Dataset but lack precission for larger Datasets, aswell as probably be bad for performance.
So I am asking if someone had a similar Problem or has any idea on how to prepare this kind of Data for a line chart.
Thank you in advance.
Edit: Example data.
time,taskStarted,taskEnded,activeTasks
0.1,2,0,2
0.13,4,1,3
0.16,5,3,2
0.2,10,5,5
0.5,11,9,2
0.7,13,9,4
1,15,10,5
1.3,18,12,6
1.5,20,15,5
1.7,22,18,4
2.4,22,22,0

How to set a minimum range on the y-axis for a stacked area chart in d3

I'm creating a stacked chart using nvd3, similar to the example on the nvd3 website.
However, my data set is a lot more uniform than their example; I'm actually visualizing a funnel with multiple steps over time, each step describing the % that made it from the last step to this one, so it ranges from 100% to about 80%. So it ends up just looking like 4 straight rectangles (see below).
I'd like to know if there is some way of setting a minimum value to display on the y-axis so that each step only takes into account the data that is actually likely to fluctuate, leading to a clearer indication of peaks and troughs.
I've tried using .range([100, 80]) and .domain([80, 100]) but neither seems to make any difference.
For example:
var y = d3.scale.linear().range([100, 80]);
chart.yAxis
.scale(y)
.tickFormat(d3.format(',.2f'));
Full code for my example is available here.
Any ideas how to achieve this?

D3 graphing selective portions of data set

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.

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.

Nvd3 multibarcharts - display gaps in the data on the xAxis

I just started using nvd3 a short while ago and am now facing a big problem for me with multibar charts:
My xAxis data has gaps in between, e.g. [1,2,3,4,9,24,120].
I want these gaps to be displayed in the graph, but nvd3 just displays all bars next to each other, so, that the distance between the bars with the x value 2 and 3 is the same as between those with 9 and 24.
Is there any way to change this, so that you can see all the gaps in the data?
The code I used is just the same as nvd3s example code.
Thank you very much.

Sure there is. You will fill in 0 for all the missing values. For each y that will correspond to a missing value you will set x = 0. That's all you need to do (it's not as simple as it sounds since there can be cases with series which have no data and so on, but this is the main trick).

Stacked Bar And Scatter Alignment

I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/

You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.