D3 Axes - Scale Types

100%

D3 Axes - Scale Types

✓ Published1🌍 Public

Last edited Dec 29, 2023

Created on Dec 29, 2023

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.

AI-generated description

D3 Scales - scaleTime()

D3 In Depth

MIT Licensed

Similar vizzes

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

87% 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 🐍 💪

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

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

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

82% match

Loading thumbnail…

Basic Axes

Four interactive buttons let a user select one of D3 v4’s four axis orientations—bottom, top, left, or right—to re-render a 500-by-500 SVG. The example displays three axes simultaneously, each built from a different scale: a linear scale from 0 to 1000, a power scale with exponent 2, and a time scale spanning one year. Each axis is drawn with `d3.axisBottom`, `d3.axisTop`, `d3.axisLeft`, or `d3.axisRight`, called on a grouped `<g>` element. The code uses `d3.scaleLinear`, `d3.scalePow`, and `d3.scaleTime` to set the domain and range.

MMTClass

82% match

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

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

81% match