Gradient Encoding

100%

Gradient Encoding

✓ Published0🌍 Public

Last edited Jul 14, 2019

Created on Oct 28, 2012

This line chart shows daily temperature readings over a year, using a linear gradient as a redundant color encoding alongside the y-axis position. The gradient spans from steelblue at cooler temperatures through gray to red at warmer ones, making temperature ranges immediately visible. The code uses d3.svg.line with basis interpolation to draw the path, while d3.svg.axis creates the time and temperature axes. The gradient is defined with `gradientUnits` set to `userSpaceOnUse`, positioning color stops at explicit y-coordinates from the d3.scale.linear output, applied via the stroke attribute referencing the SVG linearGradient element.

AI-generated description

This variation of a line chart demonstrates how to use a linear gradient as a quantitative color encoding redundant with y-position. The gradient units are defined as userSpaceOnUse, such that the gradient stops can be positioned explicitly rather than based on the line’s bounding box.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Threshold Encoding

This line chart displays daily temperature readings over a year, changing color from black to red as the value crosses a 50-degree threshold. A linear gradient with two stops at the same offset creates the hard color break. The visualization uses the D3.js v3 API, including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`, with data loaded from a TSV file. The SVG rendering applies the gradient to the line path.

Mmbostock

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

82% match

Loading thumbnail…

d3v4 - Gradient Color Line Chart

This example shows a line chart of temperature data over time, where the line’s color shifts through a red-gray-steelblue gradient based on value. The chart uses d3.v4's `d3.line()` with `d3.curveStep` to generate a stepped path, and a `linearGradient` with three `stop` elements, defined in SVG `defs`, applies the color scale via the `stroke` attribute. The data is loaded from a CSV of temperature readings, with x/y axes scaled using `d3.scaleLinear()`.

HHirosaji

82% match

Loading thumbnail…

Simple Line Chart with Color Gradient

This interactive line chart visualizes daily temperature readings from a Noe Valley sensor, using a color gradient that shifts from steelblue to gray to red to encode temperature values. The chart groups data by day, with buttons allowing users to toggle between different days. Built with D3.js and moment.js, the SVG visualization relies on `d3.time.scale` for the time axis and a linearGradient element for the temperature color encoding. The data originates from the Data Canvas project and is displayed for a slice of the full time series.

KKirkHunter

81% match

Loading thumbnail…

Line chart with gradient range

This line chart displays the daily average temperature in Atlanta, Georgia, over the first month of 2010, with the area around the line shaded to represent a range of ±2 standard deviations. Because the standard deviation varies per data point, the visualization builds the shaded region from individual area slices, one for each date. The chart is rendered in SVG using D3 version 3.5, with `d3.time.scale` for the time axis, `d3.svg.area` for the slices, and a vertical linear gradient that transitions from yellow to black. The data comes from a local JavaScript file containing weather station records.

Dd3noob

75% match

Loading thumbnail…

Color via Clipping

A line chart displays daily temperatures over several months, with the line split into two colors—red above a 55°F threshold and black below. The D3 v3 SVG implementation uses clipping paths (`clipPath` and `rect`) to divide the drawing area, applying each clip to a separate line path rendered from the TSV data via `d3.svg.line`. The `d3.time.scale` and `d3.svg.axis` handle temporal positioning and axes.

Mmbostock

73% match

Loading thumbnail…

color via clipping

This line chart shows daily temperature readings from a TSV dataset spanning October 2011 to September 2012. The visualization uses clipping to split the temperature curve at the 55°F threshold, coloring the portion of the line above this value in red and the portion below in black. The code applies `d3.svg.line` with basis interpolation and two `clipPath` rectangles, each assigned to one of two line paths via the `clip-path` attribute. D3’s time and linear scales map dates and temperatures, while SVG axes display the temporal and temperature scales.

深深度碎片

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

72% match