How to display a straight line on svg in D3.js?

Question

I have a conundrum. I have a piece of code here that is a slightly modified example of the "multi-series" gallery example (sorry, 10 rep and can't link more than twice) and uses this .tsv file. The expectation is to have the data that currently plots in the code (the "stream" column) on the same SVG with the data that doesn't graph (the +Avgstream and -Avgstream) columns. However, in each D3.js project I've done, I've never been able to put straight lines on the graph. In this graph at the moment, only the stream column plots. It's my attempt at an easy way to show that the results of stream are inside or outside of the running average of the data I'm using.

Any ideas on why these lines won't plot?

Answer 1

Are you just trying to plot all three series? There should be no problem, except that it appears your column names in tsv file include the "+" and "-" character which I'm not sure is allowed:

Unixtime        stream  +Avgstream      -Avgstream
1351805809      5594    5489    6379
1351865010      5468    5489    6379
1351868732      5479    5489    6379
1351875915      5504    5489    6379
1351883184      7177    5489    6379
1351890345      5481    5489    6379
...

I replaced your column names (and tsv decoding) with:

data = [
    {Unixtime:1351805809, stream: 5594, plusavg:5489, lessavg:6379},
    {Unixtime:1351865010, stream: 5468, plusavg:5489, lessavg:6379},
    {Unixtime:1351868732, stream: 5479, plusavg:5489, lessavg:6379},
    {Unixtime:1351875915, stream: 5504, plusavg:5489, lessavg:6379},
    {Unixtime:1351883184, stream: 7177, plusavg:5489, lessavg:6379}
];

And I get three lines in the chart:

Is that sort of what you are trying to do? See here.