Bar ChartBar Chart, HorizontalHierarchical Bar ChartBar Chart TransitionsZoomable Bar ChartBar Chart RaceD3: HistogramStacked Bar ChartDiverging stacked bar chartBar Chart, DivergingStacked Bar Chart, NormalizedGrouped bar chartStacked-to-Grouped BarsMarimekkoRevenue by Music Format, 1973–2018World History Timeline
Stacked Bar Chart, Horizontal
chart = {
// Specify the chart’s dimensions (except for the height).
const width = 928;
const marginTop = 30;
const marginRight = 10;
const marginBottom = 0;
const marginLeft = 30;
/**
*
* 对数据进行转换
*
*/
// Determine the series that need to be stacked.
const series = d3.stack()
.keys(d3.union(data.map(d => d.age))) // distinct series keys, in input order
.value(([, D], key) => D.get(key).population) // get value for each series key and stack
(d3.index(data, d => d.state, d => d.age)); // group by stack then series key
// 💡 在垂直堆叠条形图中，条带是横向分布的，所以每个条带的宽度与页面宽度相关
// 这是由于在桌面端的浏览器中水平滚动的操作比较麻烦 ❓ 所以一般 svg 的横向宽度一般不会超过页面的宽度，避免产生横向滚动
// 所以条带横向分布时，每个条带的宽度就是由页面的宽度所决定（通过横坐标轴的比例尺算出条带的带宽）
// 而在桌面端的浏览器中垂直滚动很方便，所以这里可以手动设置条带的宽度，再计算出 svg 的高度，比页面/屏幕的高度更大也无所谓
// 由于不需要将图表的高度限制在一页中，所以基于条形图中条带的数量，通过计算来求出 svg 的高度
// 这里 series[0].length 所获得的是条带的数量（对应于 52 个州），每个条带的宽度（包含间隔）是 25px
// 再加上 marginTop 和 marginBottom 上下的留白，总长作为 svg 的高度
const height = series[0].length * 25 + marginTop + marginBottom;
// console.log(height)
/**
*
* 构建比例尺
*
*/
// 💡 设置横坐标轴的比例尺，与**垂直堆叠条形图**的纵坐标轴相对应
// 横坐标轴的数据是连续型的数值（各州的人口数量），使用 d3.scaleLinear 构建一个线性比例尺
const x = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.range([marginLeft, width - marginRight]); // 这里的 width 宽度是页面宽度
// 💡 设置纵坐标轴的比例尺，与**垂直堆叠条形图**的横坐标轴相对应
// 纵坐标轴的数据是条形图的各种分类，使用 d3.scaleBand 构建一个带状比例尺
const y = d3.scaleBand()
.domain(d3.groupSort(data, D => -d3.sum(D, d => d.population), d => d.state))
.range([marginTop, height - marginBottom]) // 这里的 height 高度是前面根据条形图的条带宽度和数量计算出来的
.padding(0.08); // 并设置间隔占据（柱子）区间的比例
const color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
.range(d3.schemeSpectral[series.length])
.unknown("#ccc");
// A function to format the value in the tooltip.
const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width) // 这里的 width 宽度是页面宽度，
.attr("height", height) // 💡 但这里的 height 高度是前面根据条形图的条带宽度和数量计算出来的
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Append a group for each series, and a rect for each element in the series.
svg.append("g")
.selectAll()
.data(series)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(D => D.map(d => (d.key = D.key, d)))
.join("rect")
// 为每个小矩形分别设置左上角 (x, y) 及其 width 和 height 来确定其定位和形状
// 💡 每个矩形的左上角横轴定位 x 由它的堆叠下边界决定
// 可以通过它所绑定的数据（一个数组）的第一个元素 d[0] 来获取
// 使用横坐标轴的比例尺（线性比例尺）进行映射，求出具体的横轴坐标值
.attr("x", d => x(d[0]))
// 💡 每个矩形的左上角纵轴定位 y 由它所属的州的名称决定
// 可以通过所绑定数据的属性 d.data[0] 来获取
// 使用横纵坐标轴的比例尺（带状比例尺）进行映射，求出具体的纵轴坐标值
.attr("y", d => y(d.data[0]))
// 每个矩形的宽度
// ⚠️ 需要通过纵坐标轴比例尺的方法 y.bandwidth() 获取 band 的宽度
// 而不是前面设置的 25px，因为该值是包含条带之间的间隙的
.attr("height", y.bandwidth())
// 💡 每个矩形的宽度
// 由所绑定的数据（一个数组）的两个元素（上边界和下边界）之间的差值所决定
.attr("width", d => x(d[1]) - x(d[0]))
.append("title")
.text(d => `${d.data[0]} ${d.key}\n${formatValue(d.data[1].get(d.key).population)}`);
/**
*
* 绘制坐标轴
*
*/
// 绘制横坐标轴
svg.append("g")
// 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到顶部
.attr("transform", `translate(0,${marginTop})`)
// 💡 横轴是一个刻度值朝上的坐标轴
// 并使用坐标轴对象的方法 axis.ticks() 设置坐标轴的刻度数量和刻度值格式
// 其中第一个参数用于设置刻度数量（这里设置的是预期值，并不是最终值，D3 会基于出入的数量进行调整，以便刻度更可视）
// 这里设置为 (width / 100) 基于页面的宽度来设置横坐标轴的预期刻度数量
// 而第二个参数用于设置刻度值格式，这里设置为 "s" 表示数值采用 SI-prefix 国际单位制词头，例如 k 表示千，M 表示百万
// 具体参考 https://en.wikipedia.org/wiki/Metric_prefix
.call(d3.axisTop(x).ticks(width / 100, "s"))
.call(g => g.selectAll(".domain").remove());
// 绘制纵坐标轴
svg.append("g")
// 通过设置 CSS 的 transform 属性将纵坐标轴容器「移动」到左侧
.attr("transform", `translate(${marginLeft},0)`)
// 💡 纵轴是一个刻度值朝左的坐标轴
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove());
// Return the chart with the color scale as a property (for the legend).
return Object.assign(svg.node(), {scales: {color}});
}
// 📝 该 cell 只是用于演示效果
series = d3.stack()
.keys(d3.union(data.map(d => d.age))) // distinct series keys, in input order
.value(([, D], key) => D.get(key).population) // get value for each series key and stack
(d3.index(data, d => d.state, d => d.age)); // group by stack then series key
data = {
const data = await FileAttachment("us-population-state-age.csv").csv({typed: true});
return data.columns.slice(1).flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]})));
}
import {legend} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
