Debugging d3 line generator

Community Help
1

I am trying to understand why d3.line fails when null values are either succeeded or preceded by 0 or both.

I am working with data from different countries and I am using a generator that looks like this.

A notebook

const val = d3.line()
             .defined(d => d.Value)
             .x(d => scaleX(d.Year))
             .y(d => scaleY(d.Value))
             (dataX.filter((a) => a.Value !== null))

This particular generator fails, if it has to generate a line from (x1,0) to (x2,0) or (x1,0) to (x2,y2) or (x1,y1) to (x2,0).

I am programmatically generating an array of objects called filter which contains the information for the line generator - which two particular indexes in the array it should pickup to generate the line .

It works fine, for example when the data is like this

 const AfganisthanData = 
            [
        {"Region": "South Asia","Name": "Afghanistan","Year": 1997,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1998,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 1999,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2000,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2001,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2002,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2003,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2004,"Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2005,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2006,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2007,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2008,"Value": 0.276859504132231},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2009,"Value": 0.273092369477912},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2010,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2011,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2012,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2013,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2014,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2015,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2016,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2017,"Value": 0.27710843373494},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2018, "Value": null},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2019,"Value": 0.278688524590163},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2020,"Value": 0.270161290322581},
        {"Region": "South Asia","Name": "Afghanistan","Year": 2021,"Value": 0.270161290322581}
    ]

const AfganisthanFilter = [
    {"from":-1, "to": 8},
    {"from":20, "to": 22}
]

but fails with this pattern

const SolomonData = [
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1997,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1998,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1999,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2000,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2001,"Value": null},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2002,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2003,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2004,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2005,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2006,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2007,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2008,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2009,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2010,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2011,"Value": 0},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2012,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2013,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2014,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2015,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2016,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2017,"Value": 0.02},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2018,"Value": 0.0204081632653061},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2019,"Value": 0.0408163265306122},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2020,"Value": 0.0638297872340425},
    {"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2021,"Value": 0.08}
]

const SolomonFilter = [
    {"from":-1, "to": 1},
    {"from":3, "to": 5}
]

I have also performed the following test to see if undefined values are passed on to the generator and probably that is not the case.

For example, the following returns

const data = SolomonData;
const filter = SolomonFilter;

data.forEach(
    (a,i)=>{
        a.scaleYr=scaleX(a.Year);
        a.scaleVal=scaleY(a.Value);})
        console.log(data.filter((a,i)=>i===3||i===5))

[           
{
    "Region": "East Asia & Pacific",
    "Name": "Solomon Islands",
    "Year": 2000,
    "Value": 0.0204081632653061,
    "scaleYr": 72.5,
    "scaleVal": 208.57142857142864
},
{
    "Region": "East Asia & Pacific",
    "Name": "Solomon Islands",
    "Year": 2002,
    "Value": 0,
    "scaleYr": 120.83333333333334,
    "scaleVal": 280
}
]

yet,

val = d3.line()
    .defined(d => d.Value)
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    (dataX.filter((a) => a.Value !== null))

returns

M72.5,208.57142857142864Z

instead of

M72.5,208.57142857142864, L120.83333333333334, 280

Thank you in advance.

2

An observable notebook is formatted more like this Debugging Line Generator / Brett Cooper / Observable

And not sure where that bug is but the notebook format might help the debugging.

3

@hellonearthis sorry, I will try improve the notebooks moving forward, thanks for this.

I manged to find a way which worked for me, but I still don’t know why the generator behaved that way.

I am learning observable (I am finding it difficult but will get to it eventually) and hopefully will be better at my future notebooks.

filter.forEach(
    (a, j, r) => {
        const dataX = data.filter(
            (b, i) => i == r[j].from || i == r[j].to);

        const cond = dataX.some((a) => a.Value === 0);

        const val = (cond === true) ?
            d3.line()
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX) :
            d3.line()
            .defined(d => d.Value)
            .x(d => scaleX(d.Year))
            .y(d => scaleY(d.Value))
            (dataX.filter((a) => a.Value !== null))

        bound.append('path')
            .attr('class', `lineX${j}`)
            .attr('d', val)
            .attr('fill', 'none')
            .attr('stroke', 'green')
    }
)