moving bars

100%

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

Animated SVG bar chart demonstrates a sequence of shape morphing transitions with D3 v4 and p5.js. Fifteen rectangular bars representing numeric values reorder horizontally, stack vertically, transform into horizontal length bars, then return to their original vertical positions with color interpolating from blue to red using d3.interpolateHcl and d3.scaleLinear. The transitions use chained `transition.attr` calls with varying delays and durations from a time scale, while the dataset is hardcoded as an array.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/jblrse/'>jblrse</a>'s block: <a href='http://bl.ocks.org/jblrse/e2d0aafd1d87d64a4de40e929c3723aa'>moving bars</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

EErik Sundahl

81% match

Loading thumbnail…

Simple bar chart transition

Three bar chart datasets are displayed through a select menu, with animated transitions between value sets using SVG rectangles. The chart shows exiting bars shrinking downward and disappearing, while new and updated bars grow from the bottom to their new heights. The code uses d3.v4’s `d3.transition()` and `selection.merge()` to handle enter, update, and exit states, with a `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping. Data is hardcoded as arrays of numbers, and the select element triggers `updateBars` on change.

SSoorin

81% match

Loading thumbnail…

D3 Practice - Animated Bar Chart

Eight vertical bars represent a fixed dataset of eight values at the start height of the chart. Upon loading, the bars animate upward via staggered delays and varied durations, with bars over the 300 threshold turning red while the others remain blue. The visualization uses D3 v4 with `d3.scaleBand` and `d3.scaleLinear` for positioning, and `transition().duration().delay()` for the animation, rendering as SVG rectangles within an axis-labeled coordinate system.

NNewMediaCatalyst

81% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

80% match

Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr

80% match

Loading thumbnail…

Different type of animation for bars

Six bars drawn as a closed line path animate between two different silhouettes: first as simple vertical bars, then into a tapered, flag-like shape, and back. The animation uses D3 v5’s `transition` with an `easeElastic` timing function and a monotone `d3.curveMonotoneX` interpolation. The data is a small inline array, and the path’s `d` attribute is updated twice to morph the shape. The SVG is rendered with axes and the line is filled in pink with a steelblue stroke.

AAlexDaGr8

80% match

Loading thumbnail…

D3: Smoother highlight transitions

A bar chart displays a static series of twenty numerical values, rendered as SVG rectangles. On mouseover, the individual bar's fill immediately changes to orange, and on mouseout, it smoothly transitions back to its original blue shade over 250 milliseconds using D3 v4's `.transition()` method. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with each bar labeled by its value via text elements that have pointer-events disabled.

深深度碎片

80% match

Loading thumbnail…

Vertical Bar Chart

This visualization presents a vertical bar chart initially displaying six pink bars with varying widths. The chart then animates, transitioning the bars to new width values over two seconds using D3’s transition system, with the `transition.attr` API handling the smooth dimension changes. The SVG rendering is implemented using `d3.select` and `append` to create the rectangles, while the data appears as static arrays within the code. The animation showcases how D3 can alter existing SVG elements dynamically, though the source data is not externally linked.

HHelen-Luwei-Zhang

80% match