Fork of D3 Bar Chart

100%

Fork of D3 Bar Chart

✓ Published0🌍 Public

Last edited Feb 27, 2026

Created on Feb 27, 2026

This fork of a D3 bar chart displays a static dataset of 20 numeric values as vertical bars, with each bar’s height and color intensity proportional to its value and labeled with its number. Built with D3.js version 4.5.0, the SVG is created via `d3.select('body').append('svg')`, and bars and text are added using `selectAll('rect').data(dataset).enter().append('rect')` and a similar text chain, with `attr` calls setting positions, dimensions, and fill colors. The chart uses a simple linear mapping from data to pixel coordinates, with no animation or interaction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Bar Chart Scales

This example shows a two-scale bar chart using synthetic data, with band and linear scales mapping values to SVG rectangles. The D3 v4 code builds an SVG with bars shaded by value using `scaleBand` for the x-axis and `scaleLinear` for the y-axis, then appends text labels atop each bar. The chart animates when a paragraph is clicked, though no click handler is defined, so the visualization remains static. Data comes from an inline array.

TTony Mai

86% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart of 20 numeric values using D3. It renders an SVG with rectangles and text labels, where bar height and color intensity map to each data point. The code uses `d3.select` to build the SVG, `.data()` with `.enter()` to bind the dataset, and `.append('rect')` and `.append('text')` to draw the visualization. Bars are positioned with computed `x`, `y`, and `height` attributes, while labels display the values in white sans-serif text.

Eedmundo.guerra.ipad@gmail.com

86% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple bar chart visualizing a small dataset of five numeric values, rendered as sky-blue rectangles with white value labels. It uses D3.js (version 7.8.5) to create an SVG container, bind data to rectangles via `selectAll().data().enter().append()`, and set each bar’s height and position based on its value. The code also leverages method chaining with `.attr()` to configure dimensions, colors, and text properties, with all rendering occurring client-side in the browser.

PPriyank Singh

84% match

Loading thumbnail…

Fork of Simple Exploration with bars

A simple D3 bar chart displays six static data values with corresponding letter labels. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles with steelblue fill. It includes labeled axes for "Data Value" and "Data Count," along with `d3.axisBottom` and `d3.axisLeft` tick marks. The fixed dataset is hardcoded in JavaScript, and the chart is drawn in an SVG container with specified margins.

Ssharmamilan632.m@gmail.com

84% match

Loading thumbnail…

Fork of Bar Chart interactive

This bar chart visualization displays a dataset of 50 randomly generated values as SVG rectangles, with each bar labeled by its numeric value and colored on a purple scale. Built with D3 version 6, the chart uses `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Clicking the text above the chart triggers a one-time update that replaces the dataset with 25 new random values, recalculating the bar heights and positions accordingly.

RRahulSai05

84% match

Loading thumbnail…

Fork of D3 Power of Data Random

A dataset of 25 random values is rendered as a static bar chart, with each value encoded as the height of a teal bar. The code generates the random numbers between 0 and 30 in a loop, then uses D3's `selectAll`, `data`, and `enter` selection pattern to create `div.bar` elements. The chart is built using D3 v4.5.0, and the bar heights are set directly via inline styles based on each data point.

Ssalim.mir@outlook.com

84% match

Loading thumbnail…

Fork of Pseudo Bar Chart 2

This fork of D3’s Pseudo Bar Chart 2 uses raw SVG elements to draw five horizontal black bars on a white background, each with differing widths and labeled with letters. The chart encodes categorical values through bar length, though no underlying data or axes are present. The code constructs the visualization directly with `<rect>` and `<text>` tags inside an SVG container, without using any D3 scales, layouts, or data-binding methods. The rendering is purely static, with bar widths hardcoded in the SVG coordinates.

WWannabeProgrammerr

84% match

Loading thumbnail…

Fork of D3 Starter

A dynamic bar chart animates ten rectangles across the screen using D3 v7. The bars scale in height and width based on their index, with positions computed from the data values. The code selects the body, appends an SVG sized to the window, and uses `d3.range` to generate the dataset. Each rectangle’s position and size are set with attribute functions, creating a diagonal, staggered layout with light-blue fills.

Fferneyhoughedward@gmail.com

83% match