Bar Chart IIb

100%

✓ Published0🌍 Public

Last edited Feb 23, 2016

Created on Nov 6, 2013

A linear bar chart displays six numbers from a static array. Each bar's length is proportional to its value, with the value label placed at the bar's end. The chart uses D3 v3's `d3.scale.linear` to map data values to pixel widths on an SVG canvas. The code builds the visualization by selecting the SVG element, appending `g` groups for each data point, and adding `rect` and `text` elements with attributes derived from the scale.

AI-generated description

A basic SVG bar chart. Part of the Let’s Make a Bar Chart tutorial.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock

88% match

Loading thumbnail…

Bar Chart IIc

This example shows a basic horizontal bar chart, with each bar labeled by its value in white text. It uses D3 v3 to load tab-separated data from `data.tsv`, scales the bar widths with a linear scale, and appends SVG `<rect>` and `<text>` elements. The chart is rendered as an SVG with a fixed width, and the bar height is computed from the number of data rows. The `d3.tsv` method parses the data, and the `type` function coerces values to numbers before rendering.

Mmbostock

86% match

Loading thumbnail…

Bar Chart IIa

A static SVG bar chart displays six labeled values from 4 to 42, with horizontal steel-blue bars whose widths encode the numbers. Each bar is paired with a white right-aligned text label inside a `<text>` element. The chart is built directly in the HTML without JavaScript, using inline `<rect>` and `<text>` elements within `<g>` transforms for vertical positioning. This example demonstrates the basic SVG bar chart markup from the Let’s Make a Bar Chart tutorial.

Mmbostock

86% match

Loading thumbnail…

Bar Chart

This bar chart displays six numeric values as horizontal rectangles, with each bar’s length scaled linearly from its minimum to maximum value. The visualization uses D3 v7 to bind the data array to SVG groups, appending a rectangle and a text label per value. The chart positions each row using transform translations, and the x-axis scaling is handled by d3.scaleLinear. The SVG dimensions are fixed at 500 pixels wide with a bar height of 20 pixels, and the chart is rendered directly into the body element.

Jjajinkya

83% match

Loading thumbnail…

Bar chart

A bar chart displays categorical values with six colored, semi-transparent rectangles. The visualization maps lettered categories (A through F) to numeric values, with axes labeled and gridlines rendered via D3's SVG axis API. It uses `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis range, while `d3.svg.axis` generates the ticks. Rectangles are appended and styled with `d3.scale.category10` colors, and the data comes from an inline array of objects with `x` and `y` properties.

DDDDDDanica

82% match

Loading thumbnail…

Bar Chart IIIa

This example shows a simple SVG bar chart of letter frequencies, with steel-blue bars and white value labels. Each bar’s height corresponds to a data point from a tab-separated `data.tsv` file, and the chart is sized to 960 by 500 pixels. The code uses d3.v3’s `d3.scale.linear`, `d3.tsv`, and data joins via `selectAll`, `enter`, and `append` to create `g`, `rect`, and `text` elements, with the scale mapping values to pixel heights.

Mmbostock

82% match

Loading thumbnail…

D3 bar chart with data-binding

This example demonstrates a simple D3 bar chart that binds an array of numeric values to SVG rectangles, with each bar’s height proportional to its data point. It uses D3 v4’s `scaleLinear` to map the data domain to a fixed pixel range, then applies the `data()` and `enter()` methods to create and position the rectangles. The chart renders with a minimal style—unfilled bars with black outlines—and the data is hardcoded as a static array. The code relies on standard D3 selection and scale APIs, with the SVG container set to 960 by 500 pixels.

4456lumen

80% match

Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo

80% match