Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Mmoyaroy
Last edited Feb 21, 2021
Created on Feb 21, 2021
Forked from D3 Starter

This example demonstrates how to create a D3 band scale with a specified domain and range, then output its computed bandwidth value to the console using `d3.scaleBand()` and the `bandwidth()` method. It shows how the scale’s range width is divided evenly across five discrete domain values, resulting in a bandwidth of 2. The page is minimal, consisting only of an HTML file that loads D3 v4 from a CDN and runs the scale logic inline in a script tag. A separate JavaScript file also shows importing `select` from D3 v6 to add text to the page body.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

scaleBand() in action

This example demonstrates a horizontal bar chart where each bar’s vertical position and height are determined by `d3.scaleBand`. Five data items, each with a day label and a numeric value, are mapped to a band scale with a range of 0 to 200 pixels and inner padding. The SVG renders orange rectangles whose `y` attribute comes from the scale, `height` equals the band’s `bandwidth()`, and `width` reflects the data value. The code uses D3 v7’s selection `.join()` to bind data to `rect` elements.

SSubhendu Karmakar
76% 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
70% 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
70% match
Loading thumbnail…

test v3

This example demonstrates a minimal D3.js v3 setup within a VizHub environment, showing an ordinal scale with padded range bands and a plain-text message rendered on the page. It loads D3 via UNPKG, imports the `select` function from the `d3` module, and defines a local ES6 module for the message string. The page displays the message using CSS styling, while the console logs the computed `rangeBand()` value from the ordinal scale.

Jjingwg3@163.com
70% 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
69% 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
Loading thumbnail…

Axis test

Two charts compare how `d3.axisBottom` handles band scales with different domain sizes. The top axis uses a small domain of seven values, displaying every tick, while the bottom axis uses a domain of fifty values and reduces ticks to twenty using `d3.ticks`. Both scales use `d3.scaleBand` and `rangeRound`, with axes rendered as SVG `<g>` groups. The implementation builds axis configurations through a custom `makeAxis` function that conditionally selects tick values based on domain length.

AAltxis
68% 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
68% match