CODEWITHSUNDEEP
javascriptd3.jsgraphing
cdietschrun
cdietschrun

Reputation: 1683

d3: multiple lines same graph with varying y domains?

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?

Upvotes: 1

Views: 3542

Answers (3)

d3noob
d3noob

Reputation: 2151

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. enter image description here

Upvotes: 3

Digikata
Digikata

Reputation: 1959

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)"

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 0

Related Questions