14 - Colour gradient for an area fill

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.

91% match

13 - Colour gradient on a graph line

This example shows a line chart of stock closing prices over time, where the line is colored by value using an SVG linear gradient. The gradient maps price levels to colors: low values appear red, middle values black, and high values lawngreen. A light gray line and axis frame the chart, while the data is loaded from a CSV with dates and closing prices. Although tooltip and scatterplot code are present, they are commented out, so the visualization displays only the gradient-colored line without animation. The gradient is defined vertically over the y-axis range, creating a smooth color transition that highlights the price thresholds directly on the line.

Aadry34160

84% match

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.

83% match

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().

82% match

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

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.

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.

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`.