Scale comparison (work in progress)

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.

79% match

Classical Scales

This example showcases a wide array of classical D3.js scale types, each rendered as a horizontal axis line. It demonstrates linear, logarithmic, power, square root, quantile, quantize, threshold, and identity scales, alongside variations in tick subdivision and styling. The visualization uses the vanilla `d3.scale` and `d3.svg.axis` APIs from d3.v2 to generate the SVG output, with each scale's domain and range carefully constructed to highlight its unique behavior.

GGerHobbelt

77% match

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`.

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

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.

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.

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.

75% match