Skip to main content
100%

Discrete vs continuous sequential scales with d3-scale-chromatic

✓ Published0🌍 Public
Aandyreagan
Last edited Jun 6, 2018
Created on Jun 6, 2018

This example contrasts discrete and continuous sequential color scales by drawing two bands of vertical lines on a canvas, with an SVG axis overlay. The top band uses a `d3.scaleThreshold` with `d3.schemeGreens[5]` to produce five distinct color steps, while the bottom band uses a `d3.scaleSequential` with `d3.interpolateGreens` for a smooth gradient. Both map a 0–100 domain to color, with lines sampled every 0.001 units. The code renders 100,000 lines per band using the Canvas 2D API for speed, while D3 v4 and d3-scale-chromatic handle the scales and axis.

AI-generated description

An example to ilustrate the difference of using d3.scaleThreshold vs d3.scaleSequential for creating discrete vs continuous sequential scales using d3.v4 and d3-scale-chromatic

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/17fe498351a3e70929e2e36d081e1067'>Discrete vs continuous diverging scales with d3-scale-chromatic</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/a75733ba5767813d4f31026d1d5e6244'>Discrete vs continuous sequential scales with d3-scale-chromatic</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Discrete vs continuous diverging scales with d3-scale-chromatic

This example compares discrete and continuous diverging color scales by rendering 2,000 thin vertical lines on a Canvas, with a translucent SVG overlay for the axis. The top band uses a `d3.scaleThreshold` with a domain divided into five steps and the `d3.schemePuOr` array, producing sharp color boundaries. The bottom band uses a `d3.scaleSequential` with `d3.interpolatePuOr` over a continuous [-1, 1] domain, creating a smooth gradient. Both scales map the same input range, and the code relies on d3.v4 and d3-scale-chromatic to draw the comparison.

Aandyreagan
95% match
Loading thumbnail…

4.0 Color Scales - Sequential

This example showcases 27 sequential color scales, comparing those built into D3 v4 with those from the d3-scale-chromatic library. The visualization renders a full-width set of thin vertical bars, initially colored using the Inferno scale, with each bar’s fill mapped to its x-position via a `d3.scaleSequential` interpolator. Clicking a button above the chart triggers a transition that smoothly recolors the bars using the selected interpolator, such as Viridis, Blues, or YlGnBu. The interface uses SVG rectangles and D3’s transition API for animated updates, with the code leveraging `d3.range` and data-driven styling.

TThanaporn-sk
80% match
Loading thumbnail…

An Exmple for D3.scaleSequential

This example demonstrates how D3’s `scaleSequential` maps continuous numeric domains to color interpolators. It shows two rows of rectangles, each colored by a different sequential scale: one using `interpolateRdGy` and another using `interpolateReds`. The code uses `scaleSequential` with explicit domains and applies the resulting colors as SVG fill styles. A `scaleLinear` positions the rectangles horizontally, and black-outlined polygons mark a selected range. The visualization relies on D3 v5 and renders entirely as SVG.

NNikkor
79% 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
78% match
Loading thumbnail…

SVG vs Canvas D3

This example compares the performance of rendering 20,000 lines using SVG versus Canvas in D3 v4. It demonstrates both discrete diverging color scales with `d3.scaleThreshold` and `d3.schemePuOr`, and continuous diverging scales with `d3.scaleSequential` and `d3.interpolatePuOr`. Two buttons trigger drawing with either approach, and each displays the elapsed time via the `performance.now()` API. The SVG version appends individual `<path>` elements, while the Canvas version draws directly to a 2D context and overlays an SVG axis.

Aandyreagan
78% match
Loading thumbnail…

color scale

This example displays a two-dimensional color gradient across a 960-by-500 canvas, with hue and lightness varying along the horizontal and vertical axes. The code uses D3 v4’s `d3.hcl` color space to generate colors, then paints each pixel individually via the Canvas 2D API’s `fillRect`. It also loads the d3-hsv and d3-scale-chromatic modules for extended color support, though only HCL values are used in the final rendering. The nested `d3.range` loops iterate over every x and y coordinate to fill the canvas with a smooth, continuous color field.

AAlec Burch
78% match
Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

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