25:["$","title",null,{"children":"Sunburst | Samiha | Observable"}] 49:T79e,chart = { // Specify the chart’s colors and approximate radius (it will be adjusted at the end). const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 2)); const radius = 928 / 2; // Prepare the layout. const partition = data => d3.partition() .size([2 * Math.PI, radius]) (d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)); const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius / 2) .innerRadius(d => d.y0) .outerRadius(d => d.y1 - 1); const root = partition(data); // Create the SVG container. const svg = d3.create("svg"); // Add an arc for each element, with a title for tooltips. const format = d3.format(",d"); svg.append("g") .attr("fill-opacity", 0.6) .selectAll("path") .data(root.descendants().filter(d => d.depth)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("d", arc) .append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); // Add a label for each element. svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll("text") .data(root.descendants().filter(d => d.depth && (d.y0 + d.y1) / 2 * (d.x1 - d.x0) > 10)) .join("text") .attr("transform", function(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; }) .attr("dy", "0.35em") .text(d => d.data.name); // The autoBox function adjusts the SVG’s viewBox to the dimensions of its contents. return svg.attr("viewBox", autoBox).node(); }4a:T79f,chart1 = { // Specify the chart’s colors and approximate radius (it will be adjusted at the end). const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 2)); const radius = 928 / 2; // Prepare the layout. const partition = data => d3.partition() .size([2 * Math.PI, radius]) (d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)); const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius / 2) .innerRadius(d => d.y0) .outerRadius(d => d.y1 - 1); const root = partition(data); // Create the SVG container. const svg = d3.create("svg"); // Add an arc for each element, with a title for tooltips. const format = d3.format(",d"); svg.append("g") .attr("fill-opacity", 0.6) .selectAll("path") .data(root.descendants().filter(d => d.depth)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("d", arc) .append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); // Add a label for each element. svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll("text") .data(root.descendants().filter(d => d.depth && (d.y0 + d.y1) / 2 * (d.x1 - d.x0) > 10)) .join("text") .attr("transform", function(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; }) .attr("dy", "0.35em") .text(d => d.data.name); // The autoBox function adjusts the SVG’s viewBox to the dimensions of its contents. return svg.attr("viewBox", autoBox).node(); }4b:[{"id":"be108a709f2305c698114d53a604e1c8438e222aecefa26a5236223f4ae00430428030e3c6c256ec9c29ae787e0c344a91a67e983cb2429450111d93bef4b66c","href":"https://static.observableusercontent.com/files/be108a709f2305c698114d53a604e1c8438e222aecefa26a5236223f4ae00430428030e3c6c256ec9c29ae787e0c344a91a67e983cb2429450111d93bef4b66c","name":"data2.json","type":"application/json","lastModified":1739365255552.447,"size":3981}] 29:{"id":"5da2c96dd71cf198","slug":null,"title":"Sunburst","thumbnail":"7658414dbab3d1f075b73eb16479f3b829f5e3e574150e1db5ce6061215626cf","access_level":"public","create_time":"$D2025-02-12T13:00:46.015Z","update_time":"$D2025-02-12T13:16:22.016Z","view_time":null,"first_public_time":"$D2025-02-19T13:12:42.384Z","has_unpublished_edits":null,"fork":{"id":"3f28b7b1d9e9bc0d","slug":"sunburst/2","title":"Sunburst","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"53ebf3d88fe2346b","login":"samfad91","name":"Samiha","avatar_url":"https://avatars-next.observableusercontent.com/6f5bfcfcdb5e2bfc2d7aa87f345fc3e949b98b6a5bcac9cd9adfc697fc79802d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":271,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e7b8ad404a53b0e","login":"samfad91","name":"Samiha","avatar_url":"https://avatars-next.observableusercontent.com/6f5bfcfcdb5e2bfc2d7aa87f345fc3e949b98b6a5bcac9cd9adfc697fc79802d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1e7b8ad404a53b0e","login":"samfad91","name":"Samiha","avatar_url":"https://avatars-next.observableusercontent.com/6f5bfcfcdb5e2bfc2d7aa87f345fc3e949b98b6a5bcac9cd9adfc697fc79802d","tier":null,"role":"editor"},{"type":"team","id":"53ebf3d88fe2346b","login":"samfad91","name":"Samiha","avatar_url":"https://avatars-next.observableusercontent.com/6f5bfcfcdb5e2bfc2d7aa87f345fc3e949b98b6a5bcac9cd9adfc697fc79802d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sunburst","cells":[{"id":0,"value":"

Sunburst

D3 › Gallery

\n\n# Sunburst\n\nThis radial space-filling visualization created by [John Stasko](https://www.cc.gatech.edu/gvu/ii/sunburst/) shows the cumulative values of subtrees. It is commonly used to visualize software packages (the size of source code within nested packages) and file systems (the size of files within nested folders). See also the [zoomable version](/@d3/zoomable-sunburst) and the [icicle diagram](/@d3/icicle/2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"data2.json\").json()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null