svg fund

100%

✓ Published0🌍 Public

Last edited Nov 26, 2023

Created on Nov 25, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

80% match

Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar

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

78% match

Loading thumbnail…

D3 Scale - ScaleLog

This example demonstrates how a logarithmic scale maps data values across an SVG canvas. It places six text labels at positions calculated by a `d3.scaleLog()` function, with a domain spanning from 10 to 100,000 and a range of 0 to 700 pixels. The visualization highlights how log scales compress large numerical ranges, showing labels for 0, 10, 100, 1,000, 10,000, and 100,000 at increasing intervals. The code uses D3 v7’s `scaleLog`, `scaleLinear`, and `scaleSqrt` definitions, rendering the output as SVG text elements.

SSubhendu Karmakar

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

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

77% match