Home > Net >  d3 to account for missing data in line chart
d3 to account for missing data in line chart

Time：05-27

I am using d3.js to create a data-driven path. But the path is not accounting for missing data.

For example,

const src = [{
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1997,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1998,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1999,
        "Value": 22.4489795918367
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2000,
        "Value": 22.972972972973
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2002,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2003,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2004,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2005,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2006,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2007,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2008,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2009,
        "Value": 27.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2010,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2011,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2012,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2013,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2014,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2015,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2016,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2017,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2018,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2019,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2020,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2021,
        "Value": 31.125827814569501
    }
]

////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;

const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')

svg
//.attr('xmlns', svgns)
    .attr('viewBox', `0 0 ${width} ${height}`)

//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
    .attr('class', 'vBoxRect')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', 'none')
    .attr('stroke', 'red')

////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
    top: 70,
    bottom: 50,
    left: 70,
    right: 190
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width  - padding.right - padding.left;

//create BOUND rect -- to be deleted later
svg.append('rect')
    .attr('class', 'boundRect')
    .attr('x', `${padding.left}`)
    .attr('y', `${padding.top}`)
    .attr('width', `${boundWidth}`)
    .attr('height', `${boundHeight}`)
    .attr('fill', 'none')
    .attr('stroke', 'green')

//create bound element
const bound = svg.append('g')
    .attr('class', 'bound')
    //specify transform, must be .style and not .attr, px needs to be mentioned
    .style('transform', `translate(${padding.left}px,${padding.top}px)`)

////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////


const scaleX = d3.scaleLinear()
    .range([0, boundWidth])
    .domain(d3.extent(src, d => d.Year))

const scaleY = d3.scaleLinear()
    .range([boundHeight, 0])
    .domain(d3.extent(src, d => d.Value))

////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    

bound.append('g').attr('class', 'yAxis')
    .append('g').attr('class', 'yAxisDetail')    
    .call(d3.axisLeft(scaleY) ) 

const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1 
const minYear = Math.min([...src])

bound.append('g')
    .attr('class', 'xAxis')
    .append('g')
    .attr('class', 'xAxisBottom')
    .style('transform', `translateY(${boundHeight}px)`)
    .call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))    

////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    
    
    const line = d3.line()   
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    
bound.append('g')
     .attr('class', 'valLine')
     .append('path')
     .attr('d', line(src))
     .attr('stroke', 'black')
     .attr('fill', 'none')
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>

    <div id="container" ></div>
    <svg>
   
</svg>
    

</body>
    <script type="text/javascript">
    </script>

</html>

There is no data for Year=2001. Yet, d3 is generating a path between 2001 and 2002. How can I ask d3 to not generate anything between that.

I am hoping for a gap in path between that period.

Update

I came across the defined syntax and tried it like the following witht the current data which did not work.

const line = d3.line() 
.defined(d=>  d.Year !== 2001 ) 
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))

However, when I wrangled my data to this

src.push(   {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2001,
        "Value": null
    })
    
    src.sort((a,b)=>a.Year-b.Year);

and tried the below, it worked

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

What am I trying to understand here is,in order for defined to work

do I need to wrangle my data first in a way so that, it contains each X-axis year and corresponding Y-axis values (null for the missing year)?

or is there a way for defined to figure out the missing years without needing the author to wrangle the data?

const src = [{
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 1997,
                "Value": 15.540540540540499
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 1998,
                "Value": 15.540540540540499
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 1999,
                "Value": 22.4489795918367
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2000,
                "Value": 22.972972972973
            },

            {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2002,
                "Value": 25.3333333333333
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2003,
                "Value": 25.3333333333333
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2004,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2005,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2006,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2007,
                "Value": 26.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2008,
                "Value": 26.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2009,
                "Value": 27.3333333333333
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2010,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2011,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2012,
                "Value": 24.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2013,
                "Value": 26
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2014,
                "Value": 26
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2015,
                "Value": 26.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2016,
                "Value": 28.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2017,
                "Value": 28.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2018,
                "Value": 28.6666666666667
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2019,
                "Value": 30.463576158940398
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2020,
                "Value": 30.463576158940398
            }, {
                "Region": "East Asia & Pacific",
                "Name": "Australia",
                "Year": 2021,
                "Value": 31.125827814569501
            }
        ]
        // src.push(    {
        //         "Region": "East Asia & Pacific",
        //         "Name": "Australia",
        //         "Year": 2001,
        //         "Value": null
        //     })

    //  src.sort((a,b)=>a.Year-b.Year);
    ////////////////////////////////////////////////////////////
    //////////////////////// 1 CREATE SVG ////////////////////
    ////////////////////////////////////////////////////////////
    const width = 1280;
    const height = 720;

    const svgns = 'http://www.w3.org/2000/svg'
    const svg = d3.select('svg')

    svg
    //.attr('xmlns', svgns)
        .attr('viewBox', `0 0 ${width} ${height}`)

    //---create a rect covering viewBox --- to be deleted later
    svg.append('rect')
        .attr('class', 'vBoxRect')
        .attr('width', `${width}`)
        .attr('height', `${height}`)
        .attr('fill', 'none')
        .attr('stroke', 'red')

    ////////////////////////////////////////////////////////////
    //////////////////////// 2 CREATE BOUND ////////////////////
    ////////////////////////////////////////////////////////////   
    const padding = {
        top: 70,
        bottom: 50,
        left: 70,
        right: 190
    }

    const boundHeight = height - padding.top - padding.bottom;
    const boundWidth = width - padding.right - padding.left;

    //create BOUND rect -- to be deleted later
    svg.append('rect')
        .attr('class', 'boundRect')
        .attr('x', `${padding.left}`)
        .attr('y', `${padding.top}`)
        .attr('width', `${boundWidth}`)
        .attr('height', `${boundHeight}`)
        .attr('fill', 'none')
        .attr('stroke', 'green')

    //create bound element
    const bound = svg.append('g')
        .attr('class', 'bound')
        //specify transform, must be .style and not .attr, px needs to be mentioned
        .style('transform', `translate(${padding.left}px,${padding.top}px)`)

    ////////////////////////////////////////////////////////////
    //////////////////////// 3 CREATE SCALE ////////////////////
    ////////////////////////////////////////////////////////////


    const scaleX = d3.scaleLinear()
        .range([0, boundWidth])
        .domain(d3.extent(src, d => d.Year))

    const scaleY = d3.scaleLinear()
        .range([boundHeight, 0])
        .domain(d3.extent(src, d => d.Value))

    ////////////////////////////////////////////////////////////
    //////////////////////// 4 CREATE AXIS ////////////////////
    ////////////////////////////////////////////////////////////    

    bound.append('g').attr('class', 'yAxis')
        .append('g').attr('class', 'yAxisDetail')
        .call(d3.axisLeft(scaleY))

    const data2 = src.map(d => d.Year)
    const count = [...new Set(data2)].length - 1
    const minYear = Math.min(...src.map(d => d.Year))

    for (let i = minYear; i <= minYear   count   1; i  ) {
        const len = src.filter(a => a.Year == i).length;
        (len == 1) ? null: src.push({
            "Region": "East Asia & Pacific",
            "Name": "Australia",
            "Year": i,
            "Value": null
        });
    };

    src.sort((a, b) => a.Year - b.Year);

    bound.append('g')
        .attr('class', 'xAxis')
        .append('g')
        .attr('class', 'xAxisBottom')
        .style('transform', `translateY(${boundHeight}px)`)
        .call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))
        .call(a => a.selectAll('rect') //this is required to check if the tooltip is working as desired     
            .data(d3.selectAll(".xAxisBottom>.tick:not(:last-child)"))
            .join('rect')
            .attr('x', '0')
            .attr('y', '0')
            .attr('height', `${boundHeight}`)
            .attr('width', `${scaleX(1998)}`)
            .attr('class', (d, i) => {
                return `bgRect${i}`
            })
            .attr('fill', 'none')
            .style('stroke', 'black')
            .style('stroke-opacity', '0.1')
            .attr('transform', (d, i) => {
                const attributeX = d.getAttribute('transform').match(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm)
                const attributeY = boundHeight * -1;
                return `translate(${attributeX} ${attributeY})`
            })


        )

    ////////////////////////////////////////////////////////////
    //////////////////////// 5 CREATE PATH ////////////////////
    ////////////////////////////////////////////////////////////    

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

    bound.append('g')
        .attr('class', 'valLine')
        .append('path')
        .attr('d', line(src))
        .attr('stroke', 'black')
        .attr('fill', 'none')
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>

    <div id="container" ></div>
    <svg>
   
</svg>


</body>
<script type="text/javascript">

</script>

</html>

I can always dynamically add the missing values, if that is the only way to make defined generates the gap in the path.

const count = [...new Set(data2)].length - 1
const minYear = Math.min(...src.map(d => d.Year))

for (let i = minYear; i <= minYear   count   1; i  ) {
    const len = src.filter(a => a.Year == i).length;
    (len == 1) ? null: src.push({
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": i,
        "Value": null
    });
};

CodePudding user response：

You just need to add the data points (years) you want to skip, using a value later verified by line.defined. You can do this programatically, but here I'm just hardcoding the year 2001 with null as value.

Then, your line generator can be:

const line = d3.line()
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    .defined(d => d.Value)

Since null is falsy, I'm just checking if Value is truthy.

Here's your code with that change:

const src = [{
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 1997,
    "Value": 15.540540540540499
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 1998,
    "Value": 15.540540540540499
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 1999,
    "Value": 22.4489795918367
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2000,
    "Value": 22.972972972973
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2001,
    "Value": null
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2002,
    "Value": 25.3333333333333
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2003,
    "Value": 25.3333333333333
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2004,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2005,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2006,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2007,
    "Value": 26.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2008,
    "Value": 26.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2009,
    "Value": 27.3333333333333
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2010,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2011,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2012,
    "Value": 24.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2013,
    "Value": 26
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2014,
    "Value": 26
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2015,
    "Value": 26.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2016,
    "Value": 28.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2017,
    "Value": 28.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2018,
    "Value": 28.6666666666667
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2019,
    "Value": 30.463576158940398
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2020,
    "Value": 30.463576158940398
  },
  {
    "Region": "East Asia & Pacific",
    "Name": "Australia",
    "Year": 2021,
    "Value": 31.125827814569501
  }
]

////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;

const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')

svg
  //.attr('xmlns', svgns)
  .attr('viewBox', `0 0 ${width} ${height}`)

//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
  .attr('class', 'vBoxRect')
  .attr('width', `${width}`)
  .attr('height', `${height}`)
  .attr('fill', 'none')
  .attr('stroke', 'red')

////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
  top: 70,
  bottom: 50,
  left: 70,
  right: 190
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;

//create BOUND rect -- to be deleted later
svg.append('rect')
  .attr('class', 'boundRect')
  .attr('x', `${padding.left}`)
  .attr('y', `${padding.top}`)
  .attr('width', `${boundWidth}`)
  .attr('height', `${boundHeight}`)
  .attr('fill', 'none')
  .attr('stroke', 'green')

//create bound element
const bound = svg.append('g')
  .attr('class', 'bound')
  //specify transform, must be .style and not .attr, px needs to be mentioned
  .style('transform', `translate(${padding.left}px,${padding.top}px)`)

////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////


const scaleX = d3.scaleLinear()
  .range([0, boundWidth])
  .domain(d3.extent(src, d => d.Year))

const scaleY = d3.scaleLinear()
  .range([boundHeight, 0])
  .domain(d3.extent(src, d => d.Value))

////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    

bound.append('g').attr('class', 'yAxis')
  .append('g').attr('class', 'yAxisDetail')
  .call(d3.axisLeft(scaleY))

const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1
const minYear = Math.min([...src])

bound.append('g')
  .attr('class', 'xAxis')
  .append('g')
  .attr('class', 'xAxisBottom')
  .style('transform', `translateY(${boundHeight}px)`)
  .call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))

////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    

const line = d3.line()
  .x(d => scaleX(d.Year))
  .y(d => scaleY(d.Value))
  .defined(d => d.Value)

bound.append('g')
  .attr('class', 'valLine')
  .append('path')
  .attr('d', line(src))
  .attr('stroke', 'black')
  .attr('fill', 'none')
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>

  <div id="container" ></div>
  <svg>
   
</svg>


</body>
<script type="text/javascript">
</script>

</html>

Page link：https//www.codepudding.com/net/421599.html

Prev:google drive file upload with aiohttp in Python
Next:Unable to update nodes position using d3 force and Svelte
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding