Manual Axis Interpolation

100%

Manual Axis Interpolation

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 24, 2012

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.

AI-generated description

D3's axis component supports automatic interpolation; simply change the scale, create a transition, and call the axis. The axis component will automatically create a smooth transition.

However, it's also possible to create a custom tween and redraw the axis synchronously for each frame of the transition. If you wanted to display intermediate ticks for a long-running transition, this might be preferred to the default behavior. This example shows a slow zoom from three years to one day.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Axis Transition

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.

FFrissAnalytics

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

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

74% match

Loading thumbnail…

Custom Time Format

This example demonstrates a custom multi-scale time format for a D3 axis, showing how tick labels adapt to different time granularities—displaying milliseconds, seconds, minutes, hours, days, and months as the scale zooms. It uses `d3.time.format.multi` to define an array of format/filter pairs, applied via `d3.svg.axis`. The code generates an SVG chart with a single year-long domain, rendering tick labels dynamically based on the date’s precision. The data source is the current date, and the rendering relies on D3 v3’s SVG axis API.

Mmbostock

73% match

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

73% match

Loading thumbnail…

Eased Scale

A single horizontal axis spans the width of the SVG canvas, with tick labels evenly spaced from 0 to 1 in the domain. The example applies a custom interpolator to a d3.scaleLinear continuous scale, easing the mapping so that intermediate positions follow a quadratic in-out curve rather than a linear progression. The code defines an easeInterpolate function that wraps d3.interpolate and passes the eased time value to the axis position. This demonstrates how to inject a d3.easeQuadInOut easing function into the scale’s interpolation, affecting only the spacing of tick marks rather than the data values.

Mmbostock

72% match

Loading thumbnail…

Axis Component

This interactive example showcases D3’s axis component, which simplifies adding reference lines and labels to custom visualizations. It plots S&P 500 monthly price data from 2000 to 2010 as a line with an area fill, using `d3.svg.axis` for both x- and y-axes. Clicking the chart triggers a random zoom on the x-axis, causing the ticks to smoothly transition via `svg.transition().duration(750)`. The visualization is rendered as SVG, with axes styled for crisp edges and clipped paths for the data series.

Mmbostock

72% match

Loading thumbnail…

d3.time.scale nice

This example demonstrates D3’s automatic handling of time-based axis tick spacing using the `d3.time.scale` constructor. A blank SVG canvas with 100-pixel margins displays an empty bottom axis, whose tick intervals are computed via the `.nice(d3.time.week)` method to create evenly spaced, clean week boundaries. The code explicitly sets a domain of two `new Date` instances (both the current time), then maps that domain to a 760-pixel range. Rendering relies on `d3.svg.axis` for the axis and ticks, while the SVG is assembled via chained `d3.select("body").append("svg")` commands.

Mmbostock

71% match