Public
Edited
Apr 29, 2024
chart = {
const width = 500;
const height = 200;
const data = [
{ side: "Left", count: 20 },
{ side: "Right", count: 30 }
];
const svg = d3.select(DOM.svg(width, height));
const circleScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)])
.range([10, 50]); // Adjust the range to fit your visualization
// Add background circle
svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 60) // Adjust the radius as needed
.attr("fill", "lightgray");
// Add circles for Left and Right sides
svg.selectAll("circle.data-circle")
.data(data)
.enter().append("circle")
.attr("cx", (d, i) => (i + 1) * (width / 3)) // Adjust the positions of the circles
.attr("cy", height / 2)
.attr("r", d => circleScale(d.count))
.attr("fill", d => d.side === "Left" ? "blue" : "red"); // Adjust colors as needed
svg.selectAll("text")
.data(data)
.enter().append("text")
.attr("x", (d, i) => (i + 1) * (width / 3))
.attr("y", height / 2 + 3)
.text(d => d.count)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "white"); // Adjust text color as needed
return svg.node();
}
chartzy = {
const width = 500;
const height = 200;
const data = [
{ side: "Left", count: 20 },
{ side: "Right", count: 30 }
];
const svg = d3.select(DOM.svg(width, height));
const circleScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)])
.range([10, 35]); // Adjust the range to fit your visualization, smaller range for side circles
// Add background circle
svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 100) // Adjust the radius as needed, larger radius for background circle
.attr("fill", "#31b9c1"); // Set color to #31b9c1
// Add circles for Left and Right sides
svg.selectAll("circle.data-circle")
.data(data)
.enter().append("circle")
.attr("cx", (d, i) => (i + 1) * (width / 3)) // Adjust the positions of the circles
.attr("cy", height / 2 + 40) // Move down by 20 units
.attr("r", d => circleScale(d.count))
.attr("fill", "#31b9c1"); // Set color to #31b9c1
svg.selectAll("text")
.data(data)
.enter().append("text")
.attr("x", (d, i) => (i + 1) * (width / 3))
.attr("y", height / 2 + 43) // Move down by 23 units for better text alignment
.text(d => d.count)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "white"); // Adjust text color as needed
return svg.node();
}
xiaorenUrl = "blob:https://dtu.static.observableusercontent.com/bb490b4f-0fc1-4d97-8ce0-5b41e968b56c";
high = FileAttachment("high.png").url();
highUrl ="blob:https://dtu.static.observableusercontent.com/f8bb808d-607e-496e-9557-ca385a084c78"
chartzz = {
const width = 500;
const height = 200;
const data = [
{ side: "left", count: 20 },
{ side: "right", count: 30 }
];
const svg = d3.select(DOM.svg(width, height));
const circleScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)])
.range([2, 18]); // 调整范围以适应您的可视化效果，较小的范围用于较小的圆
// 添加背景图像
svg.append("image")
.attr("href", highUrl) // 更改 URL 以匹配您想要的背景图像
.attr("x", -120) // 将背景图像进一步移动到左侧
.attr("y", -0) // 将背景图像进一步向上移动
.attr("width", width - 20) // 放大背景图像
.attr("height", height - 20); // 放大背景图像
// 添加左右两侧的圆形
svg.selectAll("circle.data-circle")
.data(data)
.enter().append("circle")
.attr("cx", (d, i) => (i + 1) * (width / 6) +7) // 调整圆之间的水平距离
.attr("cy", height / 1.55) // 保持 y 坐标不变
.attr("r", d => circleScale(d.count))
.attr("fill", "#ffccd6"); // 将颜色设置为 #31b9c1
// 添加文本标签
svg.selectAll("text")
.data(data)
.enter().append("text")
.attr("x", (d, i) => (i + 1) * (width / 6) + 7) // 调整文本标签之间的水平距离以匹配圆
.attr("y", height / 1.55 + 4) // 向下移动 3 个单位以获得更好的文本对齐
.text(d => d.side === "left" ? "L" : "R") // 根据圆的 side 属性设置文本内容为 L 或者 R
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "#ce0000") // 设置文本颜色为 #ce0000
.attr("font-weight", "bold") // 设置文本加粗
.attr("font-family", "Arial");
return svg.node();
}
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.
