Skip to main content
SimilarExport ZIP
100%

Data Visualization Module 3 - Bar Chart

✓ Published0🌍 Public
QQinita
Last edited May 4, 2015
Created on May 4, 2015

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.

AI-generated description

Similar vizzes

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
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…

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

D3 tutorials

This example demonstrates a basic bar chart visualization. It shows a dataset of seven numeric values, each rendered as a fixed-width blue bar whose height corresponds to the value. The chart is built using D3.js methods to select the HTML body, append a `div` for each data point, and apply the CSS class `bar`. The bar heights are set inline using a JavaScript arrow function, and the initial styling is defined within a CSS style block. The code relies on `d3.select`, `d3.selectAll`, `.data`, `.enter`, `.append`, `.attr`, and `.style` to construct the visualization. The data is hardcoded as an array.

SSachin-jpg-lang
83% 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
83% match
Loading thumbnail…

Hello D3 Version 6

This example demonstrates how to create a basic bar chart from an array of numeric values using D3 version 6. The chart renders vertical bars as colored div elements appended to the document body, with each bar’s height proportional to its corresponding data point. The code uses the d3.select, data, enter, append, and style methods to bind the dataset to new div elements and set their heights dynamically. The dataset is a plain JavaScript array of 20 numbers, and the rendering relies on the DOM rather than SVG or canvas.

SST-commits
82% match
Loading thumbnail…

Test D3 6

This example creates a horizontal bar chart where each bar's length corresponds to its numeric value. The visualization is rendered as a block-level `<div>` element, with individual bars styled using steel blue backgrounds and inline widths proportional to the data. The code uses the D3.js version 6 API, specifically `d3.create`, `selectAll` with a `data` binding, and the `.join` method to append new elements. Each bar displays its value as white, right-aligned text within a 10-pixel sans-serif font.

Mmiodragkaradzic
82% match