chart = {
// 设置一些关于尺寸的参数
// 💡 width 是页面的宽度，它由 Observable 标准库中提供，可响应性随页面变化
// 具体可参考 Observable 的官方文档 https://observablehq.com/documentation/misc/standard-library#width
const height = Math.min(width, 500); // svg 元素的高，从 width 和 500px 之间取最小值
// 该变量用于计算环形内外半径
// 取宽度和高度两者之中较小值的一半
const radius = Math.min(width, height) / 2;
/**
*
* 构建比例尺
*
*/
// 设置颜色比例尺
// 为不同环状扇形设置不同的配色
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());
/**
*
* 创建 svg 容器
*
*/
// 返回的是一个包含 svg 元素的选择集
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto;");
/**
*
* 对数据进行转换
*
*/
// Create the pie layout and arc generator.
// 使用 d3.pie() 创建一个 pie 饼图角度生成器
const pie = d3.pie()
// 💡 设置相邻环状扇形之间的间隔角，最终效果会在每个环状扇形之间有留白间隙（便于区分）
.padAngle(1 / radius)
.sort(null)
.value(d => d.value);
/**
*
* 绘制环形图内的环状扇形形状
*
*/
// 使用 d3.arc() 创建一个 arc 扇形生成器
const arc = d3.arc()
// 💡 设置内半径，由于这里所传递的参数不为 0，所以生成环状扇形（如果参数为 0 则生成完整扇形）
.innerRadius(radius * 0.67)
// 设置外半径
.outerRadius(radius - 1);
// 💡 环形的宽度就是内外半径之差 (radius - 1) - (radius * 0.67) = 0.33 * radius - 1
// 将每个环状扇形的面积形状绘制到页面上
svg.append("g")
.selectAll()
.data(pie(data))
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
/**
*
* 添加标注信息
*
*/
// 为各扇形添加文本标注信息
svg.append("g")
.attr("font-family", "sans-serif") // 设置字体家族
.attr("font-size", 12) // 设置字体大小
.attr("text-anchor", "middle") // 设置文本对齐方式，居中对齐
.selectAll()
.data(pie(data))
.join("text")
// 通过设置 CSS 的 transform 属性将文本元素「移动」到相应的环状扇形的中点，该位置使用方法 arc.centroid(d) 计算而得
// ⚠️ 环状扇形的中点不一定在面积里，可能是在内部空白区域，如果要确保文本标注信息定位到环形上，需要根据具体情况而调整尺寸
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString("en-US")));
return svg.node();
}
// 读取 csv 文件
data = FileAttachment("population-by-age.csv").csv({typed: true})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.