Skip to main content
100%

fresh block 123

✓ Published0🌍 Public
Aallyraza
Last edited Dec 4, 2017
Created on Dec 4, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
87% match
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
86% 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
86% match
Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard
86% match
Loading thumbnail…

fresh block

This example shows a simple bar chart displaying four categorical values labeled A through D, with heights proportional to their numeric values. The bars are rendered in red using SVG rectangles, and each bar’s value is printed above it. The chart uses d3.scaleLinear for the y-axis, d3.scaleBand for the x-axis, and d3.axisBottom and d3.axisLeft to draw the axes. Data is hardcoded in the script as an array of key-value pairs.

Aadchien
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
85% match
Loading thumbnail…

fresh block

A simple bar chart displays six hardcoded values as blue vertical bars on a 900 by 900 SVG canvas. Each bar’s height corresponds to its data value, while the `x` position is determined by an index multiplied by a fixed width. The visualization uses D3 v4’s selection and attribute methods to append rectangles and set their positions, dimensions, fill, and stroke. The data set is a static array, not loaded from an external source.

MMcZieuwa
85% match
Loading thumbnail…

fresh block

This example shows a simple bar chart built from an array of five numeric values, rendered as blue rectangles with white strokes on an SVG canvas. The code uses D3 v4’s selection and data binding to map each data point to a rectangle, with the x-position determined by an index-based offset and the y-position calculated as the height minus the data value, so bars rise from the bottom. The chart’s fixed width per bar is set via a constant, while the height directly encodes each number. The data is hardcoded in the script, and the rendering relies on SVG’s native shape elements.

BBraMKJ
85% match