Skip to main content
SimilarExport ZIP
100%

Homework 3 - Bar & Grouped Charts with transition

✓ Published0🌍 Public
AAurelienVirello
Last edited Feb 5, 2018
Created on Feb 5, 2018

This example demonstrates how bar charts can transition between a standard vertical presentation and a grouped, side-by-side layout. Using D3.js, the visualization animates the bars' positions and heights through a smooth transformation, highlighting changes in categorical data over time. The code leverages D3’s `transition.attrTween` and `d3.select` to interpolate between the two chart states. The underlying data is embedded directly in the HTML file, with the charts rendered as SVG elements using traditional D3 scales and axes.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates an interactive bar chart that smoothly transitions between stacked and grouped layouts, with a single click on the chart toggling between the two modes. It uses D3.js v3 to render the chart as an SVG, animating the bars' positions and sizes via `transition` and custom attribute tweens. The data is generated in-browser with a `bumpLayer` function, and hovering a bar shows a tooltip listing the three series values using Underscore.js templates and jQuery for DOM manipulation. A legend with clickable series boxes lets viewers enable or disable individual series, updating the chart and the number of enabled series accordingly.

EEfratVil
82% match
Loading thumbnail…

transition grouped <-> stacked

This example demonstrates the animated transition between stacked and grouped bar charts. Ten random samples are displayed as five series, with the chart type toggling on a click. The visualization uses D3 v4’s `scaleBand` for categorical axes and `scaleLinear` for the y-axis. During transitions, `transition()` with duration and delay functions animates the bars’ positions and heights, reshaping the layout smoothly while maintaining the same underlying data.

CCtuauden
80% match
Loading thumbnail…

transition grouped <-> stacked

This example demonstrates the animated transition between stacked and grouped bar charts. Ten random samples are displayed as five series, with the chart type toggling on a click. The visualization uses D3 v4’s `scaleBand` for categorical axes and `scaleLinear` for the y-axis. During transitions, `transition()` with duration and delay functions animates the bars’ positions and heights, reshaping the layout smoothly while maintaining the same underlying data.

CCtuauden
80% match
Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an interactive transition between stacked and grouped bar charts, using sequenced animations to preserve object constancy as the data morphs between the two views. A radio button form toggles the mode, while D3 v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` handle the layout and stacking. The transitions use `rect.transition()` with staggered delays and duration to smoothly animate each rectangle’s x-position, width, y-position, and height. The visualization renders with SVG, inspired by Heer and Robertson’s animated transition techniques.

MMorganhaoyu
79% match
Loading thumbnail…

Transition Stacked Bar - Grouped Bar

This example shows a transition between a stacked bar chart and a grouped bar chart for monthly stock price data from Microsoft, Amazon, and IBM. Clicking the visualization triggers an animated morphing of the bars, where the stacked representation reorganizes into side-by-side groups per time period. The code employs D3 v4 APIs including `d3.transition`, `d3.scaleBand`, and `d3.scaleLinear`, with SVG rects animated via the `transition` method. It uses the `d3.nest` and `d3.mean` functions to aggregate the data from a CSV file.

AArnaudBru
78% match
Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an animated transition between stacked and grouped bar charts, with synchronized changes in position and size that preserve the identity of each bar segment. The visualization uses four series of fifty-eight pseudo-random values generated by a custom `bumps` function. The stacked layout defaults to view, and a radio button or an automatic timer switches to the grouped layout. The code leverages D3 v4 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and sequenced transitions via `transition()` calls, rendering as SVG.

Mmbostock
78% match
Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri
76% match
Loading thumbnail…

D3: Linked charts

Two linked bar charts display the same dataset of grades and associated names. Three sorting buttons reorder both charts simultaneously, with bars animating into their new positions. The example uses D3.js version 3.5.5 with ordinal and linear scales, SVG rendering, and transition delays to animate bar heights and the appearance of axes. The data is embedded as a JavaScript array of objects with name and grades properties.

AAdlopez2016
76% match