fresh block

100%

✓ Published0🌍 Public

Last edited Jul 24, 2017

Created on Jul 24, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

85% match

Loading thumbnail…

fresh block

A set of vertical bars represents five data values, with one bar highlighted in red and the rest in blue, showing a clear visual contrast for the largest value. The chart uses D3 v4 to bind an array of numbers to SVG rectangles, scaling bar heights linearly from a maximum domain of 2500 down to zero. The code applies the scale to position each rectangle’s top and height, while a fixed bar width and white stroke separate the bars for readability.

44xDMG

84% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

84% match

Loading thumbnail…

fresh block

A vertical bar chart displays the relative frequencies of the first five letters, A through E, using bright green bars. Built with D3 v4, the visualization employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering positions each rectangle using the scales, and the data is hardcoded as an array of letter-frequency objects.

KKacieW

84% match

Loading thumbnail…

fresh block

Five vertical blue bars form a simple bar chart, with heights of 100 through 500 pixels. The visualization uses D3 v4 to map an array of five numbers to SVG rectangles. The `d3.selectAll` selection with `.attr` methods positions each rectangle based on its array index and scales its height relative to the data value. Bar widths remain fixed at 50 pixels, with white strokes separating each bar against a black background.

SSimonS

83% match

Loading thumbnail…

fresh block

A small SVG bar chart displays three horizontal stacked bars for consecutive months, with two colored series per month. The chart uses a custom d3.layout.stack() transform to compute stacked sums, then maps each bar’s width to its value and positions groups via d3.scale.ordinal() and rangeRoundBands. A yellow legend panel lists series names with color swatches, and hovering a segment updates a tooltip via d3.select() and d3.classed(). Data is hardcoded as JavaScript arrays in the block.

GGoomble

83% match

Loading thumbnail…

fresh block

A stacked bar chart shows three horizontal rectangles in teal and gold, arranged vertically, with a black central triangle and a white polygon outline at the upper left. The chart renders fixed SVG shapes directly, using `d3.select` and `svg.append` to construct the scene. The bars, with widths of 270 pixels and heights of 50, sit at y-coordinates 200, 250, and 300, while the triangle connects points from (150,350) to (275,275) and (150,200). The visualization uses D3 v4 and plain SVG attributes, with no data file or interaction.

HHeywhoyou22

82% match

Loading thumbnail…

fresh block

A simple bar chart displays five fixed values (100, 200, 300, 150, 275) as blue vertical rectangles against an SVG canvas. The bars are positioned sequentially along the x-axis with a fixed width of 50 pixels, while their heights directly encode the numeric data, anchored to a 500-pixel-tall chart. The code uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append SVG `rect` elements, calculating each bar’s `y` position as the difference between the chart height and its value. It sets a white stroke for visual separation, with no axes or labels present.

PPacsangon

82% match