Threshold Key

100%

✓ Published0🌍 Public

Last edited Sep 19, 2018

Created on Sep 19, 2018

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.

AI-generated description

This example demonstrates how to construct a key from a threshold scale, in the style of Ford Fessenden’s map of police stops involving force. A linear scale is used to set the x-position of each colored rectangle in the key. There is one rectangle per color in the threshold scale’s range, and one tick per value in the threshold scale’s domain. The linear scale’s domain sets the implied extent of the key, here spanning 0 to 100%.

forked from <a href='http://bl.ocks.org/git-ashish/'>git-ashish</a>'s block: <a href='http://bl.ocks.org/git-ashish/3f7f86edf4ef46efb2c4585d1fa53ade'>Threshold Key</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Threshold Key

This example builds a color key for a threshold scale, styled after Ford Fessenden’s map of police stops involving force. It shows rectangles for each range color, with tick marks placed at the domain boundaries, spanning 0 to 100%. The key uses `d3.scaleThreshold` to map percentages to colors and a `d3.scaleLinear` for x-positions, while `d3.axisBottom` with custom tick values and formats renders the labels. The `invertExtent` method calculates each rectangle’s width, and SVG rendering is used.

Mmbostock

92% match

Loading thumbnail…

D3 scales() scaleThreshold() in action

This example demonstrates how d3.scaleThreshold() maps continuous numeric values to discrete color bins. A d3.scaleLinear() positions 60 rectangles along the x-axis, while the threshold scale assigns one of four fill colors—#ccc, lightblue, orange, and #ccc—based on domain cutoffs at 0, 50, and 100. The SVG rendering uses d3-selection’s join() method to bind data generated by d3.range(-10, 110, 2). The result visually highlights the color transitions at the specified threshold boundaries.

SSubhendu Karmakar

77% match

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

76% match

Loading thumbnail…

Threshold Choropleth

A Threshold Choropleth displays US county unemployment rates quantized into color bands. The map uses a threshold scale to map continuous rate values, ranging from two to ten percent, into discrete shades of purple. `d3.scale.threshold()` defines the domain boundaries and corresponding range colors. The visualization renders SVG paths for counties, colored via `style("fill")`, with state borders overlaid. Data is loaded from a TSV file containing county IDs and rates, and geospatial shapes come from a TopoJSON file processed with `topojson.feature` and `d3.geo.path()`.

Mmbostock

72% match

Loading thumbnail…

Bono Scale

This example demonstrates a D3.js threshold scale that maps the numbers 1, 2, 3, and 14 to discrete output ranges, visually represented as axis tick marks. It shows how threshold scales can be used to categorize continuous data into bins, here using a small array as the domain. The code creates an SVG with a linear x-scale and an axis, using `d3.scale.threshold` and `d3.svg.axis`. The rendering is minimal, with a styled axis and a caption, and the data source is a simple inline array. The visualization is a playful tribute to Bono’s Spanish skills, as the title suggests.

HHarlanFabbris

71% match

Loading thumbnail…

D3 scales() scaleQuantize() in action

This example demonstrates how `d3.scaleQuantize()` maps a continuous numeric input domain to discrete output ranges, using it to assign fill colors to a series of rectangles. The visualization renders 100 SVG rectangles, positioned with a `d3.scaleLinear()` scale and colored with a quantize scale that divides the domain [0, 100] into four color bands: lightblue, orange, lightgreen, and pink. The code uses D3 v7’s `join()` method to bind data from `d3.range()` and style each rectangle’s fill based on its value.

SSubhendu Karmakar

68% match

Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar

68% match

Loading thumbnail…

Classical Scales

This visualization showcases a comprehensive set of D3.js v2.10 scales through a series of horizontal axes, each paired with a descriptive label. Linear, logarithmic, power, square-root, quantile, quantize, threshold, and identity scales are demonstrated, with the log and power scales shown across different domain ranges to illustrate their behavior. The example also highlights tick subdivision options, including numeric, boolean, and string arguments, which is particularly notable because vanilla D3 v2.10 does not support function-based parameters for tick subdividing. The SVG renderer displays the axes with a glowing filter effect and the layout is fixed to 1500 pixels in height to accommodate the many examples.

GGerHobbelt

67% match