100%

d3js Exercice 2 - Scales

✓ Published0🌍 Public

Last edited Oct 10, 2017

Created on Oct 10, 2017

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.

AI-generated description

d3js Exercice 2 - Scales

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/d7b7518300065d666827b39460745b26'>d3js Exercice 2 - scales</a>

mit Licensed

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

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

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

81% match

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

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

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

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

77% match

Loading thumbnail…

D3 scale examples

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.

AAxVa 🐍 💪

77% match