fresh block

100%

✓ Published0🌍 Public

Last edited Oct 5, 2017

Created on Oct 4, 2017

This example shows a simple bar chart of five value sizes (155, 250, 175, 200, 120) rendered as blue rectangles with white strokes on an SVG canvas. The bars are positioned horizontally by index and vertically from the bottom, with heights proportional to each data value. The visualization uses the D3.js v4 library’s `select`, `selectAll`, and `enter().append()` API to bind the data array to `rect` elements, computing x, y, width, and height attributes directly from the data and a constant `rectWidth` of 50 pixels.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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 with D3 v4, where four blue rectangles represent values from a small array. The bars scale vertically from a fixed height, with their y-positions calculated as the height minus each data value. Using `d3.select` and `d3.selectAll`, the code binds the data array to SVG `rect` elements via `data()`, then appends them with `enter()`. Each bar’s width is set to a constant 100 pixels, and positions are assigned with `attr('x')` based on index times that width. The SVG output uses `fill` for blue bars and `stroke` for white outlines.

DDanielAguirre

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

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

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

90% match

Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1

88% match