Multi-series Line Chart with d3.v3.js Ranges

Question

I am creating a multi-series line chart with d3.v3.js.

I am trying to graph 4 different data-series over time. My issue is the range of the data varies a lot. I was wondering how I could go about adjusting my data so everything can be displayed? One of the data series has numbers that are so high, the other series are pushed way down at the bottom of the graph, and are basically illegible.

I want to be able to scale my data so the graph doesn't look ridiculously skewed.

Example Data Set:

0: {date:2013-12-01, a:690558, b:68494, c:1886, d:0}    
1: {date:2013-12-02, a:607800, b:53720, c:1698, d:0}    
2: {date:2013-12-03, a:740914, b:86944, c:2896, d:0}    
3: {date:2013-12-04, a:885053, b:99616, c:3301, d:0}

As you can see, data-set A > B > C > D (d is not really being used yet)

Answer 1

you can set up multiple Y scales for each line, and then for example color the axis and the ticks the same color as the line to show which is which.

Answer 2

This is really a design question, not a programming question, so not totally appropriate here. It depends on the nature of the data and on your visualization's goals. Still..

You can try what tomtomtom suggested, using multiple axes.

You can use a non-linear scale, like d3.scale.sqrt or d3.scale.log.

Or, you can transform all the values into percent change relative to a chosen point in time (often, that time is the beginning of the series). This is exactly how stock price graphs show comparisons between two or more stocks. See example.