CODEWITHSUNDEEP
javascriptchartsd3.js
DewinDell
DewinDell

Reputation: 1028

How to skip undefined data in D3

So I'm trying to do something like the multi-line chart (http://bl.ocks.org/mbostock/3884955) The thing is my data is sometimes not defined.

So for example in data.tsv:

date    New York  San Francisco   Austin
20111001    63.4      62.7          72.2
20111002    null      59.9          67.7
20111003    53.3      59.1          69.4

So sometimes there are values that don't exist. If I don't include it at all D3 sees it as zero but I just want to skip it (draw line from 63.4 to 53.3 skipping what's in between). I'm using the code from bl.ocks without any changes so what do I need to change to acheive this?

Another question:

How would I go about doing checkboxes for every city so that only the selected cities appear on the chart?

EDIT: Discovered that HighCharts do exactly what I want out of the box. I'll have a look at D3 as well and compare the two..

Upvotes: 1

Views: 1044

Answers (1)

bitoiu
bitoiu

Reputation: 7484

This might not be a proper solution (because you might want to decorate data points with a circle or something) but if you only have straight lines, why not do a middle point between 63.4 and 53.3, then it seems nothing is between the two.

The other options is for you to draw the data per City, so for the New York case you wouldn't have a date for 20111002. I think this is best if you can go do it.

I'm not sure how you are drawing this but instead of having .data(allTheCities) you cicle through the cities, allTheCities.forEach and then do the drawing for each individual piece of data.

Before that I would do create a data set where you have date and city, for each of the cities and use a filter function to remove rows where the data is null.

You can either create a 3 tsv's or open that one and manipulate the data into three different sets.

Is this better?

Cheers.

Vitor.

Upvotes: 2

Related Questions