Skip to main content
SimilarExport ZIP
100%

Fork of D3 Scale Invert() in action practice

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 27, 2023
Created on Dec 27, 2023

This example demonstrates the inverse of a D3 scale, translating pixel coordinates back into data values. A grey SVG rectangle acts as a clickable area; clicking it uses `d3.pointer` to capture the mouse position and `scaleLinear.invert()` to compute corresponding X and Y values on two linear scales ranged from 0 to 100. The result updates a text display with both coordinates. The scales also employ `.nice()` to round the domain, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

D3 Scales - scaleTime()

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scale Invert() in action

A linear scale with a domain of -50 to 50 and a range of 0 to 600 pixels is drawn as an SVG axis. A grey clickable band beneath the axis uses d3.pointer to capture the mouse position, and linearScale.invert() converts that pixel coordinate back into a data value, displaying the precise number in a text label. The example demonstrates the inverse mapping capability of d3.scaleLinear in an interactive way.

SSubhendu Karmakar
90% 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…

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…

Fork of Scales and Axes

This example demonstrates D3 scales and axes by rendering a blank chart with a gray inner rectangle and labeled x and y axes. It uses `d3.scaleLinear` to map input data from 0 to 100 into pixel coordinates, with margins defining the plot area. The axes are created using `d3.axisBottom` and `d3.axisLeft`, which are appended to SVG groups and positioned via margin-based transforms. The code imports from the D3 v7 library and dynamically sizes the SVG to its container.

DDuc Pham
77% 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
76% 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
76% match
Loading thumbnail…

Fork of Scales and Axes

This example demonstrates how to construct a basic Cartesian coordinate system using D3 scales and axes. A dark grey inner rectangle is drawn within the SVG canvas to define the plotting area, while a linear scale maps the domain 0–100 to the horizontal and vertical pixel ranges. The bottom and left axes are rendered using `d3.axisBottom` and `d3.axisLeft` respectively. The `d3.scaleLinear` API handles the coordinate transformations, and the visualization responds to container resizing through a `ResizeObserver`.

Oownerofthesoul0000@gmail.com
76% match
Loading thumbnail…

Fork of Fork of D3 Scale - scaleSequential

Eleven circles arranged along a horizontal line demonstrate the `d3.scaleSequential` API with a rainbow interpolator. Each circle’s horizontal position is mapped by a linear scale from data values 0 to 100 to pixel coordinates, while its fill color uses the sequential scale’s domain to sample `d3.interpolateRainbow`. The circles render as SVG elements via a data join, with D3 v7 handling the DOM updates. The example contrasts continuous positioning with continuous color mapping, showing how two scales can drive different visual channels from the same dataset.

SSubhendu Karmakar
75% match