100%

Classical Scales

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Sep 2, 2012

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.

AI-generated description

D3.js Axes …… <a href="http://bl.ocks.org/3605124" 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>

The same examples as in this gist, but now tweaked to provide the subticks where possible when using d3.js v2.10.0; this means that any functions passed in as arguments to provide a flexible subtick count, size, or otherwise, are reduced to explicit numbers as v2.10.0 vanilla D3 doesn't support functions as parameters to d3.axis methods.

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

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

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

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

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…

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

78% match

Loading thumbnail…

Scales and Axes

This example demonstrates how D3.js maps data values to screen coordinates using linear scales and renders labeled axes. A grey inner rectangle spans the plotting area, and the `scaleLinear` function transforms the domain 0–100 into pixel positions for both x and y dimensions. The `axisBottom` and `axisLeft` components generate tick marks and labels along the bottom and left edges, while the `join` method efficiently manages SVG elements. The visualization is created using D3 version 7.8.5, with the chart’s dimensions and margins dynamically calculated from the container size.

CCurran Kelleher

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

77% match