2f:T1746,chart = { const off = 6; // 6 const rayon = 1; // 1.5 const font = 5; // 8 const fontRoot = 9; // 9 const fontLevel2 = 7.5; const fontLevel3 = 6; const fontLevel4 = 6; const fontLeaf = 5; const arbre1 = { name: "Right Mindfulness", color: arbre1Col }; const root = tree(d3.hierarchy(dataTSVfromGS)); const currentColor = null; root.descendants().forEach((d) => { // this allows tu use Sutta Ref in chart. if (d.data.name.includes("[")) { const regexSutta = /(?<=\[).*(?=\])/g; // this breaks safari because it cannot do lookaheads... const regexName = /^.*(?= \[)/gm; // needs a space before the bracket const suttaRefString = d.data.name.match(regexSutta); const suttaRefArray = suttaRefString[0].split(", "); const nameRef = d.data.name.match(regexName); d.data.name = nameRef[0]; d.data.ref = suttaRefArray; } }); const svg0 = d3.create("svg"); const svg = svg0.append("svg"); root.x = Math.PI / 2; // const svg = d3.create("svg").attr("viewBox", [-400, -400, width, height]); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 1) // 0.4 .attr("stroke-width", 0.5) // 1 .selectAll("path") .data(root.links()) .join("path") .attr("stroke", (d) => { let node = d.source; for (let k = 0; k < 4; k++) { if (node.ancestors().includes(root.children[k])) { return colori[k + 1]; } else if (node == root) { return colori[0]; } } }) .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ) .attr("stroke-width", (d) => { if (d.target.data.name == "@") { return 0; } }); // .attr("transform", (d) => `translate(${d})`); const circle = 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", color1) .attr("fill", (d) => { const node = d; for (let k = 0; k < 4; k++) { // ARBRE COLOR // for (let j = 0; j < node.ancestors().length; j++) { // if (node.ancestors()[j].data.name == arbre1.name) { // return arbre1.color; // } // } if (node.ancestors().includes(root.children[k])) { // return color(root.children[k].data.name); if (node.children) { return colori[k + 1]; } else { return coloriFade[k + 1]; } } else if (node == root) { return colori[0]; } } }) .attr("r", (d) => { const name = d.data.name; if (name == "" || name == "@") { return 0; } else { return rayon; } }); // .attr("transform", (d) => `translate(${d})`); const text = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", font) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("fill", (d) => { const node = d; // console.log(node.ancestors().length); // for i in ancestors if inclides then red for (let k = 0; k < 4; k++) { // ARBRE COLOR // for (let j = 0; j < node.ancestors().length; j++) { // if (node.ancestors()[j].data.name == arbre1.name) { // return arbre1.color; // } // } if (node.ancestors().includes(root.children[k])) { // return color(root.children[k].data.name); return colori[k + 1]; } else if (node == root) { return colori[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("font-size", (d) => { // if (d == root.descendants().first()) { // return fontRoot; // } // 11 or 12 // else if (d.children) { // return font; // } // 10 or 11 // else { // return font; // } // }) .attr("font-size", (d) => { if (d.depth == 0) { return fontRoot; } // 11 or 12 else if (d.depth == 1) { return fontLevel2; } // 10 or 11 else if (d.depth == 2) { return fontLevel3; } // 10 or 11 else if (d.depth == 3) { return fontLevel4; } // 10 or 11 else if (!d.children) { return fontLeaf; } // 10 or 11 else { return font; } }) .attr("x", (d) => { // d.x < Math.PI === !d.children ? 6 : -6; if (d.data.name.includes("~")) { return d.x < Math.PI ? off : -off; } else if (d.data.name.includes("%")) { return d.x < Math.PI ? -off : off; } else { return d.x < Math.PI === !d.children ? off : -off; } }) .attr( "text-anchor", // (d) => (d.x < Math.PI === !d.children ? "start" : "end") (d) => { if (d.data.name.includes("~")) { // ne sert à rien pour l'instant return d.x < Math.PI ? "start" : "end"; } else if (d.data.name.includes("%")) { // ne sert à rien pour l'instant return d.x < Math.PI ? "end" : "start"; } else { return d.x < Math.PI === !d.children ? "start" : "end"; } } ) .text((d) => d.data.name.replace("~", "").replace("%", "").replace("@", "")) // ~ dans le nom place derière % devant .clone(true) .lower() .attr("stroke", "white"); // .attr("transform", (d) => `translate(${d})`); return svg.attr("viewBox", autoBox).node(); // no zoom }30:T6a3,// 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("-"); }31:[{"id":"51866d8a21504bf3cde1ac59c69f3e3d7d1586fcd84f610b3eb8fac9548b0c8cf72a9f925da90aefbcd5f666dd2b925046905fbfe6151341e26d6fd2f0394c1e","href":"https://static.observableusercontent.com/files/51866d8a21504bf3cde1ac59c69f3e3d7d1586fcd84f610b3eb8fac9548b0c8cf72a9f925da90aefbcd5f666dd2b925046905fbfe6151341e26d6fd2f0394c1e","name":"d3.js","type":"application/javascript","lastModified":1706901266775.448,"size":586923},{"id":"03d03905bb74d6159cf58f389c7f2461a2a289afd21071be758576f9732facc28f059d964ad493573e73d2447878095e147fccc74eeb069dd07894c3c8049b3e","href":"https://static.observableusercontent.com/files/03d03905bb74d6159cf58f389c7f2461a2a289afd21071be758576f9732facc28f059d964ad493573e73d2447878095e147fccc74eeb069dd07894c3c8049b3e","name":"Buddha-s Brain Data - data3.csv","type":"text/csv","lastModified":1706719581560.313,"size":26055}] 2d:{"title":"The Buddha's Mind III (csv data)","cells":[{"id":1,"value":"md`# The Buddha's Mind III (csv data)\n\nIN CONSTRUCTION\n\nData CSV \n\n\"~\" in the name put the name behind the node,\n\n\"%\" put in front of the node\n\n\"@\" removes the node but keep its space\n\n\"*\" make a link level wihtout node\n\n### Sources\n- [interactive Dhamma Guide](https://www.idhamma.org/) very good !\n- [Outilne of Buddhisme](https://en.wikipedia.org/wiki/Outline_of_Buddhism)\n- [Buddhadust](http://buddhadust.net/)\n- [Access to Insight, A path to Freedom](https://www.accesstoinsight.org/ptf/index.html)\n- [stange website Lucid24](https://www.lucid24.org/sted/8aam/index.html)\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"dataTSVfromGS = {\n // very complicated way of treansforming the googlespreadsheet data into that chart... Using old treeify function\n let res = \"\";\n dataGS.forEach((d) => {\n let column = 0;\n let fin = false;\n Object.values(d).forEach((e) => {\n if (e && column == 0) (res = res.concat(toTitleCase(e))), (fin = true);\n if (e && column > 0) (res = res.concat(toTitleCase(e))), (fin = true);\n if (fin == false && column > 0) res = res.concat(\" \");\n column++;\n });\n res = res.concat(\"\\n\");\n });\n return treeify(res.replaceAll(\"*\", \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"color1 = \"#631680\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"color2 = \"#08732a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"color3 = \"#b52222\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"color4 = \"#a88b0a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"color5 = \"#1b6796\"\n//baab22","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"arbre1Col = \"#baab22\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"coloriFade = colori.map((el) => {\n el = d3.hsl(el);\n el.s = el.s - 0;\n el.l = el.l + 0;\n return el;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"colori = [color1, color2, color3, color4, color5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"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":166,"value":"function treeify(source) {\n source = source.replace(/ /g, \"\\t\"); // tab = two sapce in observable\n const parents = [];\n const nodes = source.trim().split(/\\n/g);\n parents.push({ name: nodes[0] });\n parents.push({ children: [] });\n for (let i = 1, n = nodes.length; i < n; ++i) {\n const depth = nodes[i].match(/^\\t*/)[0].length;\n let depthB = 0;\n if (i < n - 1) depthB = nodes[i + 1].match(/^\\t*/)[0].length;\n const parent = parents[depth];\n if (!parent.children) parent.children = [];\n\n if (depth - depthB >= 0) {\n parent.children.push(\n (parents[depth + 1] = { name: nodes[i].slice(depth), value: 1 })\n );\n } else {\n parent.children.push(\n (parents[depth + 1] = { name: nodes[i].slice(depth) })\n );\n }\n }\n return parents[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"tree = d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"height = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"dataGS = FileAttachment(\"Buddha-s Brain Data - data3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"d3mod = FileAttachment(\"d3.js\").blob()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1626,"value":" d3 = require(URL.createObjectURL(d3mod))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1636,"value":"// d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}