Skip to main content
SimilarExport ZIP
100%

Invert d3 scaleBand

✓ Published0🌍 Public
LLuisSevillano
Last edited Jan 4, 2021
Created on Jan 4, 2021

This example demonstrates how to invert a `d3.scaleBand` scale, allowing a pixel position to be mapped back to the corresponding categorical domain value. The code defines a custom `invert` method that calculates the band index by accounting for outer and inner padding, the step size, and the range’s direction. It uses the `d3-scale` API, specifically the scale’s `domain()`, `range()`, `paddingOuter()`, `paddingInner()`, and `step()` methods, to compute the result. The implementation handles both ascending and descending ranges, returning the appropriate category for any point in the range.

AI-generated description

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
72% match
Loading thumbnail…

Fork of D3 Scale Invert() in action practice

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

SSubhendu Karmakar
69% match
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
68% match
Loading thumbnail…

D3 ver.4 - ordinal scale invert

This example demonstrates a scatterplot-like visualization of hourly temperature data, where moving the mouse across the chart triggers a red guide line that snaps to the nearest categorical x-axis band. Built with D3 version 4.1.1, it uses a custom `invert` function on an ordinal `scaleBand` to map pixel coordinates back to categories, enabling the interactive hover effect. The SVG heatmap-style line chart is rendered with animated transitions for both the guide line and the axes.

AArriannePandaraoan
66% match
Loading thumbnail…

Untitled

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.

Mmoyaroy
65% 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
63% match
Loading thumbnail…

Scales

This example demonstrates three different D3 scales rendered as horizontal axes: an ordinal scale with six categorical bands, a single-band ordinal scale, and a log scale spanning 1 to 100. The code uses `d3.scale.ordinal().rangeRoundBands()` and `d3.scale.log()` alongside `d3.svg.axis()` to position tick marks, while text labels such as “top,” “bottom,” and “middle” illustrate the offset values returned by `rangeBand()` and the scale function. The SVG canvas is 500 by 500 pixels, with axes translated to different vertical positions.

RRobinL
62% 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 🐍 💪
62% match