2f:T62a,md`# SuttaPitaka Horizontal A0 Frame Squircle II - [Zoom and pan version](https://www.dhammacharts.org/suttapitaka-chart/) with interactive click on node to access translated sutta. ([Vite App Repo](https://github.com/DhammaCharts/suttapitaka-chart)) - New Website in construction: [www.dhammacharts.org](https://www.dhammacharts.org/) - https://thatsmaths.com/2016/07/14/squircles/ #### Need to ajust - Improvement - space function and other minior error. - consistante font and bullet sizes - bullet transparency - add shuffle seed for colors - english translation ? - clean code - SVG download (with mention) (v1673 has two seperate charts using .innerHTML to merge them, but dosen't allow for .on("click") to access data on the bottom chart KN. I couldn't find a way to merge them and keeping the data connected) #### Ideas - link to sutta. Done with .on("click") ;-) click on the name of the node to access Suttacentral.net I wonder if using .append("a") would allow to use a plain sVG without JS. - using *sc-data/blob/master/sc_bilara_data/root/pli/ms/sutta* to count words in each nodes ? this could be usefull for other charts that uses values to represent data sizes - floating info box that would show the name of the sutta being hovered over #### Sources - Data are from [Sutta Pitaka Data V2.0](https://observablehq.com/d/eb4984f02c934460#sn_tree) using [suttacentral.net](https://suttacentral.net) and their [github repo](https://github.com/suttacentral/sc-data) data #### License - [CC0 Public Domain](https://creativecommons.org/publicdomain/zero/1.0/)`30:T51a2,chart = { // add <= at the bottom to change the top label orentation // parametres du diagramme const off = 80; // offset des leaves const offDNMN = 32; // offset des leaves let scale = 2.5; // echelle globale const sizeDepth0 = 28; // font size const sizeDepth1 = 21; const sizeDepth2 = 16; const sizeHeight0 = 8.5; const sizeHeight1 = 12; const size = 12; const bulletDepth0 = 2.5; // bullet size const bulletDepth1 = 2; const bullet = 2; const bulletHeight1 = 1.5; const bulletHeight0 = 1.5; const translation = 1270 - 150; const squircle2 = (t) => 1 + (1 / 8) * Math.sin(2 * t) * Math.sin(2 * t); let a = 1; const aKN = 1; let b = 1; const bKN = 1.4; const squircle1 = (t) => a / Math.sqrt(Math.sqrt(1 - (1 / 2) * Math.sin(2 * t) * Math.sin(2 * t))); const n = 100; //4; const den = (t, n, a, b) => Math.pow(Math.cos(t) / a, 2 * n) + Math.pow(Math.sin(t) / b, 2 * n); const rectellipse = (t, a, b) => 1 / Math.pow(den(t, n, a, b), 1 / (2 * n)); const squircle = (t) => rectellipse(t / 1, a, b); const divisorKN = 2; const squircleKN = (t) => rectellipse(t / 2, a, b); // parametres angulaires // let divisor = 1.035 + 0.008 - 0.004 + 0.005; // division of the full circle // 1.8 // let angleDeg = -177.3 + 1.4 - 0.6 + 0.8; // angle offset from midday position // -10 is interesting // let angleRad = (Math.PI / 180) * angleDeg; // let sepDeg = 2; // let sepRad = (Math.PI / 180) * sepDeg; let divisor = 1; //1.035 + 0.008 - 0.004 - 0.007; // division of the full circle // 1.8 let angleDeg = 90; //+ 3.3; // angle offset from midday position // -10 is interesting let angleRad = (Math.PI / 180) * angleDeg; let sepDeg = 0.2; let sepRad = (Math.PI / 180) * sepDeg; // ajustements fins du diagramme const root = tree(data); // const str = "vaggasaṁyutta"; let heightSN = 800; root.each(function (d) { d.y = d.y * scale; if (d.data.name == "Devatāsaṁyutta") heightSN = d.y; if ( d .ancestors() .find( (x) => x.data.name == "Nidānasaṁyutta" || x.data.name == "Khandhasaṁyutta" || x.data.name == "Saḷāyatanasaṁyutta" ) && d.height == 1 ) { d.y = 890; d.data.spec = "fontSN"; } // if (d.height == 1 || d.height == 0) d.y = 600; // if (d.height == 2) d.y = 490; //if (d.height == 1) d.y = 800; if (d.height == 2) d.y = heightSN; // if (d.height == 3) d.y = 280; if (d.depth == 1) d.y = 160 + 100 + 25 + 5; if (d.depth == 2 && !d.data.acro?.includes("DN")) d.y = 400 + 100 + 30; //if (d.depth == 1) d.data.name = d.data.name.replace(str, ""); if (d.depth == 0) d.x = (-Math.PI * 1.1 - angleRad) * divisor + 2 * Math.PI; //if (d.depth == 0) d.x = 0; //if (d.depth == 0) d.y = -70; if (d.ancestors().find((x) => x.data.name == "Majjhimanikāya")) d.x = d.x + sepRad; if (d.ancestors().find((x) => x.data.name == "Saṁyuttanikāya")) d.x = d.x + 2 * sepRad; if (d.ancestors().find((x) => x.data.name == "Aṅguttaranikāya")) d.x = d.x + 3 * sepRad; if (d.data.id == "test") { d.y = 340 + 60 - 30 - 31; // could be calculated exaclty fo kn branch d.x = (Math.PI / 2 - angleRad) * divisor; } if (d.data.id == "test2") { d.y = 340 + 60 + 60; // could be calculated exaclty fo kn branch // d.y = 340 + 60 - 30 + 200; // could be calculated exaclty fo kn branch d.x = (Math.PI / 2 - angleRad) * divisor; } }); // rotation // const rot = -180; // const rotRad = (rot * Math.PI) / 180; // root.each((d) => (d.x += rotRad)); // root.each((d) => (d.x %= 2 * Math.PI)); // testing // console.log(root); // fonction d'apartenance à DN ou MN (utile pour les acros) const isDNMN = (d) => d.data.acro?.includes("DN") || d.data.acro?.includes("MN"); // fonction pour la taille de font let fontSize = (d) => { if (d.height == 0) { return sizeHeight0; } else if (d.data.spec == "fontSN") { return sizeHeight0; } else if (d.data.id.slice(0, 2) == "sn" && d.height == 1) { return sizeHeight1 - 1; } else if (d.depth == 1) { return sizeDepth1; } else if (d.height == 1 && !d.data.acro.includes("AN")) { return sizeHeight1; } else if (d.depth == 2) { return sizeDepth2; } else if (d.depth == 0) { return sizeDepth0; } else return size; }; // fonction pour la taille des bullets let bulletSize = (d) => { if (d.depth == 0) { return bulletDepth0; } else if ( d.data.acro == "SN 12" || d.data.acro == "SN 22" || d.data.acro == "SN 35" ) { return bulletHeight1; } else if (d.data.id == "test" || d.data.id == "test2") { return 0; } else if (d.depth == 1) { return bulletDepth1; } else if (d.height == 0) { return bulletHeight0; } else if (d.height == 1 && !d.data.acro.includes("AN")) { return bulletHeight1; } else return bullet; }; // Fonction qui retourne le nom de l'ancestre de depth 1 // utile pour la colorisation let oneDepth = (d, source = false) => { let ancestors = {}; source == true ? (ancestors = d.target.ancestors()) // source <=> target for a different result : (ancestors = d.ancestors()); const oneDepth = ancestors.find((d) => d.depth == 1); const result = oneDepth == null ? d.data.name : oneDepth.data.name; // for some reason it dosen't start with sutta pitaka anymore return result; // return oneDepth?.data.name; }; let color = d3.scaleOrdinal(domain); // let colorFaded = d3.scaleOrdinal(domainFaded); let isLeaf = (d) => { let bool = false; if (d.height == 0) bool = true; return bool; }; const fade = (color) => { const c = d3.color(color); c.l += 0.25; return c + ""; }; // création du diagramme ////////////////////////////////////////////////////////////////////////////////////////////// const svg = d3.create("svg"); const g = svg.append("g").attr("cursor", "grab"); const AH = 210 * frameRatio, AW = 297 * frameRatio; g.append("rect") .attr("x", translation / 2 - AW / 2 - 10) .attr("y", -AH / 2) .attr("width", AW) .attr("height", AH) .attr("stroke", frame ? "black" : "white") .attr("fill", "transparent"); // paths g.append("g") .attr("fill", "none") .attr("stroke", "#555") .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 / divisor + angleRad) .radius((d) => d.y * squircle(d.x)) ) .attr("stroke", (d) => color(oneDepth(d, true))); // colorisation // bullet g.append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr( "transform", (d) => ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y * squircle(d.x)},0) ` ) .attr("r", (d) => bulletSize(d)) .attr("fill", (d) => isLeaf(d) ? fade(color(oneDepth(d))) : color(oneDepth(d)) ); // colorisation // text g.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("font-size", (d) => fontSize(d)) .style("fill", (d) => color(oneDepth(d))) // colorisation .attr("transform", (d) => { console.log(d.data.name, d.x, Math.PI - angleRad); return ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y * squircle(d.x)},0) rotate(${ d.x > (Math.PI - angleRad) * divisor && d.x < (2 * Math.PI - angleRad) * divisor ? 180 : 0 // 0 }) `; }) .attr("dy", "0.31em") .attr("x", (d) => (d.x > (Math.PI - angleRad) * divisor && d.x < (2 * Math.PI - angleRad) * divisor) === !d.children ? -6 : 6 ) .attr("text-anchor", (d) => (d.x > (Math.PI - angleRad) * divisor && d.x < (2 * Math.PI - angleRad) * divisor) === !d.children ? "end" : "start" ) .text((d) => { if (d.depth == 0 || d.depth == 1) return d.data.name; if (d.height != 0 && isDNMN(d)) return d.data.name; if (d.data.acro == "") return d.data.name; // not usefull for KN if ( d.x > (Math.PI - angleRad) * divisor && d.x < (2 * Math.PI - angleRad) * divisor ) { return !d.children ? d.data.name + " : " + d.data.acro : d.data.acro + " : " + d.data.name; } else { return !d.children ? d.data.acro + " : " + d.data.name : d.data.name + " : " + d.data.acro; } }) .style("cursor", "pointer") .on("click", function (d, i) { // const link = "https://suttacentral.net/" + i.data.id + "/pli/ms"; let link = "https://suttacentral.net/" + i.data.id; if (i.data.id == "suttaPitaka") link = "https://suttacentral.net/pitaka/sutta"; window.open(link); }) .clone(true) .lower() .attr("stroke", "white"); ////////////////////////////////////////////////////// KN chart ////////////////////////////////////////////////////// /// add chart2 methode 1 /// // const svg2 = chart2.node().innerHTML; // g.append("g").attr("transform", "translate(0,1300)").html(svg2); /// add chart2 methode 2 /// (to allow use of .on("click")) (a = aKN), (b = bKN); scale = 3.5; divisor = divisorKN; // division of the full circle // 1.8 angleDeg = -0; //-30; // angle offset from midday position // -10 is interesting angleRad = (Math.PI / 180) * angleDeg; sepRad = 0; data2.each(function (d) { if ( d.ancestors().find( (x) => x.data.id != "kn" && x.data.id != "kp" && x.data.id != "dhp" && x.data.id != "bv" && x.data.id != "mnd" && x.data.id != "mnd" && !x.data.id.slice(0, 3) == "cnd" && !x.data.id.slice(0, 2) == "cp" && !x.data.id.slice(0, 2) == "ps" && !x.data.id.slice(0, 2) == "ne" && // x.data.id != "ne" && x.data.id != "pe" ) && d.height == 1 ) d.children = null; }); const root2 = tree(data2); root2.each(function (d) { d.y = d.y * scale; if (d.height == 1 || d.height == 0) d.y = 600 + 230 + 100 + 40; if (d.height == 2) d.y = 490 + 230 + 30 + 30; if (d.depth == 1) d.y = 260 + 100 + 30; if (d.depth == 0) d.x = Math.PI; // if (d.depth == 0) d.x = (Math.PI / 2 - angleRad) * divisor; if (d.depth == 0) d.y = -9 * 10; //- 90 - 30 - 20; if (d.data.name == "test") d.y = 800; if (d.data.id.slice(0, 3) == "cnd" && d.height == 1) d.y = 490 + 230 + 30 + 30; if (d.data.id.slice(0, 3) == "cnd" && d.height == 1) d.data.acro = ""; // if (d.data.id.includes("cnd") && d.height == 2) d.y = 490 + 100; if (d.data.id.slice(0, 2) == "cp" && d.height == 1) d.y = 490 + 230 + 30 + 30; if (d.data.id.slice(0, 2) == "cp" && d.height == 2) d.y = 490 + 100; if (d.data.id.slice(0, 2) == "cp" && d.height == 2) d.data.acro = ""; if (d.data.id.slice(0, 2) == "ps" && d.height == 1) d.y = 490 + 230 + 30 + 30; if (d.data.id.slice(0, 2) == "ps" && d.height == 1) d.data.acro = ""; // if (d.data.id.includes("cp") && d.height == 3) d.y = 490; if (d.data.id.slice(0, 2) == "ne" && d.height == 1) d.y = 490 + 230 + 30 + 30; if (d.data.id.slice(0, 2) == "ne" && d.height == 2) d.y = 490 + 100; if (d.data.id.slice(0, 2) == "ne" && d.height == 1) d.data.acro = ""; // if (d.data.id.includes("ne") && d.height == 3) d.y = 490; // if (data.id.slice(0, 3) == "cnd" && d.height == 1) d.y = 490 + 230 + 30; }); // fonction pour la taille de font fontSize = (d) => { if (d.height == 0) { return sizeHeight0; } else if (d.data.id.slice(0, 2) == "ne" && d.height == 1) { return sizeHeight1; } else if (d.data.id.slice(0, 2) == "ps" && d.height == 1) { return sizeHeight1; } else if (d.data.id.slice(0, 3) == "cnd" && d.height == 1) { return sizeHeight1; } else if (d.data.id.slice(0, 2) == "cp" && d.height == 1) { return sizeHeight1; } else if (d.data.id.slice(0, 4) == "thag" && d.height == 2) { return sizeHeight1 - 2; } else if (d.data.id.slice(0, 2) == "ja" && d.height == 2) { return sizeHeight1 - 1; } else if (d.depth == 1) { return sizeDepth2; } else if (d.height == 1) { return sizeHeight0; } else if (d.depth == 2) { return sizeHeight1; } else if (d.depth == 0) { return sizeDepth1; } else return size; }; oneDepth = (d, source = false) => { let ancestors = {}; source == true ? (ancestors = d.target.ancestors()) // source <=> target for a different result : (ancestors = d.ancestors()); const oneDepth = ancestors.find((d) => d.depth == 0); const result = oneDepth == null ? d.data.name : oneDepth.data.name; // for some reason it dosen't start with sutta pitaka anymore return result; // return oneDepth?.data.name; }; isLeaf = (d) => { let bool = false; if (d.height == 0) bool = true; if ( d.height == 1 && d.data.id.slice(0, 2) != "cp" && d.data.id.slice(0, 2) != "kp" && d.data.id.slice(0, 3) != "dhp" && d.data.id.slice(0, 3) != "cnd" && d.data.id.slice(0, 2) != "ne" && d.data.id.slice(0, 3) != "mnd" && d.data.id.slice(0, 2) != "ps" && d.data.id.slice(0, 2) != "bv" && d.data.id.slice(0, 2) != "pe" ) bool = true; // if (d.height ) return bool; }; // fonction pour la taille des bullets bulletSize = (d) => { if (d.depth == 0) { return bulletDepth1; } else if (d.depth == 1) { return bulletDepth1; } else { return bulletHeight0; } }; // const color = () => col1; color = d3.scaleOrdinal(domain); color("1"); color("2"); color("3"); color("4"); color("5"); color("6"); //////////////////// diagrame KN //////////////// const g2 = g .append("g") .attr("transform", "translate(" + translation + ",0)"); // paths g2.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 0.8) .selectAll("path") .data(root2.links()) .join("path") .attr( "d", d3 .linkRadial() .angle((d) => d.x / divisor + angleRad) .radius((d) => d.y * squircleKN(d.x)) ) .attr("stroke", (d) => color(oneDepth(d, true))); // colorisation // bullet g2.append("g") .selectAll("circle") .data(root2.descendants()) .join("circle") .attr( "transform", (d) => ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y * squircleKN(d.x)},0) ` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", (d) => bulletSize(d)) .attr("fill", (d) => color(oneDepth(d))) // colorisation // .attr("opacity", (d) => (isLeaf(d) ? 0.5 : 1)); // colorisation .attr("fill", (d) => isLeaf(d) ? fade(color(oneDepth(d))) : color(oneDepth(d)) ); // colorisation // text g2.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root2.descendants()) .join("text") .attr("font-size", (d) => fontSize(d)) .style("fill", (d) => color(oneDepth(d))) // colorisation .attr( "transform", (d) => ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y * squircleKN(d.x)},0) rotate(${ d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor ? 180 : 0 }) ` ) .attr("dy", "0.31em") .attr("x", (d) => (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) === !d.children ? -6 : 6 ) .attr("text-anchor", (d) => (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) === !d.children ? "end" : "start" ) .text((d) => { if (d.depth == 0 || d.depth == 1) return d.data.name; if (d.height != 0 && isDNMN(d)) return d.data.name; if (d.data.acro == "") return d.data.name; // not usefull for KN if (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) { return !d.children ? d.data.name + " : " + d.data.acro : d.data.acro + " : " + d.data.name; } else { return !d.children ? d.data.acro + " : " + d.data.name : d.data.name + " : " + d.data.acro; } }) .style("cursor", "pointer") .on("click", function (d, i) { let link = "https://suttacentral.net/" + i.data.id; if (i.data.id == "suttaPitaka") link = "https://suttacentral.net/pitaka/sutta"; window.open(link); }) .clone(true) .lower() .attr("stroke", "white"); ////////////////////////////////////////////////////// End of KN chart /////////////////////////////////////////////// ////////////////////////////////////////////////////// Start of 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)); if (license) { // svg // .append("svg:image") // .attr("x", xLicense - 88) // .attr("y", yLicense - 65) // // .attr("width", 88) // // .attr("height", 31) // .attr( // "xlink:href", // // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg" // await FileAttachment("cc-zero.svg").url() // ); svg .append("g") .attr("transform", `translate(${xLicense - 88}, ${yLicense - 65})`) .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("SuttaCentral.net") .attr("dy", "0.25em"); // .clone(true) // .text("No Right reserved") // .attr("dy", "1.6em"); } if (licenseNoLogo) { // svg // .append("svg:image") // .attr("x", xLicense - 88) // .attr("y", yLicense - 65) // // .attr("width", 88) // // .attr("height", 31) // .attr( // "xlink:href", // // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg" // await FileAttachment("cc0gris@3.svg").url() // ); 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("CC0 - Public Domain") .attr("text-anchor", "end") .attr("dy", "-2.45em") .clone(true) .text("DhammaCharts.org") .attr("dy", "-1.1em") .clone(true) .text("SuttaCentral.net") .attr("dy", "0.25em"); } ////////////////////////////////////////////////////// End of License /////////////////////////////////////////////// // zoom if (zoompan) { g.call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); // zooming + pan; svg.call( d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) ); function dragstarted() { d3.select(this).raise(); g.attr("cursor", "grabbing"); } function dragged(event, d) { d3.select(this) .attr("cx", (d.x = event.x)) .attr("cy", (d.y = event.y)); } function dragended() { g.attr("cursor", "grab"); } function zoomed({ transform }) { g.attr("transform", transform); } } return svg.attr("viewBox", autoBox).node(); }31:T1ac7,chart2 = { // parametres du diagramme const off = 80; // offset des leaves const offDNMN = 32; // offset des leaves const scale = 3; // echelle globale const sizeDepth0 = 21; // font size const sizeDepth1 = 16; const sizeDepth2 = 12; const sizeHeight0 = 8; const sizeHeight1 = 8; const size = 12; const bulletDepth0 = 2.5; // bullet size const bulletDepth1 = 2; const bulletHeight0 = 1.5; const bulletHeight1 = 1.5; const bullet = 2; const divisor = 1.5; // division of the full circle // 1.8 const angleDeg = -30 + 90; // angle offset from midday position // -10 is interesting const angleRad = (Math.PI / 180) * angleDeg; // ajustements fins du diagramme data2.each(function (d) { if ( d.ancestors().find( (x) => x.data.id != "kn" && x.data.id != "kp" && x.data.id != "dhp" && x.data.id != "bv" && x.data.id != "mnd" && x.data.id != "mnd" && !x.data.id.includes("cnd") && !x.data.id.includes("cp") && !x.data.id.includes("ps") && !x.data.id.includes("ne") && // x.data.id != "ne" && x.data.id != "pe" ) && d.height == 1 ) d.children = null; }); const root = tree(data2); const str = "vaggasaṁyutta"; root.each(function (d) { d.y = d.y * scale; if (d.height == 1 || d.height == 0) d.y = 600 + 230 + 100; if (d.height == 2) d.y = 490 + 230 + 30; if (d.depth == 1) d.y = 260 + 100 + 30; if (d.depth == 0) d.x = Math.PI; // if (d.depth == 0) d.x = (Math.PI / 2 - angleRad) * divisor; if (d.depth == 0) d.y = -9 * 80 - 90 - 30 - 20; if (d.data.name == "test") d.y = 800; if (d.data.id.includes("cnd") && d.height == 1) d.y = 490 + 230 + 30; // if (d.data.id.includes("cnd") && d.height == 2) d.y = 490 + 100; if (d.data.id.includes("cp") && d.height == 1) d.y = 490 + 230 + 30; if (d.data.id.includes("cp") && d.height == 2) d.y = 490 + 100; if (d.data.id.includes("ps") && d.height == 1) d.y = 490 + 230 + 30; // if (d.data.id.includes("cp") && d.height == 3) d.y = 490; if (d.data.id.includes("ne") && d.height == 1) d.y = 490 + 230 + 30; if (d.data.id.includes("ne") && d.height == 2) d.y = 490 + 100; // if (d.data.id.includes("ne") && d.height == 3) d.y = 490; }); // fonction d'apartenance à DN ou MN (utile pour les acros) const isDNMN = (d) => d.data.acro?.includes("DN") || d.data.acro?.includes("MN"); // fonction pour la taille de font const fontSize = (d) => { if (d.height == 0) { return sizeHeight0; } else if (d.data.id.includes("ne") && d.height == 1) { return sizeHeight1; } else if (d.depth == 1) { return sizeDepth1; } else if (d.height == 1 && !d.data.acro.includes("AN")) { return sizeHeight1; } else if (d.depth == 2) { return sizeDepth2; } else if (d.depth == 0) { return sizeDepth0; } else return size; }; // fonction pour la taille des bullets const bulletSize = (d) => { if (d.depth == 0) { return bulletDepth0; } else if (d.depth == 1) { return bulletDepth1; } else if (d.height == 0) { return bulletHeight0; } else if (d.height == 1 && !d.data.acro.includes("AN")) { return bulletHeight1; } else return bullet; }; const oneDepth = (d, source = false) => { let ancestors = {}; source == true ? (ancestors = d.target.ancestors()) // source <=> target for a different result : (ancestors = d.ancestors()); const oneDepth = ancestors.find((d) => d.depth == 0); const result = oneDepth == null ? d.data.name : oneDepth.data.name; // for some reason it dosen't start with sutta pitaka anymore return result; // return oneDepth?.data.name; }; // const color = () => col1; const color = d3.scaleOrdinal(domain); color("1"); color("2"); color("3"); color("4"); color("5"); color("6"); // création du diagramme ////////////////////////////////////////////////////////////////////////////////////////////// const svg = d3.create("svg"); // paths svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 0.8) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkRadial() .angle((d) => d.x / divisor + angleRad) .radius((d) => d.y) ) .attr("stroke", (d) => color(oneDepth(d, true))); // colorisation // bullet svg .append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr( "transform", (d) => ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y},0) ` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", (d) => bulletSize(d)) .attr("fill", (d) => color(oneDepth(d))); // colorisation // text svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("font-size", (d) => fontSize(d)) .style("fill", (d) => color(oneDepth(d))) // colorisation .attr( "transform", (d) => ` rotate(${(d.x * 180) / divisor / Math.PI - 90 + angleDeg}) translate(${d.y},0) rotate(${ d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor ? 180 : 0 }) ` ) .attr("dy", "0.31em") .attr("x", (d) => (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) === !d.children ? -6 : 6 ) .attr("text-anchor", (d) => (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) === !d.children ? "end" : "start" ) .text((d) => { if (d.depth == 0 || d.depth == 1) return d.data.name; if (d.height != 0 && isDNMN(d)) return d.data.name; if (d.data.acro == "") return d.data.name; // not usefull for KN if (d.x > (Math.PI - angleRad) * divisor || d.x < -angleRad * divisor) { return !d.children ? d.data.name + " : " + d.data.acro : d.data.acro + " : " + d.data.name; } else { return !d.children ? d.data.acro + " : " + d.data.name : d.data.name + " : " + d.data.acro; } }) .style("cursor", "pointer") .on("click", function (d, i) { let link = "https://suttacentral.net/" + i.data.id; if (i.data.id == "suttaPitaka") link = "https://suttacentral.net/pitaka/sutta"; window.open(link); }) .clone(true) .lower() .attr("stroke", "white"); return svg; } 32:T810,space = (str) => { if (str.length < 7) { if (str.includes("DN") || str.includes("MN")) { const name = str.split(" ")[0]; const number = str?.split(" ")[1]; str = name + " " + number; if (str.length == 4) { str = name + "\xa0\xa0\xa0\xa0\xa0" + number; } else if (str.length == 5) { str = name + "\xa0\xa0\xa0" + number; } return str; } else { const name = str.split(" ")[0]; const number = str?.split(" ")[1]; str = name + " " + number; if (str.length == 4) { str = name + "\xa0\xa0\xa0" + number; } else if (str.length == 5) { str = name + "\xa0" + number; } return str; } } else { const name = str.split(" ")[0]; const numbers = str?.split(" ")[1]; // methode 1 let a = numbers.split(".")[0]; let reste = numbers?.split(".")[1]; let b = reste.split("-")[0]; let c = reste?.split("-")[1]; const bCopy = b; if (a.length == 1) a = "\xa0\xa0" + a; // if (a.length == 1) a = "\xa0" + a; // if (b.length == 1) b = "\xa0\xa0\xa0\xa0" + b; // if (b.length == 2) b = "\xa0\xa0" + b; // if (c.length == 4) b = bCopy; // if (c.length == 1) c = "\xa0\xa0\xa0" + c; // if (c.length == 2) c = "\xa0\xa0" + c; // str = name + "\xa0\xa0" + a + "." + b + "-" + c; str = name + "\xa0" + a + "." + b + "-" + c; // if (b.length == 3 && c.length == 4) str = name + "" + a + "." + b + "-" + c; // Methode 2 // if (numbers.length == 11) return name + "\xa0\xa0" + numbers; // if (numbers.length == 10) return name + "\xa0\xa0" + numbers; // if (numbers.length == 9) return name + "\xa0\xa0\xa0\xa0" + numbers; // if (numbers.length == 8) return name + "\xa0\xa0\xa0\xa0\xa0\xa0" + numbers; // if (numbers.length == 7) // return name + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" + numbers; // if (numbers.length == 6) // return name + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" + numbers; // methode 3 //methode 0 return str; } }33:Ta4f,// from https://stackoverflow.com/questions/63288390/font-style-of-text-in-svg-not-propagating-to-png-on-download /* Only tested on a really limited set of fonts, can very well not work This should be taken as an proof of concept rather than a solid script. @Params : an url pointing to an embed Google Font stylesheet @Returns : a Promise, fulfiled with all the cssRules converted to dataURI as an Array */ function GFontToDataURI(url) { return fetch(url) // first fecth the embed stylesheet page .then((resp) => resp.text()) // we only need the text of it .then((text) => { // now we need to parse the CSSruleSets contained // but chrome doesn't support styleSheets in DOMParsed docs... let s = document.createElement("style"); s.innerHTML = text; document.head.appendChild(s); let styleSheet = s.sheet; // this will help us to keep track of the rules and the original urls let FontRule = (rule) => { let src = rule.style.getPropertyValue("src") || rule.style.cssText.match(/url$.*?$/g)[0]; if (!src) return null; let url = src.split("url(")[1].split(")")[0]; return { rule: rule, src: src, url: url.replace(/\"/g, "") }; }; let fontRules = [], fontProms = []; // iterate through all the cssRules of the embedded doc // Edge doesn't make CSSRuleList enumerable... for (let i = 0; i < styleSheet.cssRules.length; i++) { let r = styleSheet.cssRules[i]; let fR = FontRule(r); if (!fR) { continue; } fontRules.push(fR); fontProms.push( fetch(fR.url) // fetch the actual font-file (.woff) .then((resp) => resp.blob()) .then((blob) => { return new Promise((resolve) => { // we have to return it as a dataURI // because for whatever reason, // browser are afraid of blobURI in too... let f = new FileReader(); f.onload = (e) => resolve(f.result); f.readAsDataURL(blob); }); }) .then((dataURL) => { // now that we have our dataURI version, // we can replace the original URI with it // and we return the full rule's cssText return fR.rule.cssText.replace(fR.url, dataURL); }) ); } document.head.removeChild(s); // clean up return Promise.all(fontProms); // wait for all this has been done }); }34:[{"id":"6ccb0977f54213c59d7d965b83022cd30c8338b944357ae7bc7b1ce588b7799b2f8ceef45c99f814170b0f6dc1f16445c0bf7abf5f58664696cc949f60f807d6","href":"https://static.observableusercontent.com/files/6ccb0977f54213c59d7d965b83022cd30c8338b944357ae7bc7b1ce588b7799b2f8ceef45c99f814170b0f6dc1f16445c0bf7abf5f58664696cc949f60f807d6","name":"88x31.png","type":"image/png","lastModified":1690720033808.457,"size":997},{"id":"9a5af7590a65a76c9175b836760ab80721483325428b1f5adecefe262f8ebbadd5d73803269c858b46e2ad16e10925f4bacde3cc2961953eca3d35f446abdc09","href":"https://static.observableusercontent.com/files/9a5af7590a65a76c9175b836760ab80721483325428b1f5adecefe262f8ebbadd5d73803269c858b46e2ad16e10925f4bacde3cc2961953eca3d35f446abdc09","name":"cc-zero.svg","type":"image/svg+xml","lastModified":1690720033808.457,"size":8981},{"id":"ee7bc8fe405b3174c17f9b72804d4cd662b2cb3ce37991f82231a5506ac8218371a4dcd91678279aee2f7c0b463115d235d0b7c136dbe7fcf6913b289f8ec396","href":"https://static.observableusercontent.com/files/ee7bc8fe405b3174c17f9b72804d4cd662b2cb3ce37991f82231a5506ac8218371a4dcd91678279aee2f7c0b463115d235d0b7c136dbe7fcf6913b289f8ec396","name":"cc0gris@3.svg","type":"image/svg+xml","lastModified":1690720033808.457,"size":9683}] 2d:{"title":"SuttaPitaka Horizontal A0 Frame Squircle II","cells":[{"id":1,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"iLicense = FileAttachment(\"88x31.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"viewof div = Inputs.range([0, 12], {\n step: 1,\n label: \"Number of colors\",\n value: 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"viewof colorShift2 = Inputs.range([0, 360 / 20], {\n step: 1,\n label: \"Hue shift\",\n value: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"viewof s = Inputs.range([0, 100], {\n step: 1,\n label: \"Saturation\",\n value: 35\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"viewof l = Inputs.range([0, 100], {\n step: 1,\n label: \"Light\",\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"viewof PNGprecision = Inputs.range([1, 12], {\n label: \"PNG resolution factor\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2236,"value":"viewof frameRatio = Inputs.range([10, 13], {\n label: \"Frame Size\",\n step: 0.1,\n value: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"viewof license = Inputs.toggle({ label: \"Include License\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2244,"value":"viewof frame = Inputs.toggle({ label: \"Include black frame\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"viewof licenseNoLogo = Inputs.toggle({\n label: \"Include License no Logo\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"viewof zoompan = Inputs.toggle({ label: \"zoom & pan\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"DOM.download(() => rasterizeWhite(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG (unzoomed)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":2271,"value":"logo = await FileAttachment(\"cc-zero.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1996,"value":"FileAttachment(\"cc0gris@3.svg\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2063,"value":"FileAttachment(\"cc0gris@3.svg\").html().innerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":2014,"value":"// {\n// var wrapper = document.createElement(\"div\");\n// wrapper.innerHTML = logoHTML;\n// return wrapper.firstChild;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2008,"value":"// logoHTML = fetch(\n// \"https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg\"\n// )\n// .then((response) => response.text())\n// // .then((svg) => document.body.insertAdjacentHTML(\"afterbegin\", svg))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1714,"value":"xLicense = 2340","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"yLicense = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1726,"value":"fLicense = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"// chart2.attr(\"viewBox\", autoBox).node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"colorShift = 20 * colorShift2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"divs = div - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof col1 = colorPicker(\"#631680\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof col2 = colorPicker(\"#b32222¨\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof col5 = colorPicker(\"#baab22\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof col3 = colorPicker(\"#2760c2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"viewof col4 = colorPicker(\"#83b053\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof col6 = colorPicker(\"#111\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"domain2 = [col5, col2, col3, col4, col1, col6]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"d3.scaleOrdinal(domain)(\"test\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"domain = colors2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1926,"value":"domainFaded = colors2Faded","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"// the old color funciton\n\n","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":2362,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"data = {\n return d3.stratify()(SuttaPitakaTree);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"data2 = {\n return d3.stratify()(kn3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"// data.each((d) => console.log(d.data.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":" import { SuttaPitakaTree } from \"eb4984f02c934460\"\n//import { SuttaPitakaTree3 } from \"eb4984f02c934460\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"import { kn3 } from \"eb4984f02c934460\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs"},{"id":1652,"value":"height = 600","pinned":true,"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":349,"value":"color3 = d3.scaleOrdinal(domain)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1126,"value":"colors2 = subdivs(72, 378, divs).map((x) => color2(x + colorShift, s, l))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1925,"value":"colors2Faded = subdivs(72, 378, divs).map((x) => color2(x + colorShift, s, l))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1129,"value":"color2 = (h, s = 50, l = 50) => \"hsl(\" + h + \",\" + s + \"%,\" + l + \"%)\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1139,"value":"subdivs = (start, end, divs) =>\n [...new Array(divs + 1)].map((_, idx) => start + idx * ((end - start) / divs))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"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":1329,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"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":1700,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}