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

A slider created with d3.slider.js will not allow movement to last value

Based on this example(https://codepen.io/anon/pen/rZPpWy) I tried to adapt the Slider with ordinal scales, to have more values.
But the slider I created does not seem to move to the last value.
I have created a codepen displaying this behavior:
data = ["1890-1914", "1914-1930", "1930-1950", "1950-1970", "1970-1980", "1990-2006", "2006-2018"]
essai = d3.slider().scale(d3.scale.ordinal().domain(data).rangePoints([0, 1], 0.5)).axis(d3.svg.axis()).snap(true).value("1890-1914");
https://codepen.io/rhys-newbury/pen/RYvxyd
Is this an issue caused by my code?
Thankyou

Nope it's got nothing to do with your code. It's the following line in the d3 slider plugin that's causing the issue.
In the moveHandle function, I've got no idea why this comparison is done as it messes up normal ordinal (string based) scales as well but anyway here's the line:
if ( value[ 0 ] >= value[ 1 ] ) return;
Commenting out this line, here's a fork of your code:
http://jsfiddle.net/rLe9ht1z/2/
I'm quite sure this won't break any of the functionalities the plugin provides but if it still concerns you, I suggest you write an own plugin for ordinal scales - should be fairly easy.
Hope this helps.

FlotChart Data Change

I am currently using Flotcharts plugin on my website.
I want to use one of the charts. However, I am unsure how the information is being plotted in order to change the information.
Can someone please advise me on how the following coding works / broken up:
d1 = [
[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 1129],
[1272672000000, 1163], [1275350400000, 1905], [1277942400000, 2002], [1280620800000, 2917],
[1283299200000, 2700], [1285891200000, 2700], [1288569600000, 2100], [1291161600000, 1700]
]
Thank you in advance! :)

Not a lot of context in your question, so it's hard to offer much information in an answer, but your array d1 consists of a set of data points. Each data point has an x-value and a y-value. It looks the x-value is a date/time value and the y-value is a number. (The large numbers such as 1262304000000 look like native JavaScript date/time values; 1262304000000, for example, is midnight on January 1, 2010.) Other than that, there's not much else we can offer unless you want to add more context.

D3.js: Trying to build flat calendar

Newbie here.I am trying to build a horizontal calendar to indicate people on vacations. I have placed the mockup below with annotation of key feature, I'm trying to incorporate.
Legend Y - Indicates the person
Legend X - Indicates the Month and year.
Each cell is color coded based on holiday or vacation or weekend.
The calendar part (not including legend area) should be draggable.
I have got rough implementation going...I am able to get the first horizontal calendar,
Code: http://jsbin.com/xumabavo/1/edit
Is my approach correct?
how to stack each other?
How to enable dragging and render dates before and after the window?
Thanks for helping out.

Is my approach correct?
Yes. Mockup is crucial. Prototype as well. It looks to me that you have confidence, determination, and intelligence necessary for this project.
How to stack each other?
I gather you will get overall data as an array of individual data specific for particular person. You can use index of that array (index corresponds to a person) to shift all visual elements to the appropriate row - in other words, to stack the data. Callback functions can have two parameters d (data) and i (index), something like this:
.style( "background-color", function( d, i ) {
// d is datum being rendered
// i is datum's index in dataset
// return value based on logic
} )
How to enable dragging and render dates before and after the window?
It seems to me you would benefit from analyzing this small app: link

How to graph dates on X axis in Rickshaw

I have a set of data for dates. What value should I provide the X axis values? How do I make Rickshaw display the X data values as dates?
I looked around the docs and examples and cannot find anything.

I've just started using Rickshaw and was in the exact situation.
But, before I go any further, Rickshaw documentation is virtually nonexistent which is very upsetting because the performance of Rickshaw compared to other JS graphing libraries is outstanding.
The best way to find examples is to dig into the source code and example code on their github page try to make sense of things (not the way documentation should be).
That being said, let's try and build a strong base of questions/answers here on StackOverflow!
So, back to the question :) It looks like you've already found your own solution to the question, but I'll provide my solution as well.
Rather than using Rickshaw.Graph.Axis.Time, I've used Rickshaw.Graph.Axis.X and set the tickFormat accordingly.
var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE },
{ x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ]
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
tickFormat: function(x){
return new Date(x * 1000).toLocaleTimeString();
}
})
xAxis.render();
toLocaleTimeString() can be any of the Javascript date functions, such as toLocaleString(), toLocaleDateString(), toTimeString(), or toUTCString(). Obviously, because the tickFormat takes a function as an argument one can supply their own formatter.
Koliber, I'd be interested to understand your answer if you could provide more detail as well.

Additional to Lars' reply, I found by default Rickshaw is calling
.toUTCString(x.value*1000) //(just ctrl+F to find where =) ).
In my case, I saw different time label on X between Graphite and Rickshaw for this reason, and it works beautifully once I changed it to
.toLocaleString(x.value*1000).
Plus, you may need modify this in two places : Rickshaw.Graph.Axis.Time and the ...HoverDetails

I have finally figured out that the X axis values should be epoch time values. Then, using the code from the examples I was able to show a proper time scale.
I still have a problem because I would like to show the tick marks on weeks on the X axis. However, setting timeUnit to 'week' causes JavaScript errors. It works with other time units though.

None of this worked for me. What worked with angularjs was:
'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10