Line with Missing Data

100%

Line with Missing Data

✓ Published0🌍 Public

Last edited Aug 6, 2016

Created on Aug 4, 2016

This example demonstrates how a line chart handles missing data points by breaking the line into segments. The visualization plots a sine wave–like curve across 40 evenly spaced samples, where every fifth data point is null, causing the line to skip those gaps. The chart uses D3 v4’s `d3.line()` with a `.defined()` accessor to filter null values, while circles mark the valid points. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with the data generated procedurally using `d3.range()` and `Math.sin`.

AI-generated description

A demonstration of line.defined.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/0533f44f2cfabecc5e3a'>Line with Missing Data</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Line with Missing Data

A sine-like series of 40 points is shown as a steel-blue line, with every fifth data point missing so the line breaks at those gaps rather than interpolating across them. White circles mark the existing points. The chart uses d3.line with its `defined` accessor to skip null values, while d3.scaleLinear sets the x and y scales, and d3.axisBottom and d3.axisLeft render the axes in an SVG.

Mmbostock

90% match

Loading thumbnail…

Area with Missing Data

This example demonstrates how D3 can represent time-series data with gaps, showing a jagged line and shaded area that skip missing points entirely. The synthetic dataset deliberately inserts null values every fifth sample, and the area and line generators use the `.defined()` method to interpolate across those gaps. The visualization renders as SVG using `d3.line()` and `d3.area()` with a Cartesian coordinate system built from `d3.scaleLinear()`, plus circular dots marking only the valid data points. Axes are added via `d3.axisBottom()` and `d3.axisLeft()`.

深深度碎片

84% match

Loading thumbnail…

Area with Missing Data

A sine wave is plotted as a blue line and light blue area chart, with data points missing at regular intervals (every fifth sample). The gaps are visible as breaks in the line and area, while white dots mark only the valid data points. The example uses d3.line and d3.area with their defined methods to control which data points are rendered, and d3.axisBottom and d3.axisLeft for the scales. The dataset is generated in code using d3.range and a sine function.

Mmbostock

83% match

Loading thumbnail…

D3 Line - handling null values with .defined()

This example demonstrates how to handle null values in a line chart using D3’s `d3.line()` generator with a `.defined()` filter. The chart renders a single polyline across an SVG canvas, where a missing data point (null) breaks the continuous path into two segments, leaving a gap in the visualization. The code constructs the path data by passing an array of coordinate pairs—including a null entry—to the line generator, then appends the resulting path to the SVG via `d3.select()` and `.attr('d', pathData)`. The stroke is set to a light gray (#ccc) with no fill, and the feature is powered by D3 v7.8.5.

SSubhendu Karmakar

76% match

Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca

73% match

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts (Line)

This example shows a minimal line chart built with raw SVG, not a traditional D3.js construction. The visualization plots five data points connected by a thick black path, where the stroke width and rounded line joins visually emphasize the connecting segments. The code uses an inline SVG element with a `path` that defines the line’s geometry via `M` and `L` commands. Although the title mentions D3, no D3 library is actually loaded; instead, the implementation relies solely on native SVG properties like `stroke`, `stroke-width`, and `stroke-linejoin` to create the appearance of a line chart. The data is hardcoded as coordinates in the path definition.

Vvivienho22

72% match

Loading thumbnail…

Untitled

This example renders a simple line chart with twenty-one randomly generated data points using D3 version 5. The chart uses `d3.scaleLinear` for both axes and `d3.line` with `d3.curveMonotoneX` smoothing to draw the line, while individual data points appear as circles. The SVG output is styled with CSS classes for the line and dots, and mouseover events log data to the console. The visualization demonstrates basic D3 plotting techniques without external data sources, relying on `d3.randomUniform` for its synthetic dataset.

EEvan Burchard

72% match

Loading thumbnail…

simple line chart

This example shows a simple line chart that visualizes a randomly generated dataset of thirty points, with each point’s y-value incrementing by a random offset from the previous point. The chart displays the overall trend of the series, with a final value label and x-axis tick labels for each data index. The code uses D3 v3 to append an SVG, create linear scales for the x and y axes, and draw the line via `d3.svg.line()`. The data is generated inline using JavaScript’s `Math.random()` within a `d3.range()` map, and the chart is rendered as an SVG path with a black stroke.

BBrunoDumas

71% match