2b:null 2c:["$","title",null,{"children":"Dáil Standing Orders | David Cass | Observable"}] 31:Tc75,treemapChart1 = { const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); const svg = d3.create("svg") .attr("viewBox", [0.5, -30.5, width, height + 30]) .style("font", "16px arial") .attr("fill", "white"); let group = svg.append("g") .call(render, treemap(SOAsHierarchy)); function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); node.filter(d => d === root ? d.parent : d.children) .attr("cursor", "pointer") .on("click", (event, d) => d === root ? zoomout(root) : zoomin(d)); node.append("title") .text(d => `${name(d)}\n${format(d.value)}`); node.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => d === root ? "#666666" : d.children ? "#7F6C2E" : "#666666") .attr("stroke", "#fff"); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .attr("font-weight", d => d === root ? "bold" : null) .selectAll("tspan") .data(d => (d === root ? name(d) : d.data.name).split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null) .text(d => d); group.call(position, root); } function position(group, root) { group.selectAll("g") .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`) .select("rect") .attr("width", d => d === root ? width : x(d.x1) - x(d.x0)) .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0)); } // When zooming in, draw the new nodes on top, and fade them in. function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.append("g").call(render, d); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .call(position, d.parent)) .call(t => group1.transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d)); } // When zooming out, draw the old nodes on top, and fade them out. function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.insert("g", "*").call(render, d.parent); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d)) .call(t => group1.transition(t) .call(position, d.parent)); } return svg.node(); }32:T1322,chart = { // Specify the charts’ dimensions. The height is variable, depending on the layout. const width = 1200; const marginTop = 10; const marginRight = 10; const marginBottom = 10; const marginLeft = 230; // Rows are separated by dx pixels, columns by dy pixels. These names can be counter-intuitive // (dx is a height, and dy a width). This because the tree must be viewed with the root at the // “bottom”, in the data domain. The width of a column is based on the tree’s height. const root = d3.hierarchy(SOAsHierarchy); const dx = 50; const dy = (width - marginRight - marginLeft) / (1 + root.height); // Define the tree layout and the shape for links. const tree = d3.tree().nodeSize([dx, dy]); const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x); // Create the SVG container, a layer for the links and a layer for the nodes. const svg = d3.create("svg") .attr("width", width) .attr("height", dx) .attr("viewBox", [-marginLeft, -marginTop, width, dx]) .attr("style", "max-width: 100%; height: auto; font: 15px arial; user-select: none;"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(event, source) { const duration = event?.altKey ? 2500 : 250; // hold the alt key to slow down the transition const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + marginTop + marginBottom; const transition = svg.transition() .duration(duration) .attr("height", height) .attr("viewBox", [-marginLeft, left.x - marginTop, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(event, d); }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } // Do the first update to the initial configuration of the tree — where a number of nodes // are open (arbitrarily selected as the root, plus nodes with 7 letters). root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); update(null, root); return svg.node(); }33:Ta70,icicleChart = { // Specify the chart’s dimensions. const width = 928; const height = 1200; // Create the color scale. const color = d3.scaleOrdinal(d3.quantize(d3.interpolateCubehelixLong, SOAsHierarchy.children.length + 1)); // Compute the layout. const hierarchy = d3.hierarchy(SOAsHierarchy) .sum(d => d.value) const root = d3.partition() .size([height, (hierarchy.height + 1) * width / 3]) (hierarchy); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 14px arial;"); // Append cells. const cell = svg .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y0},${d.x0})`); const rect = cell.append("rect") .attr("width", d => d.y1 - d.y0 - 1) .attr("height", d => rectHeight(d)) .attr("fill-opacity", 0.6) .attr("fill", d => { if (!d.depth) return "#ccc"; while (d.depth > 1) d = d.parent; return color(d.data.name); }) .style("cursor", "pointer") .on("click", clicked); const text = cell.append("text") .style("user-select", "none") .attr("pointer-events", "none") .attr("x", 4) .attr("y", 13) .attr("fill-opacity", d => +labelVisible(d)); text.append("tspan") .text(d => d.data.name); const format = d3.format(",d"); const tspan = text.append("tspan") .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)}`); // On click, change the focus and transitions it into view. let focus = root; 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) * height, x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height, y0: d.y0 - p.y0, y1: d.y1 - p.y0 }); const t = cell.transition().duration(750) .attr("transform", d => `translate(${d.target.y0},${d.target.x0})`); rect.transition(t).attr("height", d => rectHeight(d.target)); text.transition(t).attr("fill-opacity", d => +labelVisible(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 labelVisible(d) { return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16; } return svg.node(); }34:[] 2f:{"id":"864d6ef481163724","slug":null,"title":"Dáil Standing Orders","thumbnail":"1217d23991acca8945b67480ca73719f0c41d3484da695f54d5f91544145a7ca","access_level":"public","create_time":"$D2023-10-03T10:42:00.475Z","update_time":"$D2023-10-18T10:52:33.101Z","view_time":null,"first_public_time":"$D2023-10-03T10:42:00.475Z","has_unpublished_edits":null,"fork":{"id":"21d1b3d3e49e8f08","slug":"google-sheets-starter","title":"Google Sheets Starter","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1cc7c51c4e129cc6","login":"cassdavid","name":"David Cass","avatar_url":"https://avatars-next.observableusercontent.com/23f715262d714df76a73099e52ee40739329c8543d97eb613e222d55e7fc738b","tier":"starter_2024"},"version":562,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ed953af6b3ea3ca","login":"cassdavid","name":"David Cass","avatar_url":"https://avatars-next.observableusercontent.com/23f715262d714df76a73099e52ee40739329c8543d97eb613e222d55e7fc738b","tier":null}],"members":[{"type":"individual","id":"8ed953af6b3ea3ca","login":"cassdavid","name":"David Cass","avatar_url":"https://avatars-next.observableusercontent.com/23f715262d714df76a73099e52ee40739329c8543d97eb613e222d55e7fc738b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dáil Standing Orders","cells":[{"id":0,"value":"# Dáil Standing Orders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"SOAsHierarchy = ({\n name: \"Standing Orders (February 2020)\",\n children:\n Array.from(\n d3.rollup(search, v => v.length, d => d.section_title, d => d.article_title, d => d.text), \n ([name, children]) => ({name, children: Array.from(children, ([name, children]) => ({name, children: Array.from(children,([name, value]) => ({name, value})\n )}) )})) \n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof search = Inputs.search(standingOrdersSource)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"standingOrdersforXML = ({\n standing_Orders: \"Standing Orders (February 2020)\",\n sections:\n Array.from(\n d3.rollup(standingOrdersSource, v => v.length, d => d.section_title, d => d.article_title, d => d.current_num, d => d.text), \n ([section, articles]) => ({section, articles: Array.from(articles, ([article, current_num]) => ({article, current_num: Array.from(current_num,([number, text]) => ({number, text: Array.from(text, ([text_string]) => ({text_string})\n )}) )})) }))\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"\n \n \n \n \n \n \n \n \n ${search.slice(0, 162).map(search => htl.html`\n \n \n \n `)}\n \n

Section	Standing Order	Text
${search[\"section_title\"]}	${search[\"current_num\"]} ${search[\"article_title\"]}	${search[\"text\"]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"d3.groups(standingOrdersSource, d => d.section_title, d => d.article_title, d => d.current_num, d => d.text)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"standingOrdersSource = d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vRGbgCmVSfDhhysJcO1GVU2damqEgfGKJUpT7w4wV5ZaRSdF1UzBEaZ7K94ttHG0PkvpUs2jjQVuXH-/pub?output=csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"standingOrdersSource","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":562,"value":"SELECT * FROM \"standingOrdersSource\"","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:standingOrdersSource"},{"id":373,"value":"treemap = data => d3.treemap()\n .tile(tile)\n (d3.hierarchy(data)\n .sum(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"function tile(node, x0, y0, x1, y1) {\n d3.treemapBinary(node, 0, 0, width, height);\n for (const child of node.children) {\n child.x0 = x0 + child.x0 / width * (x1 - x0);\n child.x1 = x0 + child.x1 / width * (x1 - x0);\n child.y0 = y0 + child.y0 / height * (y1 - y0);\n child.y1 = y0 + child.y1 / height * (y1 - y0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"name = d => d.ancestors().reverse().map(d => d.data.name).join(\"/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"import {chart as icicle}\nwith {SOAsHierarchy as data}\nfrom \"@d3/zoomable-icicle\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"standingOrdersSource","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"viewof table = Inputs.table(search, {\n columns: [\n \"current_num\",\n \"section_title\",\n \"article_title\",\n \"text\"\n ],\n header: {\n current_num: \"No.\",\n section_title: \"Section\",\n article_title: \"Standing Order\",\n text: \"Text\"\n },\n width:{rows: \"auto\"},\n layout: \"auto\",\n rows: 18,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"