Skip to main content
SimilarExport ZIP
100%

D3 scales() scaleQuantile() in action

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

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.

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

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar
83% match
Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar
83% match
Loading thumbnail…

Scale comparison (work in progress)

This example demonstrates how different D3 scale types transform the same small dataset into distinct visual patterns. It renders circles whose radius, vertical position, and label depend on the scale’s output, placing each scale’s results in a separate horizontal row. The code uses `d3.scale.quantile`, `d3.scale.linear`, and `d3.scale.quantize`, all sharing the same domain, to compare their outputs. The visualization is a work in progress, showing the original data and three scaled variants, with each scale’s effective values or quantile boundaries printed beneath its circles.

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

Fork of Fork of D3 Scale - scaleSequential

Eleven circles arranged along a horizontal line demonstrate the `d3.scaleSequential` API with a rainbow interpolator. Each circle’s horizontal position is mapped by a linear scale from data values 0 to 100 to pixel coordinates, while its fill color uses the sequential scale’s domain to sample `d3.interpolateRainbow`. The circles render as SVG elements via a data join, with D3 v7 handling the DOM updates. The example contrasts continuous positioning with continuous color mapping, showing how two scales can drive different visual channels from the same dataset.

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