fresh block

100%

✓ Published0🌍 Public

Last edited Apr 24, 2018

Created on Apr 22, 2018

A simple bar chart displays seven blue rectangles of varying heights on a fixed 500-by-500 SVG canvas. The chart encodes the values from a hardcoded array—100, 250, 175, 200, 120, 50, and 60—as bar heights, with each bar positioned sequentially along the x-axis using a 50-pixel width. The visualization uses D3 v4’s data join (`selectAll` and `data`) to bind the array, then appends `<rect>` elements with `attr` calls to set x, y, width, height, and fill properties. White strokes separate adjacent bars.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A simple bar chart displays seven static blue rectangles on an SVG canvas, with each bar’s height proportional to a value in a hardcoded JavaScript array. The bars are positioned horizontally using a fixed width of 50 pixels per bar and aligned to a baseline of 300 pixels from the top. The visualization uses D3 v4’s selection and data-join methods (`selectAll`, `data`, `enter`, `append`) to create the rectangles, setting their `x`, `y`, `width`, `height`, `fill`, and `stroke` attributes directly. No axes, labels, or interactions are included; the chart just shows the raw data values as basic shapes.

MMasonLyons

95% 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

92% match

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

92% 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

92% match

Loading thumbnail…

fresh block

A simple bar chart displays five blue rectangles of varying heights, encoding the array `[100, 250, 175, 200, 120]` as vertical bars. The visualization uses D3 v4 to bind data to SVG `rect` elements, setting their `x`, `y`, `width`, and `height` attributes with data-driven values. Each bar is positioned sequentially along the horizontal axis, with its height proportional to the data value and filled in solid blue with white strokes. The chart demonstrates basic data binding and attribute manipulation in SVG, without axes or scales.

BBenPiggot

92% match

Loading thumbnail…

fresh block

This example shows a simple bar chart with five blue rectangles arranged horizontally, where each bar’s height corresponds to a value in a small hardcoded array. The chart uses SVG rectangles bound to the data via d3.v4’s selection.data, with x positions computed from an index and y positions derived from a fixed chart height minus each bar’s value. The code sets width, height, fill, and stroke attributes directly on the rect elements, producing a basic static visualization without axes or labels.

JJastor11

92% 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

91% 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

91% match