Public
Edited
Sep 16, 2023
data = FileAttachment("flare.json").json()
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 928;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
return svg.node();
}
import { formatDecimal } from "@chiahsun-ws/d3-functions"
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`); // Move to the center of the circle
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
// .size([2 * Math.PI, radius])
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.text(d => `${formatDecimal(d.x)} ${d.y}`);
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`);
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.attr("transform", d => `rotate(${d.x >= 180 ? 180 : 0})`) // Flip the text
.text(d => d.data.name);
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`);
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.attr("transform", d => `rotate(${d.x >= 180 ? 180 : 0})`) // (*)
// For texts in the circle, we need to put it respect to circle center, for text outside circle, we simply put it outside
// .attr("text-anchor", d => !d.children ? "start" : "end")
// Since we rotate text in *, we need to consider the condition as well
.attr("text-anchor", d => !d.children == d.x < 180 ? "start" : "end")
.text(d => d.data.name);
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`);
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.attr("transform", d => `rotate(${d.x >= 180 ? 180 : 0})`)
.attr("dy", "0.31em")
.attr("x", d => d.x < 180 === !d.children ? 6 : -6)
.attr("text-anchor", d => !d.children == d.x < 180 ? "start" : "end")
.text(d => d.data.name);
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`);
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.attr("transform", d => `rotate(${d.x >= 180 ? 180 : 0})`)
.attr("dy", "0.31em")
.attr("x", d => d.x < 180 === !d.children ? 6 : -6)
.attr("text-anchor", d => !d.children == d.x < 180 ? "start" : "end")
.text(d => d.data.name);
chart.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial().angle(d => d.x * 2 * Math.PI / 360 ).radius(d => d.y));
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 1200;
const height = width;
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const cx = width * 0.5, cy = height * 0.5;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left + cx}, ${margin.top + cy})`);
const radius = Math.min(width, height) / 2 - 80;
const tree = d3.cluster()
.size([360, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
// Move links before text group
chart.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial().angle(d => d.x * 2 * Math.PI / 360 ).radius(d => d.y));
const node = chart.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x - 90}) translate(${d.y}, 0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
// Use stroke of SVG to overwrite links to make labels visible
node.append("text")
// Add line join and width
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("fill", "currentColor")
.attr("transform", d => `rotate(${d.x >= 180 ? 180 : 0})`)
.attr("dy", "0.31em")
.attr("x", d => d.x < 180 === !d.children ? 6 : -6)
.attr("text-anchor", d => !d.children == d.x < 180 ? "start" : "end")
.text(d => d.data.name);
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.
