D3 scale examples

100%

D3 scale examples

✓ Published1🌍 Public

Last edited Jan 24, 2024

Created on Jan 21, 2024

This example demonstrates D3 scale functions for mapping data values to visual ranges. It shows linear scales converting continuous domains to numeric and color outputs, ordinal scales for one-to-one mapping, and band scales for positioning categorical data with optional padding and rounded pixel ranges. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.interpolate` with data from `nobel-winners.json` containing country-level Nobel Prize counts. Console output illustrates scale outputs for specific inputs, including color interpolation and bandwidth calculations.

AI-generated description

D3 scale examples

Visit https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023

MIT Licensed

Similar vizzes

Loading thumbnail…

using of scale, scaleLinear(), scaleOrdinal()

This example demonstrates how D3 scaling functions map input domains to output ranges for both numeric and categorical values. A `scaleLinear()` maps values 0–3 to a pixel range of 0–300, logging transformed results to the console. A `scaleOrdinal()` assigns colors from an array to categorical domain values, and the code appends four div elements to the DOM, coloring each with a different color via D3 selections. The page is a minimal HTML document using d3.v5 and relies on CSS styling through inline `.style` calls.

Ssgzzhinde

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

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

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

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

77% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates the behavior of D3.js linear scales, specifically how they map input domain values to output range values. It shows the default scaling for values within the domain, then highlights what happens outside the interval, and finally illustrates the effect of the clamp method. The code uses `d3.scaleLinear()` with a domain of `[0, 20]` and range `[0, 1]`, logging results for various inputs including negative and oversized values. A second scale with `.clamp(true)` restricts outputs to the range. The visualization is purely text-based, using `document.writeln` to display computed values in the browser.

AAlainRo

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

77% match

Loading thumbnail…

D3 scales() scaleQuantize() in action

This example demonstrates how `d3.scaleQuantize()` maps a continuous numeric input domain to discrete output ranges, using it to assign fill colors to a series of rectangles. The visualization renders 100 SVG rectangles, positioned with a `d3.scaleLinear()` scale and colored with a quantize scale that divides the domain [0, 100] into four color bands: lightblue, orange, lightgreen, and pink. The code uses D3 v7’s `join()` method to bind data from `d3.range()` and style each rectangle’s fill based on its value.

SSubhendu Karmakar

75% match