Skip to main content
SimilarExport ZIP
100%

scaleBand() in action

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 27, 2023
Created on Dec 27, 2023

This example demonstrates a horizontal bar chart where each bar’s vertical position and height are determined by `d3.scaleBand`. Five data items, each with a day label and a numeric value, are mapped to a band scale with a range of 0 to 200 pixels and inner padding. The SVG renders orange rectangles whose `y` attribute comes from the scale, `height` equals the band’s `bandwidth()`, and `width` reflects the data value. The code uses D3 v7’s selection `.join()` to bind data to `rect` elements.

AI-generated description

D3 Scales - scaleTime()

MIT Licensed

Similar vizzes

Loading thumbnail…

3. scaleBand barChart

This example shows a bar chart of letter frequencies in the English language, with each letter labeled on the x-axis and its proportional value on the y-axis. Using D3 v4, the chart employs `d3.scaleBand` for the ordinal x-axis, which maps categories to pixel positions with configurable padding, and `d3.scaleLinear` for the numeric y-axis. Data is loaded from a TSV file containing name-value pairs, and rendered as SVG rectangles with `text` labels showing the numeric value above each bar. The chart is styled with a steelblue fill and cyan text.

深深度碎片
78% match
Loading thumbnail…

D3: Basic Barchart

This example shows a basic bar chart of 20 numeric values rendered as SVG rectangles, with each bar labeled by its value in white text. The chart uses D3 v5 scales, including a `scaleBand` for the x-axis positioning and a `scaleLinear` for the y-axis height calculation. Data is bound via `selectAll("rect").data()`, with bars and text labels positioned using the scales. The code loads D3 from UNPKG and demonstrates simple SVG generation without axes or interactivity.

AAnissa Belkelfa
77% match
Loading thumbnail…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher
77% match
Loading thumbnail…

Untitled

This example demonstrates how to create a D3 band scale with a specified domain and range, then output its computed bandwidth value to the console using `d3.scaleBand()` and the `bandwidth()` method. It shows how the scale’s range width is divided evenly across five discrete domain values, resulting in a bandwidth of 2. The page is minimal, consisting only of an HTML file that loads D3 v4 from a CDN and runs the scale logic inline in a script tag. A separate JavaScript file also shows importing `select` from D3 v6 to add text to the page body.

Mmoyaroy
76% match
Loading thumbnail…

D3 scales() scaleQuantize() in action

This example demonstrates how `d3.scaleQuantize()` maps a continuous numeric input domain to discrete output ranges, using it to assign fill colors to a series of rectangles. The visualization renders 100 SVG rectangles, positioned with a `d3.scaleLinear()` scale and colored with a quantize scale that divides the domain [0, 100] into four color bands: lightblue, orange, lightgreen, and pink. The code uses D3 v7’s `join()` method to bind data from `d3.range()` and style each rectangle’s fill based on its value.

SSubhendu Karmakar
76% 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
76% match
Loading thumbnail…

vs1

This example shows a simple vertical bar chart of three labeled values using D3 v4. The code creates an SVG with scales for the x and y axes, then draws steelblue rectangles for each data point. It uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numeric axis, with `d3.axisBottom` and `d3.axisLeft` to render the tick marks. The chart is embedded in a React project but works as a standalone HTML page with static data.

Yyesyesnono01@yahoo.com
76% match
Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar
76% match