Skip to main content
100%

fresh bar chart

✓ Published0🌍 Public
Aaajungroth
Last edited Aug 22, 2017
Created on Aug 22, 2017

A simple bar chart visualizes eight hard-coded values, with each bar’s height proportional to its numeric data point. The bars are rendered as blue SVG rectangles with white strokes, drawn from a baseline at y=300 upward, on a 1000×1000 canvas. Using D3 v4, the code selects all `rect` elements, binds the data array via `data()`, and positions each bar with `attr('x')` and `attr('y')`, while `attr('height')` sets the bar length. The chart uses no axes or labels, focusing purely on raw value comparison.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

fresh block

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.

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

fresh block

This example displays a simple bar chart of five categorical values labeled A through E, with bar heights corresponding to numeric values. Blue rectangles are drawn on an SVG canvas using D3 v4’s data join, with each bar’s x-position calculated sequentially based on a fixed width of 50 pixels. The vertical position and height derive from a constant chart height of 300 pixels minus each value, so taller bars extend upward from a shared baseline. The code uses `d3.select`, `selectAll`, `enter`, and `append` to bind the hard-coded array of objects and render the visualization.

RRonolibert
85% match