Colour gradient for an area fill

100%

Colour gradient for an area fill

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Jun 23, 2014

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.

AI-generated description

This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.

It is aimed at demonstrating the application of a gradient fill to an area of a graph using d3.js. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes

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

83% match

Loading thumbnail…

Area graph with gradient in v4

This example shows an area graph of stock closing prices over time, with a custom gradient applied to the fill to create a color-coded visualization of price levels. The graph uses d3.area() to generate the area path and d3.scaleTime() and d3.scaleLinear() for the axes. A linearGradient element is appended to the SVG, with stop colors set to red, black, and lawngreen at various offsets, creating distinct bands. Data is loaded from a CSV file using d3.csv() and parsed with d3.timeParse().

Dd3noob

83% match

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

83% match

Loading thumbnail…

Area graph with gradient in v7

This example shows an area graph with a custom gradient fill that transitions through red, black, and green zones, mapping stock closing prices over time from a CSV file. Using D3 v7, it parses dates and values, scales them with `d3.scaleTime` and `d3.scaleLinear`, and defines the area shape with `d3.area`. A `linearGradient` with multiple stops colors the area, while `d3.axisBottom` and `d3.axisLeft` render the axes. The SVG output is generated entirely with D3's data-join and path-generation methods.

Dd3noob

82% match

Loading thumbnail…

Area graph with gradient in v6

This example shows an area graph with a vertical gradient fill that transitions through red, black, and green bands, making the change in closing stock prices visually distinct. The gradient is defined using an SVG `linearGradient` element with `gradientUnits` set to userSpaceOnUse, and its stops are bound to explicit color and offset data. The area path is rendered with `d3.area()` using time-scaled x and linear-scaled y axes, while data from `data.csv` is parsed with `d3.timeParse`. Axes are drawn via `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

81% match

Loading thumbnail…

Colour gradient on a graph line

This example shows a line graph of stock closing prices over time, with the line colored by a red-to-black-to-green gradient that maps to the y-axis value. The graph uses D3.js (version 3.5.17) with SVG rendering, and applies the gradient via a `linearGradient` definition referenced by the line’s `stroke` attribute. Data is loaded from a CSV file using `d3.csv`, and axes are generated with `d3.svg.axis`. The gradient stops are explicitly defined in code to create color bands at 40% and 62% of the vertical range.

Dd3noob

81% match

Loading thumbnail…

Area Gradient fill

This chart shows daily temperature variations over a year with a line and a gradient-filled area beneath it. The area uses a vertical gradient that shifts from steel blue to gray to red, tied to specific temperature thresholds. Built with the D3.js library, it parses dates from a CSV file and uses `d3.svg.area` to generate the path representing the temperature data between the line and the chart’s baseline.

Dd3noob

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