Lazy Scale Domain

100%

Lazy Scale Domain

✓ Published0🌍 Public

Last edited Aug 29, 2012

Created on Aug 29, 2012

This example demonstrates how to defer a scale’s domain definition until after data loading, highlighting the flexibility of D3’s linear scale. Using `d3.scale.linear()`, it initializes a scale with only a range, then after fetching data via `d3.json`, it computes the maximum value with `d3.max(data)` and assigns the domain. This modular pattern separates scale creation from data-dependent configuration, enabling reusable code where the data source remains dynamic. The visualization itself is not drawn here—the code stops at updating the scale, showing the setup phase for later rendering.

AI-generated description

Similar vizzes

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

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

73% match

Loading thumbnail…

Gist 51fecbcad3c5a744b1a96ad079f2c210

This example demonstrates the behavior of D3’s `scaleLinear` function, showing how a numeric input domain of [0, 1] maps to an output range of [0, 100]. It prints the scaled results for values 0.5, 0.75, 0, 1, and 2, revealing that the mapping is continuous and extends beyond the specified domain. The code imports the scale from `d3-scale` (via the `d3` namespace) and logs each conversion to the console, making the linear transformation’s direct proportionality clear.

RRonolibert

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

73% match

Loading thumbnail…

Scale 1

A minimal D3 axis example demonstrates how to create a linear scale and render it as a left-oriented axis. The code builds a `d3.scaleLinear` with a height-based range, then passes it to `d3.axisLeft`, which is invoked on a translated group element via `.call(yAxis)`. The snippet references a `data` array and `extend` placeholder for domain calculation, but does not load or draw any actual data points. It relies on d3.v4 and shows only the axis structure within an empty SVG.

DDanielAguirre

72% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js setup in which a linear scale maps input domain values from 0 to 10 to output pixel ranges from 0 to 600, producing a single scale object. The code uses `d3.scaleLinear` and invokes the scale with a value of 0, though no visual output is rendered beyond an empty SVG element containing a translated group. The page loads d3 v7 from a CDN and renders via SVG, with the body styled at a very large font size for emphasis.

Aalvasilvao

70% match

Loading thumbnail…

Own testing

This example visualizes two linear scales mapping x- and y-values from the data domain into screen coordinates, though no data points are rendered. Relying on D3 v6’s `scaleLinear` functions, it sets the y-domain from 0 to 200 and the x-domain from 0 to 50, each scaled to a 0–100 range on an SVG canvas. The chart’s structure is defined in static HTML and CSS, with a 960×500 SVG element, while the scaling logic is implemented in `index.js`. The visualization currently shows only the empty axes and scale setup, with no visible marks or data drawn.

Kkhuton

68% match

Loading thumbnail…

DomainRangeTinker

DomainRangeTinker demonstrates how a D3 v4 linear scale converts a percentage value into its decimal equivalent. The example uses `d3.scaleLinear()` with a domain of `[0, 100]` and a range of `[0, 1]`, then computes the scale’s output for an input of 99. The resulting decimal, 0.99, is rendered as text in an SVG element using a monospace font. The code appends a single `<text>` node to the SVG canvas, positioning it at fixed coordinates. This minimal block illustrates the core concept of domain-to-range mapping without any interactive elements or data loading, relying solely on the scale’s transform.

JJoelGallagher

68% match