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

Not able to render a series chart using data outside the dimension object

I have a dataset with the following schema:
{
"time": Date,
"foo": Number,
"bar": Number,
"change": Number
"place1": String,
"description": String,
"place2": String
}
And I want plot a series-chart grouping the place1 and place2 together, display time as x data, foo as y data and the other fields inside the tooltip.
Taking a look at this example the first thing I have done is to create a dimension and grouping the dataset using place1 and place2.
const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);
After that I've created a group, since I want display data without aggregation I've only used the group function:
const placeGroup = placeDimension.group();
And from this point on I'm confused on how to use the two object created before for plotting the series-chart.
How can I select the property to plot in the X and Y-Axis? (In this case time for X and foo for Y?) .
How can I display the other properties inside the tooltip? (I know how to use the tooltip but I don't know how to use data that are not inside the dimension).

In dc.js and crossfilter, the X axis is usually the "keys" of your grouped data, and the Y axis is the counts (or other aggregations).
If each of your keys are unique and you do
const placeGroup = placeDimension.group().reduceSum(d => d.foo)
then it will sum up the one value and return it to you. So your keys (X) will be place1,place2 and your values will be foo.
Then you can use the seriesAccessor and keyAccessor to pull the keys back apart, as in the example you linked.
Tooltips are called "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action.
Caveat
All this said, there aren't very many good reasons for using dc.js with unaggregated data. The library only shines when there are interactions by filtering the charts, and filtering will only work if the data is aggregated with crossfilter.
It will probably be easier to learn another charting library, since you aren't using any of the functionality that makes dc.js special.

Need a faceted visualization with custom axis positions

Needed a faceted visualization for my personal project. Was looking for options over the web, found out https://github.com/chartshq/muze suits my purpose.
Though I was able to get started pretty early using their documentation, I faced a roadblock soon. Looks like the documentation in progress.
Here is a scaled down sample of what I have achieved so far
https://jsfiddle.net/q8w47vt1/
Promise.all([
fetch('https://raw.githubusercontent.com/chartshq/muze/master/examples/data/cars.json'),
fetch('https://raw.githubusercontent.com/chartshq/muze/master/examples/data/cars-schema.json')]).then((response) => {
Promise.all(response.map(_ => _.json())).then((res) => {
const data = res[0]
const schema = res[1];
let DataModel = muze.DataModel;
let rootData = new DataModel(data, schema);
let env = muze();
let canvas = env.canvas();
canvas
.rows(['Origin', 'Acceleration'])
.columns(['Cylinders'])
.data(rootData)
.width(500)
.height(500)
.title('Acceleration by Cylinders by Origin')
.subtitle('For years 1970 - 1982')
.mount('#chart-container');
});
});
But, I wanted my visualization to have the axis on the right hand side and facet on the left of the plot and not on the left hand side. I tried a couple of ways to do it but was unable to achieve the result.
Spent some time looking at the code, but couldnt figure out much, as I didnt have time to go through the codebase.
Can anyone help me on this? Dont want to raise issue right at this point of time, as I am not sure its a valid feature or not!

Welcome to stackoverflow :)
Changing the position of axis can be done like below
canvas.rows([[], ['Origin', 'Acceleration']])
You can find the documentation here

While the above configuration will serve your purpose to have the axis on the right hand side, it will shift the faceting to the right as well. You can choose to have your facets on the left-hand side of the canvas, while maintaining the axes to the right by providing the configuration as provided below:
canvas.rows([['Origin'],['Acceleration']])
Basically, the first array for the rows API provides the left hand side of the visualization and the second array provides the right hand side. If only a single array is provided, Muze automatically puts all the facets and axes to the left hand side of the visualization.
However, this may not be valid in some cases(specially, when you have only provided only dimensions to the API).
So, you may wish to checkout the documentation to understand how this API works for a better understanding here

How to display continous line chart (via Zing Chart) with skipped values?

I'm using a line chart to display two series of data. Each series could have skipped values(they initialized with null values). In the result I got a line with breaks. The problem is how to display a continious line in case of skipped values (lower chart on image).
I've searched through all questions tagged with "zingchart", read documentation and examples on zingchart.com" but I couldn't found anything that solves my problem.
Here is the image of two charts (upper - what I get, lower - what I need): http://imgur.com/u7zLq32

EDIT - Updated based off comment
In that case, you'd switch from a one dimensional array to a two dimensional array like this:
values = [
[X, Y]
]
where X corresponds so the X scale value and Y corresponds to the Y scale value.
Here's a demo: http://demos.zingchart.com/view/R93HI801
You can read more about our data values here: http://www.zingchart.com/docs/reference/data-format-by-chart-type/
I'm on the ZingChart team. Let me know if you have any other questions.

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.