scale

100%

✓ Published0🌍 Public

Last edited Feb 18, 2016

Created on Feb 18, 2016

This example demonstrates how D3’s linear scale maps a continuous domain to a fixed pixel range, with an interactive slider adjusting the domain’s maximum value from 20 to 1,000. The visualization renders two SVG axes: a blue-tinted grid of minor ticks and a black major axis, both regenerated on slider input via `d3.svg.axis()` and a `redraw()` function. The code uses D3 v3, SVG rendering, and a range input element to drive the scale’s domain, while CSS styling differentiates gridline hierarchies and the axis appearance.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

scale

A slider controls the domain of a linear scale, demonstrating how D3’s axis and grid components respond to changing input ranges. The visualization shows a horizontal grid with major, minor, and sub-minor tick lines in red and blue, while a separate black axis displays four major ticks. Dragging the slider updates the domain and redraws both groups via `d3.svg.axis()`. The SVG rendering uses crisp edges, with the grid background and tick styling defined in CSS. Data is generated on the fly from the slider’s numeric value, with no external dataset.

SSmith5mr

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

85% match

Loading thumbnail…

svg fund

This example demonstrates how a D3 linear scale maps an input value to an output range, using a simple numeric conversion from 0–100 to 0–500. The visualization outputs the mapped value for an input of 50, displaying 250 directly on the page. The code defines the scale with `d3.scaleLinear()`, setting its domain and range, then calls the scale function to compute the result. It relies on D3 v7 loaded from a CDN and renders the numeric output through `document.write` in the browser.

Jjaredaitken6

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

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

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

81% match

Loading thumbnail…

D3 Example

A D3 example demonstrates a linear scale mapping a data domain of 1 to 5 into a pixel range of 0 to 200, driving the x-position of text elements in an SVG. Using `d3.select` and `scale.attr`, the code binds arrays of numbers to text nodes, updating their position and fill color on a five-second timer. The `enter`, `update`, and `exit` selections manage the text lifecycle, showing red, blue, green, cyan, and magenta labels as the dataset changes. This illustrates data joins with `d3.scale.linear` and `svg.append`.

RRasinj

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

81% match