D3 Area - Multiarea

100%

D3 Area - Multiarea

✓ Published1🌍 Public

Last edited Dec 29, 2023

Created on Dec 29, 2023

This example shows a multi-area chart built with D3 v7, displaying a gray band between upper and lower y-values across six x-axis points. The chart uses a linear scale to map input values (0–100) to pixel coordinates, while a d3.area() generator computes the path for the filled region. The data is provided as an inline array of objects with x, y0, and y1 fields, and the result is rendered as a single SVG path element inside a 700×400 viewport.

AI-generated description

D3 Scales - scaleTime()

D3 In Depth

MIT Licensed

Similar vizzes

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

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

83% match

Loading thumbnail…

D3 Area Genrators

This example demonstrates two area charts generated from the same set of six data points. The D3 `d3.area()` generator creates a path with a closed shape; the first is drawn with a red fill and a default baseline of zero, while the second uses a `y0(150)` offset to position its blue shape higher on the SVG canvas. The paths are rendered as SVG elements using the `d` attribute set directly from the generator’s output, with data provided as an array of `[x, y]` coordinates.

SSubhendu Karmakar

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

80% match

Loading thumbnail…

area chart

This example shows an area chart of visual acuity data, with a gradient fill transitioning from green through yellow to red based on y-values. The chart encodes data points as white circles positioned along the area’s upper boundary, each with a title tooltip displaying its value. Built with D3 v5, the visualization uses `d3.scaleLinear` for both x/y positioning and color mapping, an `area()` generator with `curveMonotoneX` for the shape, and SVG `linearGradient` definitions to color the fill. A simple SVG rect outlines the plot area.

Nnorangai

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

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

77% match

Loading thumbnail…

D3 Area - Radical Area

This example demonstrates a radial area chart generated with D3.js, where a circular path alternates between outer radii of 80 and 40 pixels while maintaining an inner radius of 20. The visualization encodes nine angular data points from 0 to 2π, filling the resulting petal-like shape with a light gray color. The code uses `d3.radialArea()` with `.angle()`, `.innerRadius()`, and `.outerRadius()` accessors to compute the SVG path data, which is then appended to a `<g>` element. The chart renders in an SVG container sized 700 by 200 pixels, with data provided as an array of angle-radius pairs.

SSubhendu Karmakar

77% match