Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aadchien
Last edited Sep 27, 2017
Created on Sep 14, 2017

This example shows a simple bar chart displaying four categorical values labeled A through D, with heights proportional to their numeric values. The bars are rendered in red using SVG rectangles, and each bar’s value is printed above it. The chart uses d3.scaleLinear for the y-axis, d3.scaleBand for the x-axis, and d3.axisBottom and d3.axisLeft to draw the axes. Data is hardcoded in the script as an array of key-value pairs.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/538661556048b539dc865548df902523'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/6611795eaa19c10067019736f8496614'>fresh block</a>

mit Licensed

Similar vizzes

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

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

fresh block

A simple bar chart displays five categorical values (A through E) with corresponding numeric counts. The chart uses a light blue background and cream-colored bars, with blue axes labeled in sans-serif font. Built with D3.js version 3.5.17, the visualization constructs an ordinal x-scale and linear y-scale, rendering the bars as SVG rectangles. Axis components are generated using d3.svg.axis, and the chart is positioned within a fixed margin layout.

ZZaraKinneen
89% 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
88% 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
88% 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
88% match