Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aalansmithy
Last edited Jul 24, 2017
Created on Jul 23, 2017

A grouped bar chart displays population structure data for Uruguay across two time periods, comparing six labeled categories (A–F) on a 0–100 scale. The chart initially shows 1950 values as white bars over a sky-blue plot area, with a yellow circular button that triggers a one-second transition to 2015 values while updating the title. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and `transition().duration()` to animate bar heights and positions.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A small multiple bar chart displays the population structure of Uruguay in 1950, comparing six categories (A–F) against a 0–100 scale. A yellow button triggers an animated transition using `rects.transition().duration(1000)` to update bar heights to a second dataset (val2), while the title text changes to "Population structure of Uruguay, 2015 (%)". The chart is rendered as SVG using `d3.axisBottom` and `d3.axisLeft` for axes, with data defined inline from a gist source.

MMartinanddre
94% match
Loading thumbnail…

fresh block 123

A bar chart displays a dynamic set of numeric city values, with buttons to add or remove random data points. Each bar animates its height and position using D3 v4 transitions, growing from the bottom when entering and shrinking downward when exiting. The chart uses `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for the y-axis, `d3.axisBottom` for ticks, and `d3.schemeCategory20c` for bar colors. All elements render as SVG within a fixed-size canvas.

Aallyraza
76% match
Loading thumbnail…

fresh block

A bar chart displays two percentage values (`perc1` and `perc2`) for sixteen letter-labeled categories (A–P) on a light orange background. Hovering over a blue circle recolors all bars blue, while clicking it triggers a staggered elastic transition that swaps each bar's height to its second percentage value. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition.attr` with `d3.easeElastic` and per-bar delays for the animated update.

MMartinanddre
75% match
Loading thumbnail…

fresh block

The visualization displays annual changes in seven categories (A–G) as grouped bar segments, with each category’s value represented by a row of dots whose size and position encode magnitude. Keyboard arrow keys or clicking timeline buttons animate transitions between years, smoothly morphing dot positions and colors. Built with D3 v3, it uses ordinal scales for axes, `d3.svg.axis` for ticks, and `transition.attr` with random delays to animate dot movement. Data comes from a CSV file with year-based columns, rendered as SVG with a color scale per category.

YYkelf
74% match
Loading thumbnail…

fresh block

This visualization shows the changing age distribution of the U.S. population over time, using a sliding time window controlled by arrow keys. The chart displays population counts for each birth year as horizontal bars, with the current year prominently labeled. Built with D3.js version 3, it loads data from a CSV file and uses scales, axes, and nested data structures. Rectangular bars and text labels are rendered as SVG elements, with smooth transitions animating the bars as the displayed year updates.

CCharisma9
74% match
Loading thumbnail…

fresh block

A simple bar chart displays five categorical values (A through E) with corresponding numeric counts. The chart uses a light blue background and cream-colored bars, with blue axes labeled in sans-serif font. Built with D3.js version 3.5.17, the visualization constructs an ordinal x-scale and linear y-scale, rendering the bars as SVG rectangles. Axis components are generated using d3.svg.axis, and the chart is positioned within a fixed margin layout.

ZZaraKinneen
74% match
Loading thumbnail…

fresh block

A simple bar chart displays fifteen red bars with blue outlines, each bar’s height proportional to a numeric value in a static array. The visualization uses D3 v4 with an SVG renderer, employing `d3.scaleBand` for the x-axis positions and `d3.scaleLinear` for the y-axis scale. Bars are drawn as `rect` elements, with heights mapped from the data and vertically aligned from the baseline upward. The chart is generated directly in the browser via Blockbuilder, with no external data source beyond the hardcoded array.

Aantoinedejonckheere
74% match
Loading thumbnail…

fresh block

A set of vertical bars displays a small numeric array, with bar heights proportional to values and fill colors interpolating from red to green based on each value’s position in the data range. The visualization uses d3.scaleLinear for the y-axis and color mapping, d3.scaleBand for horizontal positioning, and d3.schemeCategory20 as a fallback palette. Each rectangle is appended to an SVG canvas, with blue strokes outlining the bars. The code computes bar positions and heights directly from the scales, rendering the chart entirely with D3 v4.

TTollyCoburn
74% match