Fork of D3 Bar Chart Scales

100%

Fork of D3 Bar Chart Scales

✓ Published0🌍 Public

Last edited Feb 27, 2026

Created on Feb 27, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

52. D3 Bar Chart Scales

This example demonstrates a flexible, scalable bar chart built with D3.js (v4.5.0), using ordinal and linear scales to map a static dataset of 20 values to SVG rectangles. The chart uses `d3.scaleBand` for the x-axis positioning with padding and `d3.scaleLinear` for y-axis height, rendering bars and white value labels. The bars’ fill colors are dynamically computed from their values, creating a gradient from dark to light blue. The visualization appears static with no animation or interactions.

Aamakanju@nyit.edu

87% match

Loading thumbnail…

Fork of D3 Bar Chart

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.

TTony Mai

86% 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 HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Bbrunotrindademachado

83% match

Loading thumbnail…

Fork of a complete barchart with animation

This example animates a bar chart’s construction from zero-height rectangles to full values, with each bar expanding sequentially and its value label positioning itself above the bar. The chart uses a linear y-scale and band x-scale over a fixed array of nine numbers, rendering via SVG. D3 v5 transitions (`d3.transition`) with staggered delays drive the growth and label movement. Bars respond to mouseover, mouseout, click, and double-click events by changing fill color over 1.5-second transitions or instantly. The code builds the chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, all within a React-compatible HTML page.

GGiosec

82% match

Loading thumbnail…

Fork of Bar Chart

This example presents a bar chart of global sales data across historical periods, rendered as an SVG with D3 version 6. It shows a default view of steel-blue bars, which transition to orange on mouse hover via D3's selection and transition APIs. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and mapped to rectangles with explicit width and height attributes.

GGuilinabaoge

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

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

82% match