Threshold Encoding

100%

Threshold Encoding

✓ Published0🌍 Public

Last edited Jul 14, 2019

Created on Oct 29, 2012

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.

AI-generated description

This variation of a line chart demonstrates how to use a linear gradient to change the color of a line based on a y-threshold. This technique is similar to the gradient encoding, but with two stops at the same offset. An alternative method is to draw multiple lines with different colors and different clipping regions.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gradient Encoding

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.

Mmbostock

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

80% 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.

深深度碎片

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

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

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

78% match

Loading thumbnail…

Threshold Key

This example displays a horizontal threshold key with colored rectangles that map to a d3.scaleThreshold’s range, and tick marks positioned by a d3.scaleLinear. The key’s extent is set by the linear scale’s domain of 0 to 100%, with ticks labeled as percentages or numbers. The code builds the key by inverting each color’s extent from the threshold scale and inserting rectangles before the axis ticks. The visualization mirrors a New York Times map of police stops involving force, using SVG rendering and a gist-hosted data source.

FFrissAnalytics

76% match

Loading thumbnail…

Line Transition

A line chart displays daily maximum temperatures for 100 days of weather data, updating every 1.5 seconds by shifting the dataset forward one day. The y-axis highlights temperatures below freezing with a light blue fill. Built with D3 v5, the visualization uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`, animating transitions via `transition().duration()`. Each update shifts the newest point into view with a sliding transform, while the x-axis smoothly re-renders. Data loads from a JSON file containing temperature records.

Jjbruzzo

76% match