Bar Chart I

100%

✓ Published0🌍 Public

Last edited Jul 20, 2018

Created on Jul 20, 2018

This simple bar chart displays seven values from an inline JavaScript array, rendered as horizontal bars whose widths scale linearly with the data. The chart uses a basic div-based layout, where each bar is a styled `<div>` with its width set proportionally via a D3 v3 linear scale. The code employs the `d3.scale.linear()` API to map the data domain to a pixel range, and appends the divs using `d3.select().selectAll().data().enter().append()`. A dark background and turquoise bar color provide strong visual contrast.

AI-generated description

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7322386'>Bar Chart I</a>

forked from <a href='http://bl.ocks.org/sandravizmad/'>sandravizmad</a>'s block: <a href='http://bl.ocks.org/sandravizmad/807c5904ec8f051720ed37e035367218'>Bar Chart I</a>

forked from <a href='http://bl.ocks.org/sandravizmad/'>sandravizmad</a>'s block: <a href='http://bl.ocks.org/sandravizmad/9d46aca90b4e1dd31341a9f0d11f8acc'>Bar Chart I</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bar Chart I

A simple bar chart displays a single array of seven numeric values as horizontally aligned rectangular bars. The bars are rendered as styled HTML `div` elements, with their widths proportional to the data values via a linear `d3.scale.linear` mapping values to pixel lengths. The chart uses D3 v3’s data join (`selectAll`, `data`, `enter`) to append the bars, and each bar is labeled with its corresponding number inside a colored, right-aligned text block against a black background. The example is a direct implementation of the classic "Let’s Make a Bar Chart" tutorial.

LLaurenstc

90% match

Loading thumbnail…

Bar Chart I

A basic bar chart visualizes a small fixed dataset of six numeric values, with each bar’s length and label representing its value. The chart uses green horizontal bars with white text, positioned through inline styles. This example, from the “Let’s Make a Bar Chart” tutorial, is built with D3 v3 and an HTML `<div>` per bar instead of SVG. The code employs the `d3.scale.linear` API to map data values to pixel widths, and uses D3’s selection and data-joining methods to create the bars.

MMTClass

84% match

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

84% match

Loading thumbnail…

Bar Chart IIb

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.

Mmbostock

83% match

Loading thumbnail…

Class 1

This example shows a simple horizontal bar chart built with D3.js v4. The chart maps an array of nine numeric values to bar widths using a linear scale, with each bar rendered as a green div element and labeled with its corresponding value. The code uses `d3.scaleLinear` to create the scale and `d3.select` to target the chart container, then appends divs via `enter()` and sets their width style based on the scaled data. The data is hard-coded in the script, and the chart is styled with inline CSS.

MMTClass

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

81% match

Loading thumbnail…

Data Visualization Module 3 - Bar Chart

This example displays a simple horizontal bar chart of a static JavaScript array of numeric values. Each value is represented by a steelblue rectangle, with the bar width proportional to the number and the numeric label printed at its end. The code uses D3 v3’s `d3.select` and `data` binding to append `div` elements, and applies a linear scale (`d3.scale.linear`) to map the data domain to pixel widths up to 420 pixels. All styling is done via inline CSS on the divs.

QQinita

80% match

Loading thumbnail…

D3: Drawing a Bar Chart

This example demonstrates a basic bar chart built with D3 v7 in an SVG container, visualizing an array of 20 numeric values. The bars grow downward from the top of a 500×100 pixel canvas, with each bar’s height proportional to its data value multiplied by 4, and its fill color transitioning from dark to lighter blue based on the data. The chart also overlays each bar with white, 11px sans-serif text labels showing the exact data values, centered horizontally within each bar. The code uses `d3.select` to append SVG elements and the data-join pattern with `.enter()` to create rectangles and text nodes.

MMarisa Tania

79% match