Scales

100%

✓ Published0🌍 Public

Last edited May 7, 2013

Created on May 7, 2013

This example demonstrates three different D3 scales rendered as horizontal axes: an ordinal scale with six categorical bands, a single-band ordinal scale, and a log scale spanning 1 to 100. The code uses `d3.scale.ordinal().rangeRoundBands()` and `d3.scale.log()` alongside `d3.svg.axis()` to position tick marks, while text labels such as “top,” “bottom,” and “middle” illustrate the offset values returned by `rangeBand()` and the scale function. The SVG canvas is 500 by 500 pixels, with axes translated to different vertical positions.

AI-generated description

Similar vizzes

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

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

81% match

Loading thumbnail…

Scales and Axes

This example demonstrates D3’s scale and axis functions by rendering an empty plotting area with a gray inner rectangle and labeled axes. It uses `d3.scaleLinear` to map data values from 0 to 100 to pixel coordinates, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels along the bottom and left edges. The visualization is drawn into an SVG container, with margins defined for the plot frame. No dataset is shown; the focus is purely on constructing a coordinate system with D3’s low-level utilities.

Mmelissastrong89@gmail.com

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

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

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

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

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

79% match