100%

Classical Scales

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Sep 2, 2012

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.

AI-generated description

D3.js Axes …… <a href="http://bl.ocks.org/3605069" title="view this gist via bl.ocks.org">∆</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">∞</a>

This gist accompanies this gist which showcases the augmented axes component: here we see these axes rendered (if at all possible) using the mbostock d3 master head, i.e. 'vanilla d3'.

Related gists

gist 3605035: a series of linear axes with varying degress of sophistication, using the advanced d3.axis component
gist 3605069: same code, with crash protection wrappers, for vanilla D3.js (use to see how many of these vanilla D3.js supports today)
gist 3605124: reduced code suitable for use with vanilla D3.js v2.10 as is, with crash protection wrappers

Similar vizzes

Loading thumbnail…

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

94% match

Loading thumbnail…

Classical Scales

This example showcases a series of classical axis configurations built with the D3.js v2 library, highlighting its advanced axis component. It demonstrates various scale types—linear, logarithmic, power, square-root, quantile, quantize, threshold, and identity—each paired with different domain ranges and tick subdivision settings. The visualization animates through these axes, each labeled with a description, and includes SVG rendering with custom filters and styling. The code is derived from Ger Hobbelt’s enhanced d3.axes component, with related gists for vanilla D3 compatibility.

GGerHobbelt

94% match

Loading thumbnail…

D3 Axes - Scale Types

This example demonstrates six D3 axis types rendered side-by-side in a single SVG, each labeled with its scale type. It shows how different scales—linear, sqrt, log, time, band, and point—map input domains to output ranges of 0 to 500, with axes generated using `d3.axisBottom()`. The code explicitly defines each scale, then reassigns the axis’s scale before calling it on separate `<g>` elements, all built with D3 v7.

SSubhendu Karmakar

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

79% match

Loading thumbnail…

scale

This example demonstrates the foundational concept of D3 scales by computing and logging values from linear, square root, and time scales, then calculating the extent of a small dataset and applying a linear scale with a nice domain. It uses the d3 v7 library, importing scaleLinear, scaleSqrt, and scaleTime from d3, and renders to a blank SVG canvas. The code defines explicit domains and ranges to show how input values map to output pixel positions, with a dataset of five numeric values and an extent-based domain.

HHeet Bhatt

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

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

77% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates how d3.scaleLinear maps input values from a domain to a range, showing the output for inputs of 0, 10, and 20, then extending beyond the interval to reveal unbounded behavior. It then applies the clamp(true) method to the scale, which restricts outputs for out-of-range values like -10 and 200. Built with D3 v4, the code writes results directly to the document via document.writeln, and comments suggest experimenting with invert, power, log scales, or a color range.

JJeromeMouly

76% match