Class 1

100%

✓ Published0🌍 Public

Last edited May 15, 2017

Created on May 15, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

81% match

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

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

81% match

Loading thumbnail…

day1

This example shows a simple horizontal bar chart of six numeric values. It displays the data as teal bars with white value labels at the end of each bar, with bar height proportional to the value. The chart is built using d3.v4, with d3.scaleLinear mapping the data domain to pixel widths, and d3-selection methods appending SVG `rect` and `text` elements. The bars are grouped in `g` elements translated vertically, and the chart’s width and height are set dynamically based on the data length and a fixed bar height. The source data is a hardcoded array.

AAnniWis

80% match

Loading thumbnail…

bar

This example shows a simple bar chart built from a hardcoded array of nine numeric values. Each value is rendered as a vertical bar using a `div` element, with the bar’s height set dynamically via the `style` method. The page uses D3 v7’s data join pattern—`selectAll`, `data`, and `enter`—to append the bars to the body. A CSS class sets the bar’s width, while the background color of the entire page is changed to red using D3’s selection style API.

Pprabhatdie

80% match