Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aadrianme213
Last edited Feb 19, 2018
Created on Feb 19, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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.

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