Line / Area Chart

100%

Line / Area Chart

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Mar 26, 2017

This example shows a Cartesian chart with a sine wave rendered as a purple line and a cosine wave as a semi-transparent light green area, sharing a common x-axis over 50 data points. It uses d3 and d3fc, combining a d3fc line series, area series, and gridlines into a single multi-series component within a d3fc Cartesian chart. Linear scales define both axes, with the y-domain padded using d3fc’s extent utility. The data is generated inline with d3.range and Math functions.

AI-generated description

This example demonstrates how to render a simple Cartesian chart with a line and an area series. The chart is constructed from the following components:

A Cartesian chart, with linear scales for x and y, is used to render the plot area, axes and labels.
The data is rendered via a line series and an area series, these are combined into a single series using the multi series component.
A gridlines component is also added to the multi series.
The extent utility function is used to calculate the domain for the x and y scale, with padding applied to the y scale.

mit Licensed

Similar vizzes

Loading thumbnail…

Line / Area Chart

This example shows a Cartesian line and area chart plotting two trigonometric functions, sine and cosine, against a shared linear x-axis. A purple line represents sine, while a semi-transparent green area represents cosine, with gridlines spanning the plot area. The visualization uses d3fc’s `chartSvgCartesian` to build the chart, while `seriesSvgLine`, `seriesSvgArea`, and `annotationSvgGridline` are combined via `seriesSvgMulti` for rendering. Data is generated inline with `d3.range`, and the x- and y-domains are calculated using `fc.extentLinear` with padding applied to the y-scale.

CColinEberhardt

93% 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

77% match

Loading thumbnail…

area chart

This area chart displays a series of 63 data points showing a fluctuating trend, with a smooth curve drawn through the values and a pink filled region beneath it. Built with Svelte and rendered as SVG, it uses d3.scaleLinear for the x and y axes, along with d3.area and d3.line generators with curveCatmullRom to create the smooth path. A gray overlay rectangle animates across the chart, sliding from left to right via a CSS keyframe animation. The visualization resizes responsively to fill its container using bound client dimensions.

TTarun Kumar Bosupally

74% match

Loading thumbnail…

Chart with Gradient

A minimal D3.js line-area chart displays nine data points of arbitrary x-y values, with the area fill transitioning from dark gray to red via an SVG linearGradient. The chart includes labeled axes with tick marks, axis arrows, and a title. The code uses d3.scale.linear for scaling, d3.svg.area to generate the filled path, and d3.svg.axis for the axes, all rendered as SVG elements.

11Cr18Ni9

74% match

Loading thumbnail…

D3 Area Chart

This example displays a stepped area chart of a time series where values rise in distinct plateaus from zero to 80,000, then fall back to zero. The chart uses an SVG path generated by d3.area, with d3.axisBottom and d3.axisLeft for scales, and linear scales for both x and y dimensions. Data is provided as a hardcoded array mapped to x/y points, rendered with yellow fill on a red background. The visualization demonstrates how d3.v7 constructs area shapes from discrete data points.

AAmeer Nuri

74% match

Loading thumbnail…

Area chart

Three layered area bands show how a value range evolves across an x-axis from 0 to 70, with each band representing a distinct series (e.g., area1, area2, area3) defined by low and high y-values. The chart uses stacked-like transparency via SVG paths filled with teal shades, computed with D3 v4’s `d3.area()` generator and linear scales for x and y. Rendering is done through SVG path elements appended to a 700×400 viewport, with data hardcoded as JavaScript arrays in the gist source.

EEfratVil

73% match

Loading thumbnail…

Area Chart

This example visualizes the sales figures for various item IDs using a combined line and area chart. Data is loaded from a CSV file via a URL, with dates parsed for the x-axis. The visualization employs D3 v5's `scaleTime` and `scaleLinear` for axes, and uses `line` and `area` generators with a `curveBasis` to create smooth paths. The SVG output includes styled axes with tick marks, and the area under the line is filled in yellow to emphasize the trend.

Ppreethamkesa

73% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

73% match