Axis Transition

100%

Axis Transition

✓ Published0🌍 Public

Last edited Sep 4, 2018

Created on Sep 4, 2018

A linear x-axis centered vertically in a full-screen SVG repeatedly updates its domain to a random value between 10 and 10,000 every second. Each update triggers a smooth transition of the axis tick positions using D3 v4’s `d3.interval` and the `.transition().call(x_axis)` pattern with `d3.axisBottom`. The example is built with the `d3-marcon` helper library for margin conventions and renders purely as a demonstration of animated scale-domain changes.

AI-generated description

When a scale's domain changes, transition the axis.

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/678935d06d4601c25cb141bacd4068ce'>Axis Transition</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Axes - Transition

A linear D3 axis transitions smoothly when its scale domain changes. The example uses a button click to generate new random minimum and maximum domain values, then calls `d3.axisBottom` within a `transition()` to animate the tick positions and labels. The SVG renders a single horizontal axis with 500 pixels of range, and the transition updates as the scale’s domain shifts.

SSubhendu Karmakar

85% match

Loading thumbnail…

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

Mmbostock

79% match

Loading thumbnail…

Axis

This example demonstrates how axes and gridlines respond to changing data domains in a D3.js visualization. It shows a simple SVG chart with an x-axis and y-axis spanning a 500×500 pixel area, with dashed gridlines extending from each tick mark. The visualization randomly rescales both axes by generating a new maximum value between 0 and 100, smoothly animating the axis transitions using `d3.transition()` and updating gridlines dynamically. Built with React, the code uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to render and update the axes, while the gridlines are appended as `line` elements within each tick group.

苏苏巨亮

79% match

Loading thumbnail…

D3: Transitioning points to randomized values, plus rescaled axes!

Clicking the text triggers a full update of a D3 v5 scatterplot: 50 circles transition to new random coordinates while the linear scales and axes recalculate to fit the new domain. The circles briefly enlarge and turn magenta during the transition, then shrink back to black. The code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and chained `transition()` calls, with a clip-path masking any points outside the chart area. The dataset is generated on the fly in JavaScript, and rendering is SVG with animation.

Nnikomc

77% match

Loading thumbnail…

Axis Styling II

This example demonstrates a time-series axis with a customized right-side y-axis using post-selection, where axis labels and grid lines are restyled after rendering. The code uses d3.axisBottom and d3.axisRight to create the axes, with the y-axis’s tick lines converted to dashed gray gridlines and labels repositioned. A transition triggered by d3.timeout animates the y-axis domain change over 2.5 seconds, using post-selection to modify entering, updating, and exiting tick elements. The implementation relies on d3.scaleTime, d3.scaleLinear, and transition.attrTween to cancel default tweens, rendering as SVG with animation.

Mmbostock

77% match

Loading thumbnail…

Manual Axis Interpolation

This example demonstrates a custom axis transition in D3, animating a slow zoom from a three-year time span down to a single day. The visualization uses `d3.time.scale.utc` and `d3.svg.axis` to render the x-axis, while a manual `tween` callback redraws the axis synchronously for each animation frame, unlike the automatic interpolation typically used. The transition runs over 8.5 seconds, with the code defining two date domains and interpolating between them via `d3.interpolate`. The axis is redrawn continuously within an SVG container, showing intermediate tick labels as the scale changes.

Mmbostock

77% match

Loading thumbnail…

Responsive Axes

This example demonstrates axes that dynamically update their tick spacing and labels when the browser window is resized. A linear scale maps a domain of zero to ten trillion to the width of the plot area, while a second scale maps zero to one to the height. The visualization uses `d3.axisBottom` and `d3.axisLeft` to generate the ticks, and through a custom `render` function triggered by a `resize` event listener, the SVG and its axes adjust continuously to the new dimensions. The rendering uses `d3.select`, `marginConvention`, and labeled axis modules to manage layout and styling.

DDean Bozic

76% match

Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Ppanmenghan

76% match