31:T1c8d,chart = { const root = tree(d3.hierarchy(data)); const offSet = 0.1; const off = 38; const svg = d3.create("svg"); const width = 1600, height = 1600; svg .append("rect") .attr("x", -width / 2) .attr("y", -height / 2) .attr("width", width) .attr("height", height) .attr("fill", darkMode ? "black" : "white"); Object.defineProperty(Array.prototype, "first", { value() { return this.find(Boolean); }, configurable: true }); root.x = Math.PI / 2; // root.y = -10; root.children[3].y = 150; // Path svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) // 1.5 for B&W 1.75 good too .selectAll("path") .data(root.links()) .join("path") .attr("stroke", (d) => getBackgroundColor(d.target.data.class, seed)) .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ); // Bullet svg .append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr( "transform", (d) => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("fill", (d) => d.children ? getBackgroundColor(d.data.class, seed) : getBackgroundColorFaded(d.data.class, seed) ) .attr("r", (d) => { if (d.depth == 0) { return 2.25; } // 11 or 12 else if (d.depth == 1) { return 1.75; } // 10 or 11 else if (d.height == 0) { return 1.75; } else if (d.depth == 2) { return 1.75; } }); // Text svg .append("g") .attr("font-family", "sans-serif") // .attr("font-size", 9) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("font-size", (d) => { if (d.depth == 0) { return 15; } // 11 or 12 else if (d.depth == 1) { return 11; } // 10 or 11 else if (d.height == 0) { return 10; } else if (d.depth == 2) { return 11; } }) .attr("fill", (d) => getBackgroundColor(d.data.class, seed)) .attr( "transform", (d) => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI - offSet ? 180 : 0}) ` ) .attr("dy", "0.31em") // .attr("x", (d) => (d.x < Math.PI - offSet === !d.children ? 9 : -9)) .attr("x", (d) => { if (d.depth == 0) { return d.x < Math.PI - offSet === !d.children ? 8 : -8; } // 11 or 12 else if (d.depth == 1) { return d.x < Math.PI - offSet === !d.children ? 8 : -8; } // 10 or 11 else if (d.height == 0) { return d.x < Math.PI - offSet === !d.children ? 9 : -9; } else if (d.depth == 2) { return d.x < Math.PI - offSet === !d.children ? 8 : -8; } }) .attr("text-anchor", (d) => d.x < Math.PI - offSet === !d.children ? "start" : "end" ) .text((d) => { if (d.x < Math.PI - offSet) { if (typeof d.data.num !== "undefined") { if (d.data.num.length <= 4) { var str = d.data.num; var nameOnly = str.substring(0, str.length - 1); var numOnly = str.substring(str.length - 1, str.length); d.data.num = nameOnly + "\xa0\xa0" + numOnly; } return d.data.num; } else return d.data.name; } else { if (typeof d.data.num !== "undefined") { if (d.data.num.length <= 4) { var str = d.data.num; var nameOnly = str.substring(0, str.length - 1); var numOnly = str.substring(str.length - 1, str.length); d.data.num = nameOnly + "\xa0\xa0" + numOnly; } return d.data.num; } else return d.data.name; } }) .clone(true) .lower() .attr("stroke", darkMode ? "black" : "white") .clone(true) .attr("stroke-width", 0) .attr("x", (d) => (d.x < Math.PI - offSet === !d.children ? off : -off)) .text((d) => { if (!d.children) return d.x > Math.PI - offSet ? d.data.name + " : " : " : " + d.data.name; }); ////////////////////////////////////////////////////// Start of License /////////////////////////////////////////////// if (license) { const fontName = "Poppins"; GFontToDataURI( "https://fonts.googleapis.com/css2?family=Poppins&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); d3.select("svg") .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); // svg // .append("svg:image") // .attr("x", xLicense - 55) // .attr("y", yLicense - 43) // .attr("width", 55) // // .attr("height", 31) // .attr( // "xlink:href", // // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg" // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc.svg" // // await FileAttachment("88x31-1.png").url() // ) // .attr("opacity", 0.75); svg .append("g") .attr( "transform", ` translate(${xLicense - 65}, ${yLicense - 46}) scale(0.55)` ) //.attr("fill", "#828282") .attr("opacity", 0.75) .html(logo); const text = svg .append("text") .attr("x", xLicense) .attr("y", yLicense) .style("font-weight", "bold") .style("fill", "#828282") .attr("font-family", fontName) .attr("font-size", fLicense) .text("DhammaCharts.org") .attr("text-anchor", "end") .attr("dy", "-1.1em") .clone(true) .text("For free distribution only") .attr("dy", "0.25em"); // .clone(true) // .text("No Right reserved") // .attr("dy", "1.6em"); } if (licenseNoLogo) { const fontName = "Poppins"; GFontToDataURI( "https://fonts.googleapis.com/css2?family=Poppins&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); d3.select("svg") .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); const text = svg .append("text") .attr("x", xLicense) .attr("y", yLicense) .style("font-weight", "bold") .style("fill", "#828282") .attr("font-family", fontName) .attr("font-size", fLicense) .text("CC-BY-NC") .attr("text-anchor", "end") .attr("dy", "-2.45em") .clone(true) .text("DhammaCharts.org") .attr("dy", "-1.1em") .clone(true) .text("For free distribution only") .attr("dy", "0.25em"); } ////////////////////////////////////////////////////// End of License /////////////////////////////////////////////// return svg.attr("viewBox", autoBox).node(); }32:Tb60,data = { let root = { name: "Bhikkhu Pāṭimokkha", parentId: null, class: "root" }; const tree = []; tree.push(root); const classOff = []; let chapter = []; const num = []; const content = []; const chapterTest = []; csvData.forEach((d) => { d.content = toTitleCase(d.content); d.gravity = +d.gravity; // d.related = d3.csvParse(d.related); // this code is for another chart that include relation between rules // d.related = d.related.columns; // forEach dosen't work below // for (var i = 0, len = d.related.length; i < len; i++) { // d.related[i] = d.related[i].trim(); // } // class if (!classOff.includes(d.class)) classOff.push(d.class); // chapter d.chapter = d.chapter.replace("The", ""); d.chapter = d.chapter.replace(" Chapter", ""); if (!chapter.includes(d.chapter) && d.chapter != "") { const pushed = []; pushed[d.chapter] = d.class; if (!chapterTest.includes(d.chapter)) { chapterTest.push(d.chapter); chapter.push(pushed); } } // num + content if (!num.includes(d.num) && d.chapter != "") { const pushed = []; pushed[d.content] = d.chapter; pushed[d.content + "Num"] = d.num; pushed[d.centent + "class"] = d.class; num.push(pushed); } if (!num.includes(d.num) && d.chapter == "") { const pushed = []; pushed[d.content] = d.class; pushed[d.content + "Num"] = d.num; pushed[d.centent + "class"] = d.class; num.push(pushed); } }); // pushing everything into the tree // class for (var i = 0, len = classOff.length; i < len; i++) { const pushed = {}; pushed.name = classOff[i]; pushed.parentId = Object.values(root)[0]; pushed.class = classOff[i]; tree.push(pushed); } // chapter for (var i = 0, len = chapter.length; i < len; i++) { const pushed = {}; pushed.name = Object.keys(chapter[i])[0]; pushed.parentId = Object.values(chapter[i])[0]; pushed.class = Object.values(chapter[i])[0]; tree.push(pushed); } // num for (var i = 0, len = num.length; i < len; i++) { const pushed = {}; pushed.name = Object.keys(num[i])[0]; pushed.parentId = Object.values(num[i])[0]; pushed.num = Object.values(num[i])[1]; pushed.class = Object.values(num[i])[2]; tree.push(pushed); } // from https://typeofnan.dev/an-easy-way-to-build-a-tree-with-object-references/ const idMapping = tree.reduce((acc, el, i) => { acc[el.name] = i; return acc; }, {}); tree.forEach((el) => { if (el.parentId === null) { root = el; return; } // Use our mapping to locate the parent element in our data array const parentEl = tree[idMapping[el.parentId]]; // Add our current el to its parent's `children` array parentEl.children = [...(parentEl.children || []), el]; }); return tree[0]; }33:T6a0,// from https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript?noredirect=1&lq=1 function toTitleCase(str) { const articles = ["a", "an", "the"]; const conjunctions = ["for", "and", "nor", "but", "or", "yet", "so"]; const prepositions = [ "with", "at", "from", "into", "upon", "of", "to", "in", "for", "on", "by", "like", "over", "plus", "but", "up", "down", "off", "near" ]; // The list of spacial characters can be tweaked here const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, " ").replace(/(\s\s+)/gi, " "); const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1); const normalizeStr = (str) => str.toLowerCase().trim(); const shouldCapitalize = (word, fullWordList, posWithinStr) => { if (posWithinStr == 0 || posWithinStr == fullWordList.length - 1) { return true; } return !( articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word) ); }; //str = replaceCharsWithSpace(str); str = normalizeStr(str); let words = str.split(" "); if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized words = words.map((w) => capitalizeFirstLetter(w)); } else { for (let i = 0; i < words.length; i++) { words[i] = shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]; } } const str2 = words.join(" "); words = str2.split("-"); words = words.map((w) => capitalizeFirstLetter(w)); return words.join("-"); }34:T58a,# Creative Commons License Deed ## Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) This is a human-readable summary of (and not a substitute for) the [license](https://creativecommons.org/licenses/by-nc/4.0/legalcode). ### You are free to: * **Share** — copy and redistribute the material in any medium or format * **Adapt** — remix, transform, and build upon the material The licensor cannot revoke these freedoms as long as you follow the license terms. ### Under the following terms: * **Attribution** — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. * **NonCommercial** — You may not use the material for commercial purposes. * **No additional restrictions** — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. ### Notices: You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation. No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material. FileAttachment("88x31.png").image()35:T5d6,# Primary Sources - [The Concise Buddhist Monastic Code 1](https://buddhistuniversity.net/content/reference/cbmci) by Bhikkhu Anon (CC BY-NC 3.0). He has aggreed to the use of his text as long as it's for free distribution. - [Analysis of the Bhikkhu-Pātimokkha](https://buddhistuniversity.net/content/canon/analysis-of-the-bhikkhu-patimokkha_suddhaso) by Bhante Suddhāso (© 2014 For free distribution only.) - **The Heritage of the Sangha** by Ajahn Thiradhammo (© Thiradhammo Bhikkhu 1999 This is an unfinished manuscript which may be used for reference. Permission to use quotations should be sought from the author before publication.) - [Dhammadana, List of 227 Rules](https://en.dhammadana.org/sangha/vinaya/227.htm) by Isi Dhamma (CC BY-NC-ND 3.0). He has aggreed to the use of his text. - [The Concise Buddhist Monastic Code 1 by Bhikkhu Anon](https://buddhistuniversity.net/content/reference/cbmci) (CC BY-NC 3.0)) ## Secondary Sources - [The Buddhist Monastic Code I](https://www.dhammatalks.org/vinaya/bmc/Section0001.html) by Ajahn Thanissaro (CC BY-NC 3.0) - [Sutta Central - Basket of Monastic Law](https://suttacentral.net/pitaka/vinaya/pli-tv-vi/pli-tv-bu-vb) by Bhikkhu Brahmali (CC0). A diagram using this source could be made CC0. - [THE BHIKKHU PĀTIMOKKHA A WORD BY WORD TRANSLATION](https://www.bps.lk/olib/bp/bp627s_Nyanatusita_Bhikkhu-Patimokkha-Translation.pdf) by Bhikkhu Ñāṇatusita (Copyright © 2014, Bhikkhu Ñāṇatusita, Forest Hermitage, Kandy, 2014.)36:[{"id":"488af466a1aeaceec637178b0affa3e71c676f021350655a470997eba91f65391a42c94f3960f5f00b76970dfe16088a4a14f2de14e4b16246f91ed4461825b5","href":"https://static.observableusercontent.com/files/488af466a1aeaceec637178b0affa3e71c676f021350655a470997eba91f65391a42c94f3960f5f00b76970dfe16088a4a14f2de14e4b16246f91ed4461825b5","name":"by-nc.svg","type":"image/svg+xml","lastModified":1716394107755.517,"size":15666},{"id":"60d5c2b2bbe6ba3dec12462f447b08bba2e9aa5d5cf20c5e6a697b50b577382021140e84e016afe1b1be2aacd2b5f1a0b2388871c0824e1daf0cc77aa79110c7","href":"https://static.observableusercontent.com/files/60d5c2b2bbe6ba3dec12462f447b08bba2e9aa5d5cf20c5e6a697b50b577382021140e84e016afe1b1be2aacd2b5f1a0b2388871c0824e1daf0cc77aa79110c7","name":"88x31-1.png","type":"image/png","lastModified":1635508549599.365,"size":1513}] 2f:{"title":"Bhikkhu Pāṭimokkha Dendrogram","cells":[{"id":1,"value":"md`# Bhikkhu Pāṭimokkha Dendrogram\n\nIN CONSTRUCTION\n\n- Automatically updates from this [Google Spreadsheet](https://docs.google.com/spreadsheets/d/1_bIe8orVewMzC6f-4h63ORH-97yw3kUsEcaDCKTlfFY/edit?usp=sharing)\n- Forked from the nice exemple [Radial Dendrogram](https://observablehq.com/@d3/radial-dendrogram)\n- Using [An Easy Way to Build a Tree in JavaScript](https://typeofnan.dev/an-easy-way-to-build-a-tree-with-object-references/) to adapt the CSV file (could have used [d3.stratify](https://observablehq.com/@d3/d3-stratify))\n- A [Nice embeded vue](https://observablehq.com/embed/48ce41143ec136f3?cells=chart%2Cviewof+seed) to share with others\n- License [Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)](https://observablehq.com/@7722371e7ecac8bd/bhikkhu-patimokkha#cell-384)\n- Sources : [see end of document](https://observablehq.com/@7722371e7ecac8bd/bhikkhu-patimokkha#cell-519)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof PNGprecision = Inputs.range([1, 9], {\n label: \"PNG resolution factor\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"DOM.download(() => rasterizeWhite(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"FileAttachment(\"88x31-1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof seed = Inputs.range([1, 20], {label: \"color seed\", step : 1, value : 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"viewof license = Inputs.toggle({ label: \"Include License\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof licenseNoLogo = Inputs.toggle({\n label: \"Include License no Logo\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"viewof darkMode = Inputs.toggle({ label: \"darkMode\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"viewof light = Inputs.range([0, 100], {\n label: \"Light\",\n step: 1,\n value: darkMode ? 75 : 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"viewof saturation = Inputs.range([0, 100], {\n label: \"saturation\",\n step: 1,\n value: darkMode ? 100 : 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"viewof lightBullet = Inputs.range([0, 100], {\n label: \"LightBullet\",\n step: 1,\n value: darkMode ? 70 : 70\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"viewof saturationBullet = Inputs.range([0, 100], {\n label: \"saturationBullet\",\n step: 1,\n value: darkMode ? 100 : 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"yLicense = 765","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"xLicense = 765","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"logo = await FileAttachment(\"by-nc.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"fLicense = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"lighten = (color, k = 1) => {\n const { l, c, h } = d3.lch(color);\n return d3.lch(l + 30 * k, c, h);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"import { GFontToDataURI } from \"@7722371e7ecac8bd/suttapitaka\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQwcHwTr81retM0cuJ94eDwl2dVz1kzb-xVTZeS2OOR1vU5sDXRZJDkjjUFi2iTdhckai0JyMcaRXkv/pub?gid=0&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"csvData[200].content","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"// from https://observablehq.com/@bryangingechen/importing-data-from-google-spreadsheets-into-a-notebook-we\ncsvData = {\n // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data\n let names = [];\n const spreadsheet = await d3\n .csv(url)\n .then((data) => data.forEach((d) => names.push(d))); // d3.tsv returns a Promise\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"// from https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript\nfunction getBackgroundColorFaded(stringInput, seed) {\n if (stringInput == \"Aniyata\") stringInput = stringInput + \"abcdefg\";\n let stringUniqueHash = [...stringInput].reduce((acc, char) => {\n return char.charCodeAt(0) + ((acc << 5) - acc);\n }, 0);\n return `hsl(${stringUniqueHash ** seed % 360}, ${saturationBullet}%, ${lightBullet}%)`; // 0% for B&W\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"// from https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript\nfunction getBackgroundColor(stringInput, seed) {\n if (stringInput == \"Aniyata\") stringInput = stringInput + \"abcdefg\";\n let stringUniqueHash = [...stringInput].reduce((acc, char) => {\n return char.charCodeAt(0) + ((acc << 5) - acc);\n }, 0);\n return `hsl(${stringUniqueHash ** seed % 360}, ${saturation}%, ${light}%)`; // 0% for B&W\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"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, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"radius = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"tree = d3.cluster().size([2 * Math.PI, radius - 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.drawImage(\n image,\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.canvas.toBlob(resolve, \"image/png\", 1);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"function rasterizeWhite(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.fillStyle = \"white\";\n context.fillRect(\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.drawImage(\n image,\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.canvas.toBlob(resolve, \"image/png\", 1);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"FileAttachment(\"88x31-1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":953,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W36","stdlib":"1","titling":"auto"}