100%

Classical Scales

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Sep 2, 2012

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.

AI-generated description

D3.js Axes …… <a href="http://bl.ocks.org/3605035" 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 is a copy of Ger Hobbelt's examples/axis/axis-classical.html.

The 'classical' axes showcase the augmented d3.axes component in https://github.com/GerHobbelt/d3

To see the same axes (rendered differently as vanilla D3 doesn't support functions for subtick count, etc. in its d3.axis component (at least as per v2.10.0 release), view:

same code, with crash protection wrappers, for vanilla D3.js: gist 3605069
reduced code wuitable for use with vanilla D3.js as is, with crash protection wrappers: gist 3605124

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

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

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

78% match

Loading thumbnail…

D3 axis example

This example shows a simple linear axis created with D3.js version 7.8.5, rendered as SVG. A linear scale maps a domain of 0 to 10 to a pixel range of 400, and a bottom-oriented axis is generated using `d3.axisBottom()` and applied to an SVG group with the `.call()` method. The visualization demonstrates the basic workflow of defining a scale, constructing an axis, and attaching it to the DOM.

AAxVa 🐍 💪

78% match

Loading thumbnail…

D3 - Axes

This example demonstrates how D3’s axis components render tick marks and labels for a linear scale. Four separate axes—left, right, top, and bottom—are drawn inside an SVG container, all sharing the same `d3.scaleLinear` domain of 0 to 100 mapped to a 400-pixel range. The code uses `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, and `d3.axisBottom` to generate the axes, then attaches each to a corresponding `<g>` group using `selection.call`. The visualization highlights the standard D3 approach for orienting axes around a plot area.

SSubhendu Karmakar

78% match

Loading thumbnail…

Fork of Scales and Axes

This example demonstrates how to construct a basic Cartesian coordinate system using D3 scales and axes. A dark grey inner rectangle is drawn within the SVG canvas to define the plotting area, while a linear scale maps the domain 0–100 to the horizontal and vertical pixel ranges. The bottom and left axes are rendered using `d3.axisBottom` and `d3.axisLeft` respectively. The `d3.scaleLinear` API handles the coordinate transformations, and the visualization responds to container resizing through a `ResizeObserver`.

Oownerofthesoul0000@gmail.com

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