100%

d3js Exercice 2 - Scales

✓ Published0🌍 Public

Last edited Oct 10, 2017

Created on Oct 10, 2017

This example demonstrates how D3.js scale functions map input domain values to output range values, printing results directly to the page. It uses `d3.scaleLinear()` to transform numbers between 0 and 20 into a range of 0 to 1, showing outputs for boundary and mid-point inputs. The code then applies the `.clamp(true)` method to restrict output values beyond the specified domain, so inputs like -10 and 200 return clamped results. Written in French comments, it also suggests experimenting with `invert`, `power`, `log` scales, and color ranges. The visualization is purely text-based, using `document.writeln` to display results in a `<pre>` element.

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

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

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

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…

scale

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.

SSmith5mr

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

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

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