D3.js Study (Fri)

In the previous section, we have learned how to set the fill area, but it is very simple to understand the principle of his implementation. In this section, we mainly study the drawing of multiple curves, and assign different ordinate to different curves.

The new data

Since we are going to draw two curves, we have to add a new set of test data on the original basis, and now our data is this:

Date    Close    Open

1-may-12    58.13    3.41

30-apr-12    53.98    4.55

27-apr-12    67.00    6.78

26-apr-12    89.70    7.85

25-apr-12    99.00    8.92

24-apr-12    130.28    9.92

23-apr-12    166.70    10.13

20-apr-12    234.98    12.23

19-apr-12    345.44    13.45

18-apr-12    443.34    16.04

17-apr-12    543.70    18.03

16-apr-12    580.13    21.02

13-apr-12    605.23    22.34

12-apr-12    622.77    20.15

11-apr-12    626.20    21.26

10-apr-12    628.44    31.04

9-apr-12    636.23    35.04

5-apr-12    633.68    41.02

4-apr-12    624.31    43.05

3-apr-12    629.32    46.03

2-apr-12    618.63    51.03

30-mar-12    599.55    53.42

29-mar-12    609.86    57.82

28-mar-12    617.62    59.01

27-mar-12    614.48    56.03

26-mar-12    606.98    58.01

We use Data-close as a data set and Data-open as a data set. Now we have these data in the file DATA2.TSV and import the file:

Get the data

  D3.TSV (function (Error, data) {

    Data.foreach (function (d) {

      D.date = Parsedate (d.date);

      D.close = +d.close;

      D.open = +d.open;

    });

It is important to remember to do a data conversion to ensure that a number is stored in the D.open!

Define a new curve

Like the previous definition curve, we can define the curve of the second day exactly as it is defined by defining the first curve:

Defining lines 2

  var valueline2 = D3.svg.line ()

    . interpolate ("basis")

    . x (return x (d.date)})

    . Y (return y (D.open)});

Draw a new curve

To distinguish it from the first curve, we add a style to the new curve and turn it into an eye-catching red:

Draw a Line 2

    Svg.append ("path")

      . attr ("line")

      . Style ("Red")

      . attr ("D", Valueline2 (data));

In this way, our curve is drawn successfully, the effect is as follows:

Improved

Although we have drawn out the graph, but our code is still imperfect, for example, if my d.open has a value very very large, he is much larger than any of the values in the D.close, then what will be the effect of drawing out?

is the red line running outside the canvas? This means that our canvas is unable to accommodate this maximum d.open value, because we used to set the y-axis size (domain) with the maximum value of D.close:

function (d) {

      return d.close;

    })]);

So, we're going to make an improvement on it, we're going to take the maximum value from two sets of values:

function (d) {

      Return Math.max (D.close, D.open);

    })]);

In this way, we have solved the problem of the image beyond the canvas, but how our data changes, are adapted to:

Two vertical axes

Careful observation of the original data, we will find that the value of d.open relative to the d.close trend of development more stable. But what if we want to better reflect its details (that is, to enlarge the trend)? It's easy to set up different axes for them!

Defining the range of axes

  var x = D3.time.scale (). Range ([0, Width]);

  var y = d3.scale.linear (). Range ([height, 0]);

  var y2 = d3.scale.linear (). Range ([height, 0]);

The range of Y and y2 (i.e. like Sugao) should be the same. We put the tick tag on the right side of the y2 so that it looks more symmetrical:

Defining axes

  var Xaxis = D3.svg.axis (). scale (X). Orient ("bottom"). Ticks (5);

  var yaxis = D3.svg.axis (). scale (Y). Orient ("left"). Ticks (5);

  var y2axis = D3.svg.axis (). scale (y2). Orient ("right"). Ticks (5);

Now, we also need to modify our valueline so that Valueline2 uses Y2 as a datum for the longitudinal axis direction:

Defining lines 1

  var valueline = D3.svg.line ()

    . interpolate ("basis")

    . x (function (d) {return x (d.date);}) 

    . Y (function (d) {return y (d.close);}); 

  Defining lines 2

  var valueline2 = D3.svg.line ()

    . interpolate ("basis")

    . x (return x (d.date)})

    . Y (return y2 (D.open)});

At the same time, we have to set different sizes for them:

Scale (size) The range of the data

    function (d) {

      return d.date;

    }));

    function (d) {

      return d.close;

    })]);

    function (d) {

      return d.open;

    })]);

Finally, we will draw them again!

Draw X Axis

Svg.append ("G")

  . attr ("x axis")

  . attr (")")

  . Call (Xaxis);

Draw Y Axis

Svg.append ("G")

  . attr ("y axis")

  . Call (YAxis);

Drawing y2 axes

Svg.append ("G")

  . attr ("y axis")

  . attr (", 0)")

  . Style ("Red")

  . Call (Y2axis);

The final results are as follows:

In the next section, we will learn how the x-axis tick labels are many cases, how to rotate the labels to make them easier to read!

D3.js Study (Fri)