Skip to main content
SimilarExport ZIP
100%

area chart

✓ Published0🌍 Public
Nnorangai
Last edited May 17, 2020
Created on Mar 25, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Area graph with gradient in v5

This example shows a time-series area chart of stock closing prices with a multi-color gradient that shifts from red through black to green based on the y-axis value. The area fills beneath the line, while the x-axis uses time scaling and the y-axis uses linear scaling. Built with D3 v5, it loads data from a CSV file and renders as SVG. The gradient is defined using an SVG `linearGradient` with `userSpaceOnUse` units, created via D3’s selection and data-join methods, and applied to a path generated with `d3.area`. Axis helpers `d3.axisBottom` and `d3.axisLeft` add the scales.

Dd3noob
81% 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
81% 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
81% 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
80% 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
80% 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
79% match
Loading thumbnail…

D3 Area - Multiarea

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.

SSubhendu Karmakar
79% match
Loading thumbnail…

Colour gradient for an area fill

This example shows a line chart with a gradient-filled area beneath it, where the fill color shifts from red through black to lawngreen based on the y-axis position. Data from a CSV file is plotted with d3.time.scale and d3.scale.linear axes. The code uses d3.svg.area to generate the area path and defines a linearGradient with multiple stop elements, referenced via a CSS url(#area-gradient) fill. The SVG rendering includes time-formatted x-axis ticks and a y-axis scaled to the maximum close value.

Dd3noob
79% match