For NVD3 lineChart Remove Missing Values (to be able to interpolate)

Question

I am using NVD3 to visualise data on economic inequality. The chart for the US is here: http://www.chartbookofeconomicinequality.com/inequality-by-country/USA/

These are two lineCharts on top of each other. The problem I have is that there are quite a lot of missing values and this causes two problems:

If I would not make sure that the missing values are not visualised the line Chart would connect all shown values with the missing values. Therefore I used the following to not have the missing values included in the line chart:

chart = nv.models.lineChart()
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1]== 0 ? null : d[1]; }) 

But still if you hover over the x-axis you see that the missing values are shown in the tooltip on mouseover. Can I get rid of them altogether? Possibly using remove in NVD3?

The second problem is directly related to that. Now the line only connects values of the same series when there is no missing values in between. That means there are many gaps in the lines. Is it possible to connect the dots of one series even if there are missing values in between?

Thank you for your help!

Answer 1

As Lars showed, getting the graph to look the way you want is just a matter of removing the missing values from your data arrays.

However, you wouldn't normally want to do that by hand, deleting all the rows with missing values. You need to use an array filter function to remove the missing values from your data arrays.

Once you have the complete data array as an array of series objects, each with an array of values, this code should work:

//to remove the missing values, so that the graph
//will just connect the valid points,
//filter each data array:
data.forEach(function(series) {
    series.values = series.values.filter(
        function(d){return d.y||(d.y === 0);}
    );
    //the filter function returns true if the
    //data has a valid y value 
    //(either a "true" value or the number zero,
    // but not null or NaN)

});

Updated fiddle here: http://jsfiddle.net/xammamax/8Kk8v/

Of course, when you are constructing the data array from a csv where each series is a separate column, you can do the filtering at the same time as you create the array:

var chartdata = [];//initialize as empty array

d3.csv("top_1_L-shaped.csv", function(error, csv) {

    if (error)
        return console.log("there was an error loading the csv: " + error);

    var columndata = ["Germany", "Switzerland", "Portugal", 
                      "Japan", "Italy", "Spain", "France", 
                      "Finland", "Sweden", "Denmark", "Netherlands"];

    for (var i = 0; i < columndata.length; i++) {

        chartdata[i].key = columndata[i];

        chartdata[i].values = csv.map(function(d) {
                return [+d["year"], +d[ columndata[i] ] ];
            })
            .filter(function(d){
                return d[1]||(d[1] === 0);
            });
            //the filter is applied to the mapped array, 
            //and the results are assigned to the values array.
    }
});