d3: multiple lines same graph with varying y domains? - javascript

I have data which is all time series, so the x axis of my d3 graph is always time. I need to support having multiple lines on one graph, but the different lines can have vastly different domains for the y axis data. For example line 1 can be
1 2 3 4 5 for times 1-5
5000 10000 15000 20000 25000 for times 1-5
What is a good way to try to handle this in d3?

You could have two separate Y axes. One on the left hand side of the graph and one on the right.
This post describes setting up a two line graph. http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html
And this post describes setting two different y axes for the lines with a similar scale problem to the one you describe. http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
The end result is something like this.

I would recommend a log scale if you don't have zeros for the y values. In any case, simply create a single y scale that ranges from the minimum to the maximum of all lines and use that for everything.

Have you considered stacking two plots on identical x-axis scales? Or for a rapid comparison, I sometimes re-scale one data series to bring it into the domain of the other, then note it in the legend. "series 1 (x10 scaling)"

Related

When having mulitple Y lines data, how can I let the chart automatically scale to show them all?

Suppose I have a linechart with multiple lines (the number is dynamic) and I would need to always scale the Y so that all lines are shown - so the scale should always be based on the range with highest values. Is there a way how to it automatically? I found some example with automatic yScaling using d3.max but that is done for a known dataset. In my case, I do not know what range will be the one to use.

Set y-axis maximum label to one tick increment higher in NVD3

I am using NVD3 (a wrapper of d3) to draw a line graph. I want the data in the graph to be within the range of the axis. However, it looks inconsistent with the other labels, as the chart displays the max value of my data set on its own. See screenshot:
In this exanple, 18,554.41 is my highest data point. What I would like to see is the ticks/axis-lables to be in the same order of rounding throughout, with no overflow. i.e. 20,000,18000,16000 etc.
The caveat is that my dataset can vary quite differently - so I can't just set a max. Is there a way of just increasing the tick count by one or something?
Current relevant code:
var chart = nv.models.lineChart()
.showYAxis(true)
.forceY([0]);
chart.yAxis
.axisLabel('£')
.tickFormat(d3.format(','))
.ticks(8);
EDIT: added https://jsfiddle.net/60equ79h/2/
on the fiddle, I would like the first data set's topmost label to be 10,000. the second would be 80. i.e I would like to the y-axis to be increased by one tick
If I understand your question correctly, you can force the yAxis to have the values you define. You can hard code the values or write something clever to identify the min & max for your yAxis.
Update your chart to have the following:
chart.forceY([0, 20000]); // [min, max]
Hope it helps

Parallel coordinates with d3.js

I need to to represent a Parallel Coordinates with d3.js. First of all I have no idea if what I think is possible to achieve (and if the Parallel Coordinates is the right chart).
I will explain my idea: I take data from a database and I expose them in a JSON and I store them in an array of objects (with JavaScript).
This is an example of the data http://pastebin.com/DZcMqDMc.
I would like to represent along the abscissa axis years (though there are years repeating themself, as you can see from data example), while along the ordinate axis values of those years (values are in percent, ranging from 1 to 100).
I would like to represent two lines according to "value1" and "value2" property in the JSON file.
Is it possible? Is Parallel Coordinates the right chart?
The main problem I have right now is that I do not understand how to set right the two domains (abscissa and ordinate).
I am basing on the example Parellel Coordinates of Bostock.
For abscissa I am thinking something like that:
x.domain(
d3.extent(test,
function(d) {
return d.years;
}
)
);
It makes sense or?
Try a multi line chart.That might suit your need.
I am not sure what you are trying.
Simply do a line chart, and produce the vertical lines by formatting the ticks to go from 0 to height ( in your var xAxis code include .tickSize(0-height)). You will have to pick the right number of ticks, as in ticks(), so you just get the lines where you want them.
Check out Parcoords, a d3-based parallel coordinates library. For compatibility with d3 v5 see https://github.com/BigFatDog/parcoords-es which is based on the original Parcoords library (https://github.com/syntagmatic/parallel-coordinates) which relies on an outdated version of d3.
For examples and sample code, check out the following link: http://syntagmatic.github.io/parallel-coordinates/.

Angular-nvd3: same distance between data on x scale

By default scale of x axis is calculated from values. This gives uneven distance between two adjasted points. Like for example if I have an array of values like [1,2,5], there will be different distance on x axis for point, and also x axis labels will contain some other values, like 1,2,3,4,5. In case on dates displayed on x axis there may be cases when two equal dates are printed, looks ugly.
Take a look at this plunker. If you maximize your browser window, you could see that x axis labels have duplicates (like 02/09/2015 is visible 2 times on my screen). Also the distance between point is different.
How can I:
Make so that no duplicate x axis labes are present?
Distance between points is equaly distributed based in graph's width (not scaled based on values)?
You can explicitly set tickValues() and specify what ticks you want to show.
Alternatively, ticks() is more flexible, but gives you less control.
(Search for "D3 duplicate dates". This one may be helpful for example).
The reason the dates are repeating is that they are in fact different (equally spaced) timestamps that occur on the same day, since the spacing is < 24 hours. If you want to label with distinct dates, you could select a specific time on each day for the tick to fall on.

How do we change the tick values generated by a linear scale in a d3.js line plot?

I only had 5 values[1,2,3,4,5] as my y - coordinates in the d3.js line plot. But, I end up getting more values [0.5,1,1.5,2,2.5,3,3.5,4,4.5,5] Is there a way to edit the d3.js file or the html file inorder to plot the values as per my requirement?
The tick marks created by a d3 axis can be controlled in two ways:
Using axis.tickValues(arrayOfValues) you can explicitly set the values that you want to show up on the axis. The ticks are positioned by passing each value to the associated scale, so the values should be within your scale's domain. This works for any type of scale, including ordinal scales, so long as the values you give are appropriate to that scale.
Alternately, using axis.ticks(parameters) you can modify the way the scale calculates tick marks. The types of parameters you can use depends on the type of scale you're using -- the values you specify will be passed directly to the scale's .ticks() method, so check the documentation for each scale type. (Parameters will be ignored for ordinal scales, which don't have a ticks() method.)
For linear scales, the scale.ticks() method accepts a number as a parameter; the scale then generates approximately that many ticks, evenly spaced within the domain with round number values. If you do not specify a tick count, the default is to create approximately 10 ticks, which is why you were getting ticks on 0.5 intervals when your domain was from 0 to 5.
So how do you get the behaviour you want (no decimal tick values)?
Using .tickValues(), you would create an array of unique Y-values to be your ticks:
var yValues = data.map(function(d){return d.y;});
//array of all y-values
yValues = d3.set(yValues).values();
//use a d3.set to eliminate duplicate values
yAxis.tickValues( yValues );
Be aware that this approach will use the specified y values even if they aren't evenly spaced. That can be useful (some data visualization books suggest using this approach as an easy way of annotating your graph), but some people may think your graph looks messy or broken.
Using .ticks(), you would figure out the extent of your Y domain, and set the number of ticks so that you do not have more tick marks then you have integers available on your domain:
var yDomain = yScale.domain();
yAxis.ticks( Math.min(10, (yDomain[1] - yDomain[0]) );
This will create the default (approximately 10) ticks for wide domains, but will create one tick per integer value when the difference between the max and min of your domain is less than 10. (Although the tick count is usually approximate, the scale will always prefer integer values if that matches the tick count specified.)
Yes you can also try
yAxis.ticks(5).tickFormat(D3.numberFormat(",d"));
It does the trick of eliminating the decimal numbers, does not effect number of ticks
Here is a good resource for the format of the numbers using D3.

Categories