Skip to main content
SimilarExport ZIP
100%

D3 scales() scaleThreshold() in action

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 27, 2023
Created on Dec 27, 2023

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.

AI-generated description

D3 Scales - scaleTime()

MIT Licensed

Similar vizzes

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
82% 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
82% match
Loading thumbnail…

D3 scales() scaleQuantile() in action

This example demonstrates how D3’s `scaleQuantile()` maps a numeric dataset to a categorical color scale, while `scaleLinear()` positions the data points horizontally. Fifteen circles are rendered in an SVG, each colored lightblue, orange, or lightgreen based on its quantile bucket. The visualization uses `d3.scaleLinear()` and `d3.scaleQuantile()` to transform the data array, and `d3.select("#wrapper").join()` to bind values to circle attributes. The source data is a hardcoded array of numbers, and the rendering is SVG-based.

SSubhendu Karmakar
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
77% match
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
77% 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
77% match
Loading thumbnail…

using of scale, scaleLinear(), scaleOrdinal()

This example demonstrates how D3 scaling functions map input domains to output ranges for both numeric and categorical values. A `scaleLinear()` maps values 0–3 to a pixel range of 0–300, logging transformed results to the console. A `scaleOrdinal()` assigns colors from an array to categorical domain values, and the code appends four div elements to the DOM, coloring each with a different color via D3 selections. The page is a minimal HTML document using d3.v5 and relies on CSS styling through inline `.style` calls.

Ssgzzhinde
76% match
Loading thumbnail…

D3 scales() scaleOrdinal() in action

This example displays the twelve month abbreviations in a horizontal row across an SVG canvas, demonstrating how D3 scales map data values to visual properties. Using the D3 v7 library, it applies a linear scale (`d3.scaleLinear`) to position each text label along the x-axis, while an ordinal scale (`d3.scaleOrdinal`) assigns a fill color of black to the first month and grey to the remaining ones. The labels are rendered as SVG text elements using D3's selection and join methods.

SSubhendu Karmakar
76% match