fresh block

100%

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

This example shows a horizontal bar chart of six static numeric values, with each bar’s length proportional to its labeled count. The chart uses plain HTML `div` elements styled by a CSS class, where each bar’s width is set directly via an inline `style` attribute (for example, `width: 420px;` for the value 42). The code relies on no JavaScript libraries or data-fetching APIs; instead, it hardcodes all values and dimensions in the markup, with CSS controlling font, background color, padding, and text alignment.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A simple bar chart displays six fixed numeric values (4, 8, 15, 16, 23, 42) as horizontal bars, with each bar’s width proportional to its value and labeled at its right edge. The chart uses plain HTML `div` elements styled with inline CSS width attributes and a steelblue background, relying on no JavaScript libraries or data-binding frameworks. The markup is hand-written directly in `index.html`, with `padding`, `margin`, and white text set via a global CSS rule in a `<style>` block.

SSmith5mr

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

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

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

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

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

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

85% match