# d3 line generator and missing data

**URL:** <https://talk.observablehq.com/t/d3-line-generator-and-missing-data/6671>\
**Category:** Help\
**Created:** [June 8, 2022, 9:05pm UTC](https://talk.observablehq.com/t/d3-line-generator-and-missing-data/6671 "2022-06-08T21:05:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![smpa01](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/smpa01/32/5352_2.png) [@smpa01](https://talk.observablehq.com/u/smpa01)\
**Post date:** [June 8, 2022, 9:05pm UTC](https://talk.observablehq.com/t/d3-line-generator-and-missing-data/6671/1 "2022-06-08T21:05:27Z")

</div>

I am trying to understand why `d3.line` behaves differently for `null` when combined with `scale`.  
To elaborate, my sample dataset is following [a notebook](https://observablehq.com/d/3261de2d85febec5)

```auto
	| x | y |
	|-----|--------------------|
	| 50 | 97.04013083865155 |
	| 100 | null |
	| 150 | 98.62594214598816 |
	| 200 | 76.49419950954189 |
	| 250 | 29.30639006661442 |
	| 300 | 29.366842697148176 |
	| 350 | 51.587600132998325 |
	| 400 | null |
	| 450 | null |
	| 500 | 26.90860254816283 |
	| 550 | null |
	| 600 | 99.1622268038577 |

```

If I try to generate a line from here **without using any scale** by

```auto
const noScale = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    (data)

```

it generates this,

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/69196bb2025da41d253a3874798544567836377a.png)

However, if I use scale in the generator it fails

```auto
const withScale = d3.line()
    .x(d => scaleX(d.x))
    .y(d => scaleY(d.y))
    (data)

```

However, using **`defined`** in the generator makes it indifferent whether scale was used or not.

```auto
const noScaleWithDefinedFilter = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .defined(d => d.y)
    (data.filter((a) => a.y !== null))

```

works as good as

```auto
const withScaleWithDefinedFilter = d3.line()
    .x(d => scaleX(d.x))
    .y(d => scaleY(d.y))
    .defined(d => d.y)
    (data.filter((a) => a.y !== null))

```

SO as the following two

```auto
const noScaleWithDefined = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .defined(d => d.y)
    (data)

```

works as good as

```auto
const withScaleWithDefined = d3.line()
    .x(d => scaleX(d.x))
    .y(d => scaleY(d.y))
    .defined(d => d.y)
    (data)

```

How can I generate the same line that **`const noScale`** but with the effect of scaling.

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 9, 2022, 8:58am UTC](https://talk.observablehq.com/t/d3-line-generator-and-missing-data/6671/2 "2022-06-09T08:58:05Z")

</div>

in **`noScale`** the null value is considered as 0. If this is what you want, you can do

```auto
d3.line()
    .x(d => scaleX(d.x))
    .y(d => scaleY(d.y || 0))
    (data)

```

If you want missing data to create a “gap” in the line, then the blue line is OK. You could add the dots on top of it to make it easier to understand that there are individual data points that are not connected because their neighbors have undefined values.

---

<div class="post-metadata">

**Author:** ![smpa01](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/smpa01/32/5352_2.png) [@smpa01](https://talk.observablehq.com/u/smpa01)\
**Post date:** [June 9, 2022, 2:14pm UTC](https://talk.observablehq.com/t/d3-line-generator-and-missing-data/6671/3 "2022-06-09T14:14:56Z")

</div>

@Fil I wanted to know how **withScale** can produce what **noScale** does.

Solved [here](https://stackoverflow.com/questions/72552464/why-d3-line-generator-fails-with-the-usage-of-scale-around-null-values)

I tested out

```auto
withScale = d3.line()
    .x(d => scaleX(d.x))
    .y(d => scaleY.unknown(0)(d.y))
    (data)

bound.append('path')
    .attr('class', 'Orange-withScale')
    .attr('d', withScale)
    .attr('fill', 'none')
    .attr('stroke', 'orange')
    .attr('stroke-width', '2')

```

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/d78f0cb80d6d278b1077306a4be5d24114bf0599.png)