2e:null 2f:["$","title",null,{"children":"5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram | Di | Observable"}] 34:Te5b,fanChart = { const tidyTree = d3.tree() .size([2 * Math.PI, width * 0.65]) .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth); const root = tidyTree(d3.hierarchy(data) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); const svg = d3.create("svg"); svg.append("g") .attr("id", "tree-links") .attr("fill", "none") .attr("stroke", "#767676") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("stroke", "#767676") .attr("d", d3.linkRadial() .angle(d => d.x / 2) .radius(d => d.y)); // svg.append("g") // .attr("id", "tree-node-dots") // .selectAll("circle") // .data(root.descendants()) // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) // .join("circle") // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // `) // .attr("fill", d => d.children ? "#202630" : "#949494") // .attr("r", 2.5); svg.append("g") .attr("id", "tree-labels") .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") // .attr("transform", d => ` // rotate(${d.x * 180 / 2 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) .attr("transform", d => ` rotate(${d.x * 180 / 2 / Math.PI - 90}) translate(${d.y},0) `) .attr("dy", "0.31em") // .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("x", d => -6) // .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .attr("text-anchor", "start") .text(d => d.data.text) .clone(true).lower() .attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech .attr("stroke", "white"); svg.attr("viewBox", autoBox) .attr("id", "fan-chart"); const viewBox = (d3.csvParse(svg.attr("viewBox"))).columns; const viewBoxX = +(d3.csvParse(svg.attr("viewBox"))).columns[0]; const viewBoxY = +(d3.csvParse(svg.attr("viewBox"))).columns[1]; const viewBoxWidth = +(d3.csvParse(svg.attr("viewBox"))).columns[2]; const viewBoxHeight = +(d3.csvParse(svg.attr("viewBox"))).columns[3]; svg.append("text") .attr("id", "chart-title") .attr("x", viewBoxX) .attr("y", viewBoxY + margin.top / 2) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 600) .attr("font-size", 18) .text(data.chartTitle); svg.append("text") .attr("id", "source") .attr("x", viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .text('Source: Wikipedia'); svg.append("text") .attr("id", "source") .attr("x", viewBoxWidth + viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }35:Tc7a,radialDendrogram = { const root = tree(data); const svg = d3.create("svg"); svg.append("g") .attr("id", "tree-links") .attr("fill", "none") .attr("stroke", "#767676") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // svg.append("g") // .attr("id", "tree-node-dots") // .selectAll("circle") // .data(root.descendants()) // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) // .join("circle") // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // `) // .attr("fill", d => d.children ? "#202630" : "#949494") // .attr("r", 2.5); svg.append("g") .attr("id", "tree-labels") .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .text(d => d.data.text) .clone(true).lower() .attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech .attr("stroke", "white"); svg.attr("viewBox", autoBox); const viewBox = (d3.csvParse(svg.attr("viewBox"))).columns; const viewBoxX = +(d3.csvParse(svg.attr("viewBox"))).columns[0]; const viewBoxY = +(d3.csvParse(svg.attr("viewBox"))).columns[1]; const viewBoxWidth = +(d3.csvParse(svg.attr("viewBox"))).columns[2]; const viewBoxHeight = +(d3.csvParse(svg.attr("viewBox"))).columns[3]; svg.append("text") .attr("id", "chart-title") .attr("x", viewBoxX) .attr("y", viewBoxY + margin.top / 2) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 600) .attr("font-size", 18) .text(data.chartTitle); svg.append("text") .attr("id", "source") .attr("x", viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .text('Source: Wikipedia'); svg.append("text") .attr("id", "source") .attr("x", viewBoxWidth + viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }36:Tcdb,radialDendrogramUnrotatedText = { const root = tree(data); const svg = d3.create("svg"); svg.append("g") .attr("id", "tree-links") .attr("fill", "none") .attr("stroke", "#767676") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // svg.append("g") // .attr("id", "tree-node-dots") // .selectAll("circle") // .data(root.descendants()) // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) // .join("circle") // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // `) // .attr("fill", d => d.children ? "#202630" : "#949494") // .attr("r", 2.5); svg.append("g") .attr("id", "tree-labels") .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `) // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", "start") .text(d => d.data.text) .clone(true).lower() .attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech .attr("stroke", "white"); svg.attr("viewBox", autoBox); const viewBox = (d3.csvParse(svg.attr("viewBox"))).columns; const viewBoxX = +(d3.csvParse(svg.attr("viewBox"))).columns[0]; const viewBoxY = +(d3.csvParse(svg.attr("viewBox"))).columns[1]; const viewBoxWidth = +(d3.csvParse(svg.attr("viewBox"))).columns[2]; const viewBoxHeight = +(d3.csvParse(svg.attr("viewBox"))).columns[3]; svg.append("text") .attr("id", "chart-title") .attr("x", viewBoxX) .attr("y", viewBoxY + margin.top / 2) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 600) .attr("font-size", 18) .text(data.chartTitle); svg.append("text") .attr("id", "source") .attr("x", viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .text('Source: Wikipedia'); svg.append("text") .attr("id", "source") .attr("x", viewBoxWidth + viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }37:Td4f,radialTidyTree = { const tidyTree = d3.tree() .size([2 * Math.PI, width * 0.7]) .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth); const root = tidyTree(d3.hierarchy(data) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); const svg = d3.create("svg"); svg.append("g") .attr("id", "tree-links") .attr("fill", "none") .attr("stroke", "#767676") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // svg.append("g") // .attr("id", "tree-node-dots") // .selectAll("circle") // .data(root.descendants()) // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) // .join("circle") // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // `) // .attr("fill", d => d.children ? "#202630" : "#949494") // .attr("r", 2.5); svg.append("g") .attr("id", "tree-labels") .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .text(d => d.data.text) .clone(true).lower() .attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech .attr("stroke", "white"); svg.attr("viewBox", autoBox); const viewBox = (d3.csvParse(svg.attr("viewBox"))).columns; const viewBoxX = +(d3.csvParse(svg.attr("viewBox"))).columns[0]; const viewBoxY = +(d3.csvParse(svg.attr("viewBox"))).columns[1]; const viewBoxWidth = +(d3.csvParse(svg.attr("viewBox"))).columns[2]; const viewBoxHeight = +(d3.csvParse(svg.attr("viewBox"))).columns[3]; svg.append("text") .attr("id", "chart-title") .attr("x", viewBoxX) .attr("y", viewBoxY + margin.top / 2) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 600) .attr("font-size", 18) .text(data.chartTitle); svg.append("text") .attr("id", "source") .attr("x", viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .text('Source: Wikipedia'); svg.append("text") .attr("id", "source") .attr("x", viewBoxWidth + viewBoxX) .attr("y", viewBoxHeight - -viewBoxY - margin.bottom / 2 + 10) .attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif') .attr("font-weight", 400) .attr("font-size", 10) .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }38:T40d,clean_phrases = Array.from(phrases_list.querySelectorAll("li"), r => ( // arrow function expression with a concise body r.textContent.trim() .replace(/\..*$/g, "") // s/A new language is a new life. Persian proverb[2]/A new language is a new life/ .replace(/\[.\]/g, "") // s/A fool and his money are soon parted[1]/A fool and his money are soon parted/ .replace(/,$/g, "") // s/April showers bring forth May flowers,/April showers bring forth May flowers/ .replace(/[()]/g,"") // s/A stitch in time (saves nine)/A stitch in time saves nine/ .replace(/ ,/g, ",") // s/Finders keepers (, losers weepers)/Finders keepers, losers weepers/ .replace(/\/[A-Z].*$/,"") // s#An Englishman's home is his castle/A man's home is his castle#An Englishman's home is his castle# .replace(/\/[^ ]*/,"") // s#A watched pot/kettle never boils#A watched pot never boils# .replace(/[ ]$/, "") // s#Absence makes the heart grow fonder .#Absence makes the heart grow fonder.# + "." // add trailing full stop )) .filter(d => !d.match(/;/))39:[{"id":"cb5f3545c40880120dcf42d21bd3d528f7547acfff0110021651ed600be30521bafcf06f2e107fa1dd40b39484a88f71826492330964720c3d39b7b51116b851","href":"https://static.observableusercontent.com/files/cb5f3545c40880120dcf42d21bd3d528f7547acfff0110021651ed600be30521bafcf06f2e107fa1dd40b39484a88f71826492330964720c3d39b7b51116b851","name":"f_text-5 Jun 2020.json","type":"application/json","lastModified":1591314386950.011,"size":4554}] 32:{"id":"e8393de6d8accfd3","slug":"5-june-2020-d3-radial-clustered-dendrogram","title":"5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram","thumbnail":"7b363893328833a64f24c64cbace57aabf292821b346d68a383910cdec6204eb","access_level":"public","create_time":"$D2020-06-04T23:24:44.810Z","update_time":"$D2020-06-06T06:51:59.779Z","view_time":null,"first_public_time":"$D2020-06-05T01:09:50.575Z","fork":{"id":"a75d9bceef5ff902","slug":"4-june-2020-d3-clustered-dendrogram","title":"4 June 2020: D3 Clustered Dendrogram","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":6158,"publish_version":6158,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"2646dc1fd46613a4","slug":"journal-getting-started-with-data-viz-collection","title":"Journal: Getting Started with Data Viz","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"type":"notebook","body":{"title":"5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram","cells":[{"id":0,"value":"md`# 5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`After building a D3 clustered dendrogram in [4 June 2020: D3 Clustered Dendrogram](https://observablehq.com/@didoesdigital/4-june-2020-d3-clustered-dendrogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), I want to build a radial version. This is mostly an exercise in producing data art.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4895,"value":"md`I'm using a [List of proverbial phrases](https://en.wikipedia.org/wiki/List_of_proverbial_phrases) fetched from Wikipedia.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5060,"value":"md`## Radial tidy trees and dendrograms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5932,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6068,"value":"md`Here was my first attempt:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5194,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5914,"value":"md`The sentences on the left half of the diagram read backwards, which is awkward.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5908,"value":"md`Let's try *not* rotating the text on the left half:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5911,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5919,"value":"md`Of course upside down text isn't much more readable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5928,"value":"md`Let's try a radial tidy tree as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5925,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5922,"value":"md`Let's see if we can make a fan chart, semi-circle version instead, that only shows the right half.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6065,"value":"md`*(moved to [top of the notebook](#fanChart))*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5938,"value":"md`## Today I Learned`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5940,"value":"md`\n- It is fun to look at all the different shapes of [radial trees in Observable](https://observablehq.com/search?query=radial%20tree).\n - This one is outrageous. Be warned, it has a LOT of nodes, your device may struggle: [Radial Tidy Tree by johnfischbeck](https://observablehq.com/@johnfischbeck/radial-tidy-tree)\n- I read the [D3 \\`tree.separation()\\`](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation) docs, which explains:\n > A variation that is more appropriate for radial layouts reduces the separation gap proportionally to the radius:\n ~~~js\n function separation(a, b) {\n return (a.parent == b.parent ? 1 : 2) / a.depth;\n }\n ~~~\n- I used \\`csvParse\\` to grab the \\`viewBox\\` values calculated from the autobox function. There must be a better way to solve that specific problem but I enjoyed using \\`csvParse\\` in that unusual way to turn a \\`viewBox\\` string into an array: \\`const viewBox = (d3.csvParse(svg.attr(\"viewBox\"))).columns;\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5947,"value":"md`## Background reading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5949,"value":"md`\n- [Radial Tidy Tree by Mike Bostock](https://observablehq.com/@d3/radial-tidy-tree)\n- [Radial Dendrogram by Mike Bostock](https://observablehq.com/@d3/radial-dendrogram)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5881,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4912,"value":"phrases_list = {\n const parser = new DOMParser();\n const external = parser.parseFromString(text.parse.text[\"*\"], \"text/html\");\n const list = document.adoptNode(external.querySelector(\"ul\"));\n list.style = `\n display: block;\n position: relative;\n max-width: none;\n max-height: 100px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n `;\n return list;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5681,"value":"md`To see proverbial phrases starting with different letters: \n\n1. In the [\\`text\\`](#text) cell, you can swap the \\`FileAttachment\\` line with the \\`fetch\\` line to pull the data live from Wikipedia.\n2. Swap the letter in [\\`section_letter\\`](#section_letter) to change the [\\`section_number\\`](#section_number) used in the fetch to Wikipedia.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4909,"value":"text = FileAttachment(\"f_text-5 Jun 2020.json\").json()\n// text = fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_proverbial_phrases§ion=${section_number}`).then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5731,"value":"section_letter = \"F\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5865,"value":"md`*(You can't pick Q or X. They'll fall back to A.)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5186,"value":"tree = data => {\n const root = d3.hierarchy(data).sort((a, b) => d3.ascending(a.data.text, b.data.text));\n return d3.cluster().size([2 * Math.PI, radius - 100])(root);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5431,"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 - margin.top, width, margin.top + height + margin.bottom];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4930,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4945,"value":"data = {\n function populate(tree, words) {\n if (words.length === 0) { // condition for ending recursion\n return;\n }\n \n let word = words[0]; // words = [\"A\", \"bad\", \"excuse\", \"is\", \"better\", \"than\", \"none.\"]\n let node = tree['children'].find(t => t.text === word);\n \n if (!node) { // if we haven't seen this word before\n node = {\n text: word,\n children: []\n };\n tree['children'].push(node);\n }\n \n populate(node, words.slice(1)); // keep populating without the first, already-processed word\n }\n \n let root = {\n text: '',\n children: []\n };\n \n let i = 0;\n const len = clean_phrases.length;\n for (i; i < len; i++) {\n const phrase = clean_phrases[i]; // \"A bad excuse is better than none.\"\n const words = phrase.split(\" \"); // [\"A\", \"bad\", \"excuse\", \"is\", \"better\", \"than\", \"none.\"]\n populate(root, words);\n }\n\n return Object.assign(root, {chartTitle: `Proverbial phrases starting with ${section_letter}`});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5700,"value":"section_number = lookupSectionNumber[section_letter] || 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5733,"value":"lookupSectionNumber = ({\n \"A\": 1,\n \"B\": 2,\n \"C\": 3,\n \"D\": 4,\n \"E\": 5,\n \"F\": 6,\n \"G\": 7,\n \"H\": 8,\n \"I\": 9,\n \"J\": 10,\n \"K\": 11,\n \"L\": 12,\n \"M\": 13,\n \"N\": 14,\n \"O\": 15,\n \"P\": 16,\n \"R\": 17, // No \"Q\" phrases\n \"S\": 18,\n \"T\": 19,\n \"U\": 20,\n \"V\": 21,\n \"W\": 22,\n \"Y\": 23, // No \"X\" phrases\n \"Z\": 24\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5188,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5887,"value":"radius = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5974,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5199,"value":"margin = ({top: 48, right: 0, bottom: 48, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4972,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"