Discrete vs continuous diverging scales with d3-scale-chromatic

100%

Discrete vs continuous diverging scales with d3-scale-chromatic

✓ Published0🌍 Public

Last edited Jun 6, 2018

Created on Jun 6, 2018

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Discrete vs continuous sequential scales with d3-scale-chromatic

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.

Aandyreagan

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

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

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

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

76% match

Loading thumbnail…

Color luminance and saturation

Two horizontal strips of small squares demonstrate how the sequential color scales `d3.interpolateGreys` and `d3.interpolateOranges` change with luminance and saturation. The top strip shows four gray shades, the bottom four orange shades, each sampled at equal intervals from zero to four via `d3.scaleSequential`. Rendered as SVG rectangles in d3.v4, the example uses `d3-color` and `d3-scale-chromatic` to produce the fills, with the squares positioned using `d3.scaleLinear`. The visual contrast between the monochromatic gray ramp and the saturated orange ramp highlights how lightness and color intensity vary independently across each scale's domain.

TTaraZhu

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

75% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

75% match