2b:null 2c:["$","title",null,{"children":"Zoomable Sunburst Instance | SM6351 | Observable"}] 31:T3628,chart = { // Defining your graphs, including the size, the structure and any other details. // Specify the chart’s dimensions. const width = 928; // empirical convention; theoretically you can choose any number/size you want, but remember to adjust before presenting. const height = width; // eaaier to draw a circle inside a square. const hierarchyRadius = width / 6; // should actually be `(width / 2) / depth`, `width / 2` means the maximum radius of the circle, while `/ depth` is to tell how many layers will be on a radius sharing the same thickness. // Create the color scale. const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)); // basically a colour mapping tool for categories; maps colours to your dataset categories in a consistent way. // quantize = cut the continuous rainbow into n evenly spaced slices. // d3.interpolateViridis → perceptually uniform Viridis scale; d3.interpolateCool, d3.interpolateWarm → cool–warm gradients; d3.interpolateBlues, d3.interpolateReds, etc. → single-hue ramps. https://d3js.org/d3-scale-chromatic //+1 ensures you have one extra colour just in case. // Compute the layout. const hierarchy = d3.hierarchy(data) // retrieve the hierarchical structure. .sum(d => d.value) // aggregate each node's value upward, so parents know the total of their children .sort((a, b) => b.value - a.value); // numeric comparison to order siblings by size. **Be aware of the key names in your dataset!** const root = d3.partition() // a partition layout generator, generate polar coodrinates. .size([2 * Math.PI, hierarchy.height + 1]) // size([x, y]) ≠ cartsdian coordinate system; x = the angular span of the data, y = the depth of hierarchy, to tell d3 to calculate the coordinates in this given range; adding +1 means we leave one extra empty layer at the outer edge as a buffer, so the last ring has enough space and won’t look cramped. (hierarchy); // apply to hierarchy, so every data in it gets own (x0, x1, y0, y1). root.each(d => d.current = d); // to store the information of current state of each node as a temporary reference, to help us animate zooms & transitions smoothly. Current – target –current. // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) // calculate the space of padding – different small arcs .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) // padding between arc slices; a numeric comparison and choose the smaller one, to avoid the gap getting too large .padRadius(hierarchyRadius * 1.5) // gap = padAngle \times padRadius; longer radius, wider arc for the same angle. Forcibly to set the reference radius as hR * 1.5 for every hierarchy, e.g. the outermost arc, 3 vs. 1.5 / have to calculate in 1.5 .innerRadius(d => d.y0 * hierarchyRadius) // to calcultate the distance from the circle centre to the y0 (the inner arc of the hierarchy). .outerRadius(d => Math.max(d.y0 * hierarchyRadius, d.y1 * hierarchyRadius - 1)) // normally latter one to leave radial gaps between layers. But if that value ever becomes smaller than y0 × radius, we fall back to y0 × radius to prevent the slice from collapsing. // Tell your pain how to draw. // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) // The first two numbers shift the origin of the viewport (min-x, min-y), while the last two define how wide and how tall the visible area is. In this case, we use [width, width] to ensure a square view for our circular chart. (In computer graphics conventions, the Cartesian plane is usually defined with the y-axis pointing downwards.) .style("font", "10px sans-serif"); // Append the arcs. const path = svg.append("g") // tag is an element specific to SVG; create a group to hold the path elements (information) for convenient arrangement. .selectAll("path") .data(root.descendants().slice(1)) // .descendants() flattens the hierarchical tree into an array storing the same value but easy to loop, which could be efficient for 'path' to read and draw; skip the root node (index [0]), because we don't want to draw it (≠ slice the root info from the array, just SKIP). .join("path") // bind each node data to each path .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) // it’s not a modification but a function for temporary reference; dataset's name vs. the data attribute created on each node by d3.hierarchy() – clear readibility .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) // ternary operator: condition ? valueIfTrue : valueIfFalse .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") // with it, only the visible parts are interactive, or invisible arcs might still respond to clicks; not strickly necessary, but prevent from mis-clicks. .attr("d", d => arc(d.current)); // the first 'd' is the attribute of tag, which stores the drawing instructions; arc(d.current) calculates the path string from the node’s coordinates, and then this string is stored in the SVG path’s d attribute, so the slice can be drawn. // Modification & Optimisation // Make them clickable if they have children. path.filter(d => d.children) // filter only the nodes with children .style("cursor", "pointer") // change the cursor to a pointer for better user experience (notification). .on("click", clicked); //bind a click event. In this situation, D3 will call 'clicked()' as a handler through '.on()', and the parametres of a handler will be '(event, d (data node), i (index), nodes (DOM node))' in sequence. // create a hovering tag const format = d3.format(",d"); // d → decimal integer; .nf → fixed-point decimal; .2% → percentage with two decimal places; keep two decimal places. path.append("title") //is automatically rendered by the browser as a tooltip when you hover over the slice (notification as well). .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); // `${interpolation} syntax` – template literals (f string), their values are presented as part of the string. // ancestors() will return an array from self to all ancestors – map all the elements’ data.name into a new array – filps the order so we can display the path from the root to the leaf – concatenate all the elements in the array with ' / '. // arrange the text on the arc const label = svg.append("g") .attr("pointer-events", "none") // not respond to any pointer event – click through the label. .attr("text-anchor", "middle") .style("user-select", "none") // to prevent accidental text selection, for visual consistency. .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") // vertical shift along the y-axis； typography unit; horizontal & vertical baseline – mathematical vs. visual centre .attr("fill-opacity", d => +labelVisible(d.current)) // labelVisible() will return boolean value, '+' ia a unary plus operator, forcibly turn boolean value into number – true to 1 & false to 0; [0, 1] = [transparent, fully visable]. .attr("transform", d => labelTransform(d.current)) // Transform the labels based on the arc’s angle and position, so they follow the slices correctly. .text(d => d.data.name); // create a 'back' button to go up one level const parent = svg.append("circle") //not intuitive naming rules (・̮︢⍸・̮︢) .datum(root) // we want one root in the same place as the only entrance as the button. .attr("r", hierarchyRadius) .attr("fill", "none") .attr("pointer-events", "all") // reveive all pointer events, for normally in SVG, an element with fill = 'none' wont catch mouse clicks, the pointer just pass through; by setting 'all', it tells SVG to respond to pointer events no matter whether the element is filled or not. //https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events .on("click", clicked); // Handle zoom on click. function clicked(event, p) { // not intuitive naming rules (・̮︢⍸・̮︢) – p stands for the data node currently being clicked. parent.datum(p.parent || root); // (not intuitive naming rules (・̮︢⍸・̮︢)) '||' = 'or'; '.datum()' binds a single piece of data to a single DOM element – binds either the parent's info of this node or root's info to the back button. root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, //calculate each element’s angular ratio relative to the clicked parent node y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) // re-base the depth so that the clicked node becomes the new root (depth 0), and all its descendants are shifted up accordingly. }); const t = svg.transition().duration(event.altKey ? 7500 : 750); path.transition(t) // apply the animated transition to all arcs. .tween("data", d => { const i = d3.interpolate(d.current, d.target); // creates an interpolator function i. return t => d.current = i(t); // not intuitive naming rules (・̮︢⍸・̮︢) – t here is different from the previous 'const t', it is the progress value (from 0 to 1) that D3 automatically passes in during the animation. At each update, i(t) calculates the intermediate state of d.current. // i(0) = start value (d.current), i(1) = end value (d.target), i(t) = a smooth value between start and end. The range of [0, 1] in i() is actually a status incicator, or 0%-100%. }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); // unary plus operator }) // in js, falsy value includes: 0; '' (empty string), null, undefined, NaN, false, otherwise it is a true value; this line of code is filtering, it only keeps arcs that are currently visible, or arcs that still have some leftover opacity – ensures that during the animation, elements don’t suddenly disappear but instead fade in and out smoothly. // in d3, numbers and colours animate automatically, but complex shapes need interpolate to show D3 how to morph them step by step. // if the property is just a number or color (like opacity or fill), D3 can handle the animation by itself. Example: going from opacity = 0 to opacity = 0.6, D3 automatically fills the in-between values like 0.2, 0.4…. // but if the property is a complex object or string (like the path for arcs), D3 doesn’t know how to guess the middle steps. That’s why we need to use d3.interpolate. It works like a translator: it tells D3 how to go smoothly from the start shape to the end shape. .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) // ternary operator // whether the targeted arc is visable – whether the 'd' node has the 'children' attribute? .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); // `.tween('frameInterpolation', d...)` just keeps update the data where the d.current is gradually pushed to the d.target; and `.attrTween('d', ...)` here is specific for SVG's tag, which draws the changing path of the d.current (turning the data into a visable arc) – one is for updating the data, and the other is for drawing it on the screen. // it works like a placeholder function. Every time the animation updates, it fetches the latest d.current value and passes it to arc to redraw the path. // JavaScript will not automatically listen to data changes. It only executes when we explicitly call a function. So the change of d.current will not trigger continuous calculation of d. That’s why we need an extra intermediate function (a placeholder). Its role is to pass the value of d.current inside and at the same time trigger d to calculate. // When d.current keeps changing, new values will keep being passed to the placeholder, which then keeps triggering d to calculate with the new values. // In the earlier d, it looked like a loop because those d were handling static data of nodes, and the calculation times were based on the number of nodes — how many nodes, how many times. But here there is only one node (d.current). So without the intermediate function, it would only run once and then stop. label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } // only when all three conditions are true, the arc/label becomes visible. function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * hierarchyRadius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; // each elemen's default position is at the origin (0, 0) // shift the x axis from SVG's 0 degree (starts from the right) to sunburst's 0 degree (starts from the top) // push the label outward along the direction of its arc angle, by a distance of y units. } return svg.node(); } 32:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1760169780658.571,"size":11634}] 2f:{"id":"d260a212049d8ed2","slug":null,"title":"Zoomable Sunburst Instance","thumbnail":"28295520b127d43c9adff3e4ef43be57974999d7cca22973f8bad1840db94850","access_level":"public","create_time":"$D2025-10-11T08:03:00.658Z","update_time":"$D2025-10-14T12:20:52.031Z","view_time":null,"first_public_time":"$D2025-10-11T08:03:00.658Z","fork":{"id":"86ddbc29bd33f9d6","slug":"zoomable-sunburst","title":"Zoomable sunburst","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8feeef125b8270cd","login":"lundychannn","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/4bca69939343cb8b8f3b804597a1fedc109ef9a8eb103e3bf1d9f3eb314d7488","tier":"starter_2024"},"version":432,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ba333018c55080a","login":"lundy","name":"Lundy CHAN","avatar_url":"https://avatars-next.observableusercontent.com/d6ef92bdd6d68a40da87a8b037350d427caa7c18fef3698e5a9ac70f77b211a7","tier":null}],"members":[{"type":"individual","id":"3ba333018c55080a","login":"lundy","name":"Lundy CHAN","avatar_url":"https://avatars-next.observableusercontent.com/d6ef92bdd6d68a40da87a8b037350d427caa7c18fef3698e5a9ac70f77b211a7","tier":null,"role":"editor"},{"type":"team","id":"8feeef125b8270cd","login":"lundychannn","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/4bca69939343cb8b8f3b804597a1fedc109ef9a8eb103e3bf1d9f3eb314d7488","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Zoomable Sunburst Instance","cells":[{"id":0,"value":"

Zoomable Sunburst Instance

D3 › Gallery

\n\n# Zoomable Sunburst Instance\n\nThis variant of a [sunburst diagram](/@d3/sunburst/2) shows only two layers of the hierarchy at a time. Click a node to zoom in, or the center to zoom out. Compare to an [icicle](/@d3/zoomable-icicle).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"flare-2.json\").json() //not intuitive naming rules (・̮︢⍸・̮︢)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"