Line / Area Chart

100%

Line / Area Chart

✓ Published0🌍 Public

Last edited May 15, 2019

Created on May 15, 2019

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.

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.

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/7396acc69f9a061fe58b562c6220a08c'>Line / Area Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Line / Area Chart

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.

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

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

71% match

Loading thumbnail…

Multi-Line and Difference Area Chart

This example demonstrates a dual-mode chart that switches between a multi-line comparison and a difference area view, with a toggle control. The multi-line mode overlays two series as linear curves, while the difference mode fills the area between them, coloring increases and decreases distinctly. Hovering triggers a Voronoi overlay to identify the nearest data point and display its y-value. Built with D3 v4, the chart uses SVG for rendering, `d3.area` for the difference path, `d3.scalePoint` for the toggle, and animated transitions via `transition.attrTween` to smoothly update axes and shapes.

663anp3ca

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

70% match

Loading thumbnail…

Area Chart

This example demonstrates an interactive area chart built with D3.js (v4) that presents two overlaid series with gradient fills, rendered as SVG. The visualization initially displays one dataset, and a button click transitions the chart to a second, extended dataset. The chart's axes and area paths smoothly animate their transitions over two seconds using D3's `.transition()` method. The code defines linear gradients with specified opacity stops for series styling, and uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisRight` for scaling and axes, respectively.

Ssunole896@yahoo.com

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

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

70% match