2b:null 2c:["$","title",null,{"children":"Chart layout template | Patrick Wojda | Observable"}] 31:T564,/** This function select all the direct children of the svg, calculates the height of each child and translates it its correct position based on the height. The function also sets the height and width of the svg based on its content. **/ function joinElement(svg) { const postRender = (svg) => { const size = { height: 0, width: 0 }; svg .selectChildren() .nodes() .forEach((el) => { const datum = d3.select(el).datum(); if (datum.transform) { datum.transform(el); } const box = el.getBBox(); // always translate the element with the previous elements height d3.select(el).attr("transform", `translate(0, ${size.height})`); // get the height of the element and add an offset if there is one specified in the datum size.height += box.height + (datum.offset ? datum.offset : 0); // use the width of the widest element size.width = box.width > size.width ? box.width : size.width; }); svg.attr("width", size.width); svg.attr("height", size.height); }; // do this once the svg has been rendered to screen, ie. it has a height and width if (svg.isConnected) { Promise.resolve().then(() => postRender(svg)); } else if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(() => postRender(svg)); } }32:Ta3f,/** Copied (and adapted) from https://observablehq.com/@jtrim-ons/svg-text-wrapping **/ function textwrap( chart, width = 500, selector = "text", lineHeightEms = 1.05, lineHeightSquishFactor = 1, splitOnHyphen = true, centreVertically = true ) { const text = d3.select(chart).selectAll("text"); text.each(function () { const text = d3.select(this); const x = text.attr("x"); const y = text.attr("y"); // get the styles of the text element, need to re-apply on each new text && tspan element const textStyle = text.attr("style"); console.log(text.text()); const words = []; text .text() .split(/\s+/) .forEach(function (w) { if (splitOnHyphen) { const subWords = w.split("-"); for (var i = 0; i < subWords.length - 1; i++) words.push(subWords[i] + "-"); words.push(subWords[subWords.length - 1] + " "); } else { words.push(w + " "); } }); text.text(null); // Empty the text element text.attr("style", textStyle); text.attr("dy", "1em"); // `tspan` is the tspan element that is currently being added to let tspan = text.append("tspan").attr("style", textStyle); let line = ""; // The current value of the line let prevLine = ""; // The value of the line before the last word (or sub-word) was added let nWordsInLine = 0; // Number of words in the line for (var i = 0; i < words.length; i++) { let word = words[i]; prevLine = line; line = line + word; ++nWordsInLine; tspan.text(line.trim()); if (tspan.node().getComputedTextLength() > width && nWordsInLine > 1) { // The tspan is too long, and it contains more than one word. // Remove the last word and add it to a new tspan. tspan.text(prevLine.trim()); prevLine = ""; line = word; nWordsInLine = 1; tspan = text.append("tspan"); tspan.attr("style", textStyle); tspan.text(word.trim()); } } const tspans = text.selectAll("tspan"); let h = lineHeightEms; // Reduce the line height a bit if there are more than 2 lines. if (tspans.size() > 2) for (var i = 0; i < tspans.size(); i++) h *= lineHeightSquishFactor; tspans.each(function (d, i) { // Calculate the y offset (dy) for each tspan so that the vertical centre // of the tspans roughly aligns with the text element's y position. let dy = i * h; d3.select(this) .attr("y", y) .attr("x", x) .attr("dy", dy + "em"); }); }); }33:[] 2f:{"id":"dfd8535b56b572ab","slug":null,"title":"Chart layout template","thumbnail":"c3d3168da00b92ebeb0947bb1b486ebf6ecf474671af05b7a8d60842002a10d8","access_level":"public","create_time":"$D2023-07-23T21:36:28.645Z","update_time":"$D2023-07-23T21:36:28.645Z","view_time":null,"first_public_time":"$D2023-07-23T21:36:28.645Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":563,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chart layout template","cells":[{"id":0,"value":"# Chart layout template\n\nThis notebook demonstrates how to create discrete, ie. non interacting, chart pieces and joining them into a new chart.\n\nThe resulting chart layout is a vertical list where each chart piece is a horisontal \"slice\" of the list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"## Chart elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"### Header element\nTitle of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"header = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"### Subheader element\nSub header is the explanation of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"subheader = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"### Plot element\nThe main data visualisation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"histogram = Plot.rectY(\n { length: 10000 },\n Plot.binX({ y: \"count\" }, { x: d3.randomNormal() })\n).plot({ width: 523, height: 413 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"### Footer element\nCaption of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"footer = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## Composed chart\nThis is the final composed chart based on the chart elements specified above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"{\n // make sure to add all the chart elements you want in the order you want them\n const elements = [\n //{ element: header, offsest: 100, transform: (el) => textwrap(el, 100) }, // not working properly\n { element: header, offsest: 100 },\n { element: subheader, offset: 16 },\n { element: histogram, offset: 16 },\n { element: footer, offset: 0 }\n ];\n\n // create new svg container\n const chart = d3.create(\"svg\");\n\n // wrap all elements in groups for cleaner rendering and add the offset to the datum of the group\n elements.forEach((el, i) => {\n const g = chart\n .append(\"g\")\n .datum({ offset: el.offset, transform: el.transform })\n .append(() => el.element);\n });\n\n chart.call(joinElement);\n\n return chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"