Skip to main content
SimilarExport ZIP
100%

Simple bar chart

✓ Published0🌍 Public
HHuan Tran
Last edited Feb 10, 2024
Created on Feb 10, 2024
Forked from HTML Starter

This example shows a simple bar chart of eight numeric values rendered as SVG rectangles, with each value labeled directly above its bar. The chart uses D3.js version 5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` elements from a hardcoded array. Bar heights encode the data values, and text labels are added using the same data join. The SVG canvas has fixed dimensions of 500 by 300 pixels, with bars spaced by a constant padding.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Basic Bar chart

This example presents a basic bar chart built with D3 v5 and React, rendering to SVG. The chart displays a static dataset of five values as vertical bars, with bar heights proportional to the numbers. The code defines a 500x500 SVG canvas, applies a padding of 2 pixels between bars, and positions each rectangle using a calculated x coordinate. D3’s data join pattern (selectAll, data, enter, append) creates the rectangles, while attributes like width, height, and y are set via arrow functions derived from the dataset.

AAlina Sul
86% match
Loading thumbnail…

Bar Chart without index.js

This example shows a simple bar chart of five values rendered as SVG rectangles, with each bar labeled by its numeric data value. The chart is built using D3 v5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` and `text` elements. Bars are sized proportionally to the dataset, with fixed chart width and height variables, and include padding between bars. The SVG is appended directly to the body, styled with inline attributes for color, font, and text alignment. The dataset is hardcoded, and no external data source is used.

Nnikomc
86% match
Loading thumbnail…

Learn D3.js

This bar chart visualizes a static dataset of nine numeric values using SVG rectangles. The example demonstrates how to construct a basic chart with the D3.js v4 library. The code sets the SVG canvas dimensions, calculates bar widths based on the data array length, and uses `d3.select` and `selectAll` to append `rect` elements. Each bar’s height and y-position are derived from the data values, with a `transform` attribute translating each rectangle horizontally. The chart is contained within an HTML page with a light background.

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

Learn Simple bar chart D3

This example uses D3.js v4 to render a simple bar chart of nine arbitrary numeric values. The chart displays each value as a vertical rectangle, with heights proportional to the data, rendered as SVG elements via `d3.selectAll("rect").data().enter().append()`. Bars are positioned using the `transform` attribute and translated horizontally based on their index. The chart is styled with a teal background from the accompanying CSS file. The dataset is hardcoded in JavaScript rather than loaded from an external source.

Aaruba-haroon
85% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
85% match
Loading thumbnail…

Learn D3.js

This example shows a simple bar chart built with D3.js v4, where each bar’s height corresponds to a value from a hardcoded JavaScript array of nine numbers. The chart is rendered as SVG inside an HTML page, with a title and a dedicated `<svg>` element. The code uses `d3.select` to set the SVG dimensions, `selectAll` with `data` and `enter` to create rectangles, and `attr` to position each bar via a `translate` transform based on its index. The bars are drawn from the bottom, using the SVG height minus the data value for the y-coordinate.

Ii202081
84% match