Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aalexanderhanssen
Last edited May 16, 2018
Created on May 16, 2018

A simple bar chart displays five fixed values as vertical bars rendered in pink with gray outlines. The bars are spaced evenly across an SVG canvas, with their heights corresponding directly to the data values. The chart uses d3.scaleLinear to map the data extent to a vertical range, though the y-position is hardcoded. Bars are appended via d3.selectAll and the enter selection, with dimensions set through the width, height, x, and y attributes.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

fresh block

Five vertical bars form a simple bar chart, with a single red bar highlighted among blue ones. The chart encodes an array of five numeric values as bar heights, with each bar positioned along the x-axis. The visualization is built with D3.v4 and rendered as SVG, using `d3.selectAll('rect')` to bind data to existing rectangle elements. The code then sets each rectangle’s x, y, width, height, fill, and stroke attributes, where the y-coordinate is calculated as the container height minus the data value.

MMailnickko
92% match
Loading thumbnail…

fresh block

Five vertical red bars form a simple bar chart, with bar heights matching the numeric values in a hardcoded JavaScript array. The bars are drawn as SVG rectangles using D3 v4, with the `d3.selectAll('rect')` data join positioning each rectangle via `x` and `y` attributes based on its index and value. Each bar has a fixed width of 100 pixels, a black stroke, and fills the available height up to a maximum of 300 pixels.

Aadrianme213
92% match
Loading thumbnail…

fresh block

This example shows a simple bar chart with five vertical bars of varying heights. The bars are positioned side-by-side and share a consistent width. The chart uses D3 v4 with SVG rendering, and the data is a hardcoded array of numeric values. It binds the data to pre-existing `rect` elements using `selectAll('rect')` and sets their position, size, and fill color. The chart's height and bar widths are fixed constants, and stroke is applied for clear separation between bars. The code relies on D3’s selection API to directly update attributes without creating new elements.

PPabloRiv
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
92% 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
91% match