CODEWITHSUNDEEP
javascriptmathd3.jsseriesgraphing
Stephen James
Stephen James

Reputation: 23

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

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)

Upvotes: 0

Views: 314

Answers (2)

meetamit
meetamit

Reputation: 25157

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.

Upvotes: 0

tomtomtom
tomtomtom

Reputation: 1522

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.

Upvotes: 1

Related Questions