D3 ver.4 - ordinal scale invert

100%

D3 ver.4 - ordinal scale invert

✓ Published0🌍 Public

Last edited May 8, 2020

Created on May 4, 2020

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.

AI-generated description

This program prints a summary of a data table.

This data is about population of the most populous countries in 2018.

This data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

The data is a "file" here, but the recommended approach is to upload the data seprately, as in the video below.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive heatmap visualizes a 2D histogram of date and value data, with cell colors encoding counts. A dropdown menu and auto-cycling animation let users switch among sequential color interpolators from D3 4.0’s `d3.scaleSequential` and the `d3-scale-chromatic` library, including Viridis, Inferno, and ColorBrewer schemes. Built with D3 4.0, it renders SVG rects and axes, loading data from a CSV file.

CCurran Kelleher

75% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

74% match

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

73% match

Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

深深度碎片

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

71% match

Loading thumbnail…

D3 bar chart with data-binding

This D3 v4 bar chart demonstrates interactive data-binding by rendering an SVG with rectangles sized from a hardcoded array of numbers. The chart uses `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis, with bars turning red on mouse hover and green on click, while retaining the green color after the click via a custom `__clicked` property. The example, forked from romsson's block, differs from its non-binding predecessor by applying D3's `selectAll` and `.data()` method to attach data to shapes, enabling direct event handlers that reference each data value.

CCtuauden

71% match

Loading thumbnail…

D3: A browser default tooltip

This example shows a bar chart where hovering over any bar triggers the browser's default tooltip to display the bar's value. Clicking on any bar alternates the sort order of the bars between ascending and descending, with a staggered animation that repositions each rectangle. The chart is built with D3 v4, using `d3.scaleBand` and `d3.scaleLinear` to map the array of twenty numbers to SVG rectangles. The animation relies on the `transition()` method, with `d3.ascending` and `d3.descending` comparators applied to the data on each sort.

深深度碎片

71% match

Loading thumbnail…

D3 Gallery tooltip example

This example shows a heatmap of the `heatmap_data.csv` dataset, with each cell colored according to its value using the `d3.scaleSequential` interpolator with the Inferno color scheme. Hovering over a cell triggers a tooltip that displays the exact value of that cell, implemented via mouse events and the `d3.select` API. The SVG rendering includes axes built with `d3.axisBottom` and `d3.axisLeft`, and the tooltip's position is set using `d3.mouse`.

Mma-jacobs

71% match