Gist 6311048

100%

✓ Published0🌍 Public

Last edited Aug 22, 2013

Created on Aug 22, 2013

A D3.js visualization demonstrates post-selection for customizing axis elements, even during animated transitions. The example shows a time-series chart with a currency-formatted y-axis and dashed gridlines, where axis text labels are repositioned after rendering via `selectAll("text")`. When the y-axis domain transitions from $1 million to $3 million, the code uses `transition.tween` with null values to cancel default attribute tweens, allowing the custom label offsets to persist. The SVG rendering uses `d3.svg.axis` with linear and time scales, and the animation runs over 2.5 seconds.

AI-generated description

This example demonstrates the use of post-selection to customize an axis, even across transitions. After the axis is rendered, its elements (such as text labels, here) are reselected and modified to produce the desired appearance. When transitioning the axis, the post-selection modifies entering, updating and exiting elements. Passing null values to transition.tween cancels default tweens scheduled by the axis in favor of the customized styles.

Similar vizzes

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

81% match

Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock

78% match

Loading thumbnail…

Alignment of text labels - 2

This example demonstrates how text labels and axis ticks can smoothly transition to new positions when the underlying scale is rescaled. The visualization shows a set of categories along a point scale, where random data values are generated and the labels animate to their new y-positions while respecting constraints: labels do not overlap vertically, remain within the frame, and shift left or right depending on available space. The code uses D3 v4 with SVG and transitions via `d3.transition()`, updating the axis with `d3.axisLeft` and repositioning label groups using `.attr("transform", ...)`. A toggle button triggers the transition between original and rescaled states.

EEE2dev

77% match

Loading thumbnail…

Gist f3e85a6ed813f890e8ade1dd762adabe

An animated scatterplot uses D3.js transitions to update its x- and y-axes. The code calls `xAxis.transition(t).call(xAxisCall)` and the equivalent for the y-axis, smoothly interpolating the axis scales over time. The data points themselves are not explicitly rendered in this snippet, but the focus is on the axis transitions that accompany the underlying data updates. The visualization relies on D3’s selection and transition APIs to coordinate the animation, presenting a dynamic view of changing relationships between two variables.

Aadamjanes

77% match

Loading thumbnail…

http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101

This example demonstrates a dynamic donut chart that updates its data every 750 milliseconds, with smooth animated transitions for the arc segments and labels. The visualization uses D3.js 3.5.6 to render SVG paths and text, employing `d3.layout.pie` for data binding and `transition.attrTween` with a custom pie tween to interpolate start and end angles. A color scale assigns each category a distinct hue, while a center text element displays the total sum. The code includes custom label rotation logic to keep text readable around the ring.

FFrissAnalytics

75% match

Loading thumbnail…

D3: A chart transition with controlled duration (labels, too!)

This example demonstrates a bar chart whose values, bar heights, colors, and labels all animate over five seconds after a user clicks the accompanying text. The chart initially displays a set of twenty numeric values as SVG rectangles, with corresponding white text labels positioned above each bar. The code uses D3 v4’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `transition().duration()` method to smoothly interpolate the `y`, `height`, `fill`, and label text attributes when new data is applied. The dataset is a hardcoded array of numbers, rendered entirely via SVG elements.

深深度碎片

75% match

Loading thumbnail…

D3 Scatterplot (Animations)

This D3 scatterplot demonstrates animated transitions between datasets. The visualization initially renders 15 random data points as circles, with x- and y-axes scaled to the data’s domain. When a user clicks the text header, new random data replaces the old, and the circles smoothly transition to their updated positions while the axes rescale accordingly. The code uses d3.svg.axis for the axes and d3.selectAll("circle").transition() to animate the updates, with scales from d3.scale.linear.

BBenHeubl

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

74% match