25:["$","title",null,{"children":"Icicle | gggtang's Workspace | Observable"}] 49:T875,chart = { // Specify the chart’s dimensions. const width = 800; // Swap width and height const height = 400; // Swap width and height const format = d3.format(".2f"); // Create a color scale (a color for each child of the root node and their descendants). // const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)) // Create a partition layout. const partition = d3.partition() .size([width, height]) // Swap width and height .padding(2); // Apply the partition layout. const root = partition(d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.height - a.height || b.value - a.value)); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "height: auto; font: 13px Segoe UI"); // Add a cell for each node of the hierarchy. const cell = svg .selectAll() .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); // Swap x and y cell.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); cell.append("rect") .attr("width", d => d.x1 - d.x0) // Swap x1 and x0 .attr("height", d => d.y1 - d.y0) // Swap y1 and y0 .attr("fill-opacity", 1) .attr("fill", d => { return (d.data.color); }) .attr("id","text-container"); // const text = cell.filter(d => (d.x1 - d.x0) > 16).append("text") // .attr("x", 4) // .attr("y", 13); // text.append("tspan") // .text(d => d.data.name); // text.append("tspan") // .attr("fill-opacity", 0.7) // .text(d => ` ${format(d.value)}`); // d3plus.textWrap() // .container(d3.select("#text-container")); const foreign = cell.append("foreignObject") .attr("width", d => d.x1 - d.x0 ) .attr("height", d => d.y1 - d.y0) .attr("x", 0) .attr("y", 0); foreign.append("xhtml:p") .html(d => `${d.data.name}\n${format(d.value)}%`) .style("padding", "5px"); return svg.node(); }4a:Tc8c,function Icicle_chart() { // Specify the chart’s dimensions. const width = 800; // Swap width and height const height = 400; // Swap width and height const format = d3.format(".2f"); // Create a color scale (a color for each child of the root node and their descendants). // const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)) // Create a partition layout. const partition = d3.partition() .size([width, height]) // Swap width and height .padding(2); // Apply the partition layout. const root = partition(d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.height - a.height || b.value - a.value)); let focus = root; // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "height: auto; font: 13px Segoe UI"); // Add a cell for each node of the hierarchy. const cell = svg .selectAll() .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); const rect = cell .append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("fill-opacity", 1) .attr("fill", d => { return (d.data.color); }) .style("cursor", "pointer") .on("click", clicked); const text = cell.append("text") .attr("x", 4) .attr("y", 13); text.append("tspan") .text(d => d.data.name) .each(function (d, i) { d3plus.textWrap() .width(10); }); const tspan = text.append("tspan") .attr("dy", "1.5em") .attr("x", 0) .attr("fill-opacity", d => labelVisible(d) * 0.7) .text(d => ` ${format(d.value)}`); cell.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); function clicked(event, p) { focus = focus === p ? p = p.parent : p; root.each(d => d.target = { x0: ((d.x0 - p.x0) / (p.x1 - p.x0) * width)<0 ? 0 :((d.x0 - p.x0) / (p.x1 - p.x0) * width), x1: ((d.x1 - p.x0) / (p.x1 - p.x0) * width)>1000? 1000:((d.x1 - p.x0) / (p.x1 - p.x0)* width), y0: (d.y0) , y1: (d.y1) }); const t = cell.transition().duration(750) .attr("transform", d => `translate(${d.target.x0},${d.target.y0})`); rect.transition(t).attr("height", d => rectHeight(d.target)); rect.transition(t).attr("width", d => rectWidth(d.target)); text.transition(t).attr("fill-opacity", d => +labelVisible(d.target)).attr("y", d=>labelMiddle(d.target)); tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7); } function rectHeight(d) { return d.x1 - d.x0 - Math.min(1, (d.x1 - d.x0) / 2); } function rectWidth(d) { return d.y1 - d.y0 - Math.min(1, (d.y1 - d.y0) / 2); } function labelVisible(d) { return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16; } function labelMiddle(d) { return (d.x1-d.x0)/2; } const mlrRect = rect.filter(function(d) { return d.data.name === "boundary"; }); return svg.node(); }4b:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare-2.json","type":"application/json","lastModified":1707829620087.346,"size":11634},{"id":"415592a3d997373394a54ca478f387f529d3c0a5d644fdd60bfcec7bc4823b4af0db29b822b130f568bc3ee4d22441d9b667836003581313df9b342cd42ca2ff","href":"https://static.observableusercontent.com/files/415592a3d997373394a54ca478f387f529d3c0a5d644fdd60bfcec7bc4823b4af0db29b822b130f568bc3ee4d22441d9b667836003581313df9b342cd42ca2ff","name":"Flächenschema(1).json","type":"application/json","lastModified":1707829631868.274,"size":1367}] 29:{"id":"8fa389492bc50bf7","slug":null,"title":"Icicle","thumbnail":"78543a7191ef10f8e7fbc16b3def477b1ccf53e44e868cebb01f88d7a1e00127","access_level":"public","create_time":"$D2024-02-13T13:07:00.087Z","update_time":"$D2024-11-11T09:31:47.367Z","view_time":null,"first_public_time":"$D2024-02-13T13:07:00.087Z","has_unpublished_edits":null,"fork":{"id":"34b9a37fa57f0dc6","slug":"icicle/2","title":"Icicle","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24e0e283ab33affb","login":"gggtang-ws","name":"gggtang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/81504475c299cf4a50c43acdc7438610f426c04790930ed2142932a65d0f405e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":390,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa004d26992b00be","login":"gggtang","name":"gggtang","avatar_url":"https://avatars-next.observableusercontent.com/90c6fcb80a2344dd3954a3c881774bc21223a5688b2293958eb023aaec286497","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fa004d26992b00be","login":"gggtang","name":"gggtang","avatar_url":"https://avatars-next.observableusercontent.com/90c6fcb80a2344dd3954a3c881774bc21223a5688b2293958eb023aaec286497","tier":null,"role":"editor"},{"type":"team","id":"24e0e283ab33affb","login":"gggtang-ws","name":"gggtang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/81504475c299cf4a50c43acdc7438610f426c04790930ed2142932a65d0f405e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Icicle","cells":[{"id":0,"value":"

Icicle

D3 › Gallery

\n\n# Icicle\n\nThis space-filling visualization, the Cartesian equivalent to a [sunburst](/@d3/sunburst/2?intent=fork), 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-icicle).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"d3plus = require(\"https://cdn.jsdelivr.net/npm/d3plus-text@1\")","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(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"data = FileAttachment(\"Flächenschema(1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"Icicle_chart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"typeList = [\n { type: \"Siedlungs- und Verkehrsfläche\", value: 12.4 },\n { type: \"Freiraumfläche\", value: 87.6 },\n { type: \"Verkehrsfläche\", value: 2.9 },\n { type: \"Siedlungsfläche\", value: 9.5 },\n { type: \"Baulich geprägte Siedlungs- und Verkehrsfläche\", value: 8.2 },\n { type: \"Siedlungsfreifläche\", value: 1.3 },\n { type: \"Landwirtschaft\", value: 51.6 },\n { type: \"Wald- und Gehölzfläche\", value: 32 },\n { type: \"Wasserfläche\", value: 2 },\n { type: \"Unkultivierte Bodenfläche\", value: 1.72 },\n { type: \"Abbau- und Haldenfläche\", value: 0.28 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"hierarchie = ([{\"Siedlungs- und Verkehrsfläche\":12.4,\"Freiraumfläche\":87.6},[{\"Verkehrsfläche\":2.9,\"Siedlungsfläche\":9.5,\"Landwirtschaft\":51.6,\"Wald- und Gehölzfläche\":32,\"Wasserfläche\":2,\"Unkultivierte Bodenfläche\":1.72,\"Abbau- und Haldenfläche\":0.28},{\"Baulich geprägte Siedlungs- und Verkehrsfläche\":8.2,\"Siedlungsfreifläche\":1.3}]])","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