2f:T4fea,chart = { // add <= at the bottom to change the top label orentation const sd = 0; const sw = 0.4; const so = 1; // 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 = 4; const sizeHeight1 = 12; const size = 12; const bulletDepth0 = 2.5; // bullet size const bulletDepth1 = 2; const bullet = 2; const bulletHeight1 = 0.8; const bulletHeight0 = 0.5; const translation = 0; const squircle2 = (t) => 1 + (1 / 8) * Math.sin(2 * t) * Math.sin(2 * t); // const a = 1.1; //1.6; // const b = 1.1; const squircle1 = (t) => a / Math.sqrt(Math.sqrt(1 - (1 / 2) * Math.sin(2 * t) * Math.sin(2 * t))); const n = nf * times; //4; const den = (t, n) => Math.pow(Math.cos(t) / a, 2 * n) + Math.pow(Math.sin(t) / b, 2 * n); const rectellipse = (t) => 1 / Math.pow(den(t, n), 1 / (2 * n)); const squircle = rectellipse; const speed = (deg) => deg; const speedRad = (rad) => speed(rad); // bug here. // 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 = 0; //+ 3.3; // angle offset from midday position // -10 is interesting let angleRad = (Math.PI / 180) * angleDeg; let sepDeg = 0; // 1; //.2; let sepRad = (Math.PI / 180) * sepDeg; // ajustements fins du diagramme data.each(function (d) { if ( d .ancestors() .find( (x) => x.data.id != "sutta" && x.data.id != "kn" && x.data.id != "kp" && x.data.id != "dhp" && x.data.id != "bv" && 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.slice(0, 2) != "dn" && x.data.id.slice(0, 2) != "mn" && x.data.id.slice(0, 2) != "an" && x.data.id.slice(0, 2) != "sn" && x.data.id != "pe" ) && d.height == 1 ) d.children = null; d.height = 0; }); 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 == 2) d.y = heightSN; if (d.depth == 1) d.y = 160; if (d.depth == 2 && !d.data.acro?.includes("DN")) d.y = 400 + 100 + 30; if (d.depth == 0) d.x = (-Math.PI * 1.1 - angleRad) * divisor + 2 * Math.PI; 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.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; if (d.depth == 0) d.x = Math.PI; 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.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.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 = ""; }); // 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.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 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 firstElement = domain.shift(); // domain.push(firstElement); let color = d3.scaleOrdinal(domain); // let colorFaded = d3.scaleOrdinal(domainFaded); // Original domain array // Function to deep clone the array function deepCloneArray(arr) { return JSON.parse(JSON.stringify(arr)); } // Function to shift the array function shiftArray(arr, shiftCount) { let clonedArray = deepCloneArray(arr); for (let i = 0; i < shiftCount; i++) { clonedArray.unshift(clonedArray.pop()); } return clonedArray; } // Example usage let color2 = d3.scaleOrdinal(shiftArray(domain, sd)); let isLeaf = (d) => { // let bool = false; // if (d.height == 0) bool = true; // return bool; return d.height === 0; }; const fade = (color) => { const c = d3.color(color); c.l += 0.25; return c + ""; }; /////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////// Parallels ///////////////////////////// /////////////////////////////////////////////////////////////////////////////////////// // const leavesJSON = []; root.leaves().forEach((leaf, index) => { leaf.data.facro = leaf.data.acro.toLowerCase().replace(/ /g, ""); leaf.data.parallels = [ ...leaveswithfixparallels[index].parallelsInSuttaPtiaka ]; // refeed from the JSON // leavesJSON.push({ ...leaf.data }); // was used to create a JSON to be processed }); root.leaves().forEach((leaf) => { leaf.outgoing = []; leaf.data.parallels.forEach((parallel) => { // console.log("---"); // console.log(leaf); // console.log(parallel); const target = root.find((d) => d.data.facro == parallel); if (target) leaf.outgoing.push([leaf, target]); }); }); // console.log(root.leaves()); // see https://cittadhammo.github.io/parallels/ for how to create leaveswithparallels // let links = []; // root.leaves().forEach((leaf) => { // if (leaf.data.parallels) { // // exculde index page for the moment? // leaf.data.parallels.forEach((parallel) => // links.push({ // source: leaf.data.facro, // target: parallel // }) // ); // } // }); // console.log(links); ////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////// création du diagramme /////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// const svg = d3.create("svg"); const g = svg.append("g").attr("cursor", "grab"); // // // // // // // // append arc category // // // // // // // // // let myColor = (d) => color(d.ancestors().find((ancestor) => ancestor.depth == 1).data.name); const drawRingAround = ( level = 2, radiusCat = 1000, catRadius = 50, fontSize = 10, offAngle = 0 ) => { let leaves = root.leaves(); let currentCategory = leaves[0] .ancestors() .find((ancestor) => ancestor.depth == level).data.name; console.log(currentCategory); let currentColor = myColor( leaves[0].ancestors().find((ancestor) => ancestor.depth == 1) ); let currentFirstX = leaves[0].x; let currentLastX = leaves[0].x; let catArray = []; for (let i = 1; i < leaves.length; i++) { if ( leaves[i].ancestors().find((ancestor) => ancestor.depth == level).data .name !== currentCategory ) { catArray.push({ color: currentColor, name: currentCategory, start: currentFirstX, end: currentLastX }); currentColor = myColor( leaves[i].ancestors().find((ancestor) => ancestor.depth == 1) ); currentCategory = leaves[i] .ancestors() .find((ancestor) => ancestor.depth == level).data.name; currentFirstX = leaves[i].x; } currentLastX = leaves[i].x; } catArray.push({ color: currentColor, name: currentCategory, start: currentFirstX, end: currentLastX }); const catData = catArray.map((d) => { return { color: d.color, text: d.name, startAngle: (d.start / Math.PI) * 180, endAngle: (d.end / Math.PI) * 180 }; }); drawRing(g, { fontSize: fontSize, r: radiusCat + 8, r: radiusCat + 8 + catRadius / 2, innerR: catRadius / 1 - 7, opacity: 0, padAngle: 0, endsPadAngle: -offAngle, opaque: false, //radial: true, cornerRadius: 5, data: catData }); }; // level = 2, // radiusCat = 1000, // catRadius = 50, // fontSize = 10 // offAngle = 0, //drawRingAround(3, 1000 + 50, 20, 5); //drawRingAround(2, 1000, 20, 1); drawRingAround(2, 1030, 20, 8); drawRingAround(1, 1044, 40, 20); //drawRingAround(4, 1165); //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const AH = 2150 * frameRatio, AW = 2150 * frameRatio; g.append("rect") .attr("x", translation / 2 - AW / 2) .attr("y", -AH / 2) .attr("width", AW) .attr("height", AH) .attr("stroke", frame ? "black" : "white") .attr("fill", "transparent"); // paths if (hierarchy) { g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 0.5) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkRadial() .angle((d) => speedRad(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(${speed((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)) ) .attr("fill-opacity", (d) => (d.height == 0 ? 1 : 0)); // 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(${speed((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); }) .attr("fill-opacity", (d) => (isLeaf(d) ? 1 : 0)) .clone(true) .lower() .attr("stroke", "white"); ////////////////////////////////////// bundling ////////////////////// if (bundling) { // const line = d3 // .lineRadial() // .curve(d3.curveBundle.beta(0.85)) // .radius((d) => d.y) // .angle((d) => d.x); const link = svg .append("g") .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", sw) .attr("stroke-opacity", so) .selectAll("path") .data(root.leaves().flatMap((leaf) => leaf.outgoing)) .join("path") .style("mix-blend-mode", "multiply") .style("opacity", so) .attr("d", ([i, o]) => line(i.path(o))) .attr("stroke", (d) => { //console.log(d); //const nodeInRoot = root.find((node) => node.id == d[0].id); return color(oneDepth(d[0])); // color( // d[1].ancestors().find((ancestor) => ancestor.depth == 1).data.name // ) //myColor(root.find((node) => d.depth == 1)) }) // colorisation .each(function (d) { d.path = this; }); } ////////////////////////////////////////////////////// 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 leavesJSON; return svg.attr("viewBox", autoBox).node(); }30: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; } 31: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; } }32: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 }); }33:T5a21,drawRing = (svgOrigin, ringParam) => { const defaultParam = { // Geometry // cx: 0, // Angles are mesured from top like a clock in deg cy: 0, r: 100, innerR: 20, padAngle: 1, // Angle Padding (actually work linear) startPadAngle: null, // used with customD3 old one not used here... endPadAngle: null, // need uncomment at the arc() function padRadius: null, // arcline = padRadius x padAngle (default sqrt(innerRadius * innerRadius + outerRadius * outerRadius)) padLinear: false, // Linear Padding (not used) cornerRadius: 0, // Aspect // radial: false, // Direction of text strokeWidth: 0.6, strokeColor: false, strokeFade: false, fontSize: 12, lineHeight: 0, fontName: "sans-serif", letterSpacing: 0, flipLetters: false, // Upside Down flipLines: false, // Top & Bottom //bold: selectedFont != "Cormorant SC" ? 400 : 700, bottomAdjust: 0, // Line Height topAdjust: 0, // Line height // Coloring // color: "black", fade: 0, fadeLimit: 30, // Turn the background dark and letters white opacity: 1, opacityLimit: 0.8, // same (could have a variable switchColor) darkenFactor: 0, opaque: true, // Add white background behind ring gradientID: false, gradientR: 50, gradientI: 0, gradientX: 50, gradientY: 50, gradientFX: 50, gradientFY: 50, invertGradient: false, // Divisions // div: 1, // |-endsPadAngle-|-1-|-2-|-n-|-4-|-div-|-endsPadAngle-| n: 1, // Segment num gPadAngle: 0, // parallel end-padding for the group (this changes the center of the arc... -_-) needs custom d3 gPadRadius: null, // arcline = padRadius x padAngle (default sqrt(innerRadius * innerRadius + outerRadius * outerRadius)) startGPadAngle: null, endGPadAngle: null, //gR: 0, // carefull padAngle at ends of group still needs padAngle endsPadAngle: 0, // Angle End Padding endsPadLinear: false, // Linear End Padding startRatio: 0, // |sR*L|-1-|-2-|-n-|-4-|-div-|L-eR*L| endRatio: 1, // L : arcLength/square side depends on R and angles padRatio: 0, // |sR*L|-startPadRatio-|-text-|-endPadRatio-|L-eR*L| startPadRatio: false, // padRatio by default endPadRatio: false, // padRatio by default // Square Style // square: false, squareEnds: false, centerRadius: true, // Radius is mesured from origin to center of cells. centerInnerR: true, // Inner Radius is mesured from center of cells. innerSide: false, // length of inner side, overwrite angles and padAngle padSquare: 0, // Padding between div cells tilted: false, // Angle of cells wall (not used) arrowEnd: false, // end in an arrow arrowStart: false, arrowFactor: 1, // Polygone Coloring // polyId: false, // Identify the poly polyPad: 0, // inner Padding polyOpacity: 1, polyFade: 0, polyOpaque: true, centerText: "", up: 0 }; //const d3 = customD3; // customD3old; // Global Constants & function const pi = Math.PI; const dTR = (deg) => (pi / 180) * deg; // deg to rad const rTD = (rad) => (180 / pi) * rad; // rad to deg const modPi = (angle) => angle % (2 * pi); const sin = (x) => Math.sin(x); const cos = (x) => Math.cos(x); const atan = (x) => Math.atan(x); const sqrt = (x) => Math.sqrt(x); // Color Functions const fading = (color, f) => { const { l, c, h } = d3.lch(color); return d3.lch(l + f, c, h); }; const darken = (color, f) => fading(color, -f); // Create Ring const svg = d3.create("svg"); // For Filling Polygone later let arrPoints = []; let d2 = {}; // alternative data point const background = svg.append("g").attr("id", "background"); ringParam.data.forEach((dOrigin, index) => { // d will be our main data element const structuredClone = (val) => JSON.parse(JSON.stringify(val)); const d = structuredClone(dOrigin); // Index for adding text to arc const id = DOM.uid("p-" + d.index); // define local parameter for each data according to priority // d.origin (data) > ring Param > Default Param for (const p in defaultParam) { dOrigin[p] != undefined ? (d[p] = dOrigin[p]) : ringParam[p] != undefined ? (d[p] = ringParam[p]) : (d[p] = defaultParam[p]); } //if (check.includes("outlineOnly")) (d.opacity = 0), (d.polyOpacity = 0); // All to Rad ! d.startAngle = dTR(d.startAngle); d.endAngle = dTR(d.endAngle); d.padAngle = dTR(d.padAngle); d.gPadAngle = dTR(d.gPadAngle); d.startPadAngle = dTR(d.startPadAngle); d.endPadAngle = dTR(d.endPadAngle); d.endsPadAngle = dTR(d.endsPadAngle); // Definition let a = d.startAngle, b = d.endAngle, c = (b - a) / 2; if (d.endsPadLinear) d.endsPadAngle = Math.abs( Math.atan(Math.tan(c) - d.endsPadLinear / d.r) - c ); a = d.startAngle + d.endsPadAngle; b = d.endAngle - d.endsPadAngle; c = (b - a) / 2; let e = (a + b) / 2, R = d.r, Rs = R * cos(c), r = d.innerR, rs = r * cos(c); const div = d.div, n = d.n, polyPad = d.polyPad; // by default d.padRatio d.startPadRatio = d.startPadRatio !== false ? d.startPadRatio : d.padRatio; d.endPadRatio = d.endPadRatio !== false ? d.endPadRatio : d.padRatio; // CenterText if (d.centerText != "") { d.text = ""; d.startAngle = 0; d.endAngle = 0; d.strokeWidth = 0; d.opacity = 0; d.opaque = false; } // with group padding NEEDS CUSTOM D3 let sgp = d.startGPadAngle === null ? d.gPadAngle : dTR(d.startGPadAngle), egp = d.endGPadAngle === null ? d.gPadAngle : dTR(d.endGPadAngle), rp = d.gPadRadius ? d.gPadRadius : sqrt(r * r + R * R); sgp = rp * sin(sgp); egp = rp * sin(egp); const ca = sgp == 0 ? 0 : atan(sin(b - a) / (egp / sgp + cos(b - a))), gr = sgp == 0 ? egp / sin(b - a) : sgp / sin(ca); if (sgp != 0 || egp != 0) (d.cx += gr * sin(a + ca)), (d.cy -= gr * cos(a + ca)), (d.gcx = -d.cx), (d.gcy = -d.cy), (R -= gr); // console.log(d.text, a, ca, R, gr, r, rp, sgp, egp); // OuterSquare if (d.square) { if (d.centerRadius) R = R / cos(c); if (d.innerSide) { Rs = R * cos(c); R = Math.sqrt((d.innerSide * d.innerSide) / 4 + Rs * Rs); a = e - Math.atan(d.innerSide / 2 / Rs); b = e + Math.atan(d.innerSide / 2 / Rs); c = (b - a) / 2; } if (d.centerInnerR) r = r / cos(c); Rs = R * cos(c); rs = r * cos(c); } else { // Calculate angles when division is made const thetaDiv = (b - a) / div, thetaStart = a + (n - 1) * thetaDiv, thetaEnd = a + n * thetaDiv; a = thetaStart; b = thetaEnd; c = (b - a) / 2; e = (a + b) / 2; } // At the bottom ? e = modPi(e); const atBottom = e > pi / 2 && e < (3 * pi) / 2, atLeft = e > pi && e < 2 * pi; // Start drawing here const g = svg .append("g") .attr("class", "arcLabel") .attr("transform", `translate(${d.cx}, ${d.cy})`); // Gradient // //Append a defs (for definition) element to your SVG const defs = g.append("defs"); // //Append a radialGradient element to the defs and give it a unique id // const radialGradient = defs // .append("radialGradient") // .attr("id", "radial-gradient-" + d.gradientID) // .attr("cx", d.gradientX + "%") //The x-center of the gradient // .attr("cy", d.gradientY + "%") //The y-center of the gradient // .attr("r", d.gradientR + "%"); //The radius of the gradient // if (d.gradientFX) radialGradient.attr("fx", d.gradientFX + "%"); //The x-center of the gradient // if (d.gradientFY) radialGradient.attr("fy", d.gradientFY + "%"); //The x-center of the gradient // //Add colors to make the gradient // radialGradient // .append("stop") // .attr("offset", d.gradientI + "%") // .attr( // "stop-color", // d.invertGradient ? fading(d.color, d.fade) : "#FFFFFF" // ); // radialGradient // .append("stop") // .attr("offset", "100%") // .attr( // "stop-color", // d.invertGradient ? "#FFFFFF" : fading(d.color, d.fade) // ); //radialGradient.attr("circle at 10%"); // SQUARE SHAPE // // Square Calculation (y axis is inverted & angle start at the top !) const OA00x = R * sin(a), OA00y = R * -cos(a), OAddx = R * sin(b), OAddy = R * -cos(b), OB00x = (R + r) * sin(a), OB00y = (R + r) * -cos(a), OBddx = (R + r) * sin(b), OBddy = (R + r) * -cos(b); const OA0x = OA00x + (d.startRatio + d.padAngle + d.startPadRatio) * (OAddx - OA00x), OA0y = OA00y + (d.startRatio + d.padAngle + d.startPadRatio) * (OAddy - OA00y), OAdx = OA00x + (d.endRatio - d.padAngle - d.endPadRatio) * (OAddx - OA00x), OAdy = OA00y + (d.endRatio - d.padAngle - d.endPadRatio) * (OAddy - OA00y); const OA0xP = (R - polyPad) * sin(a), OA0yP = (R - polyPad) * cos(a), OAdxP = (R - polyPad) * sin(b), OAdyP = (R - polyPad) * cos(b); const OAix = (i) => (1 - i / div) * OA0x + (i / div) * OAdx, OAiy = (i) => (1 - i / div) * OA0y + (i / div) * OAdy, OAixP = (i) => (1 - i / div) * OA0xP + (i / div) * OAdxP, OAiyP = (i) => (1 - i / div) * OA0yP + (i / div) * OAdyP; const OB0tx = OA0x + OB00x - OA00x, OB0ty = OA0y + OB00y - OA00y, OB0txP = OA0xP + OB00x - OA00x, OB0tyP = OA0yP + OB00y - OA00y, OBdtx = OAdx + OBddx - OAddx, OBdty = OAdy + OBddy - OAddy; const OBix = (i) => (1 - i / div) * OB0tx + (i / div) * OBdtx, OBiy = (i) => (1 - i / div) * OB0ty + (i / div) * OBdty, A0B0x = (1 / 2) * (OB0tx - OA0x + OBdtx - OAdx), A0B0y = (1 / 2) * (OB0ty - OA0y + OBdty - OAdy), A0A1x = OAix(1) - OA0x, A0A1y = OAiy(1) - OA0y, px = (A0A1x * d.padSquare) / 100, py = (A0A1y * d.padSquare) / 100; if (d.square) { // Square Path g.append("path") .attr("display", d.square ? "" : "none") .attr( "d", //d3.line().curve(d3.curveCardinalClosed.tension(0.8))([ d3.line().curve(d3.curveLinearClosed)([ // first point n <= 1 ? [OAix(n - 1), OAiy(n - 1)] : [OAix(n - 1) + px, OAiy(n - 1) + py], // second start arrow point d.squareEnds || d.arrowStart ? [ OAix(n - 1) + (1 / 2) * A0B0x - (1 / 2) * A0B0y * (d.arrowStart ? 1 : 0) * d.arrowFactor + px * (n <= 1 ? 0 : 1), OAiy(n - 1) + (1 / 2) * A0B0y + (1 / 2) * A0B0x * (d.arrowStart ? 1 : 0) * d.arrowFactor + py * (n <= 1 ? 0 : 1) ] : n <= 1 // copy of first point ? [OAix(n - 1), OAiy(n - 1)] : [OAix(n - 1) + px, OAiy(n - 1) + py], // third point n <= 1 ? d.squareEnds || d.arrowStart ? [OAix(n - 1) + A0B0x, OAiy(n - 1) + A0B0y] : [OB0tx, OB0ty] : [OAix(n - 1) + A0B0x + px, OAiy(n - 1) + A0B0y + py], // fourth point n == div ? d.squareEnds || d.arrowEnd ? [OAix(n) + A0B0x, OAiy(n) + A0B0y] : [OBdtx, OBdty] : [OAix(n) + A0B0x - px, OAiy(n) + A0B0y - py], // fifth end arrow point d.squareEnds || d.arrowEnd ? [ OAix(n) + (1 / 2) * A0B0x - (1 / 2) * A0B0y * (d.arrowEnd ? 1 : 0) * d.arrowFactor - px * (n == div ? 0 : 1), OAiy(n) + (1 / 2) * A0B0y + (1 / 2) * A0B0x * (d.arrowEnd ? 1 : 0) * d.arrowFactor - py * (n == div ? 0 : 1) ] : n == div // copy of fourth point ? [OAix(n), OAiy(n)] : [OAix(n) - px, OAiy(n) - py], // sixth point n == div ? [OAix(n), OAiy(n)] : [OAix(n) - px, OAiy(n) - py] ]) ) .style("stroke", d.stokeColor ? d.strokeColor : d.color) .style("stroke-width", d.strokeWidth) .style("fill", fading(d.color, d.fade)) .style("fill-opacity", d.opacity) .clone() .lower() .style("fill", d.opaque ? "white" : "") .style("fill-opacity", d.opaque ? 1 : 0); } // fill polygone if ( d.polyId != d2.polyId || (index == ringParam.data.length - 1 && d.polyId) ) { if (index == ringParam.data.length - 1 && d.polyId) arrPoints.push([OAixP(1), OAiyP(1)]); // Gradient // //Append a radialGradient element to the defs and give it a unique id // const radialGradient = defs // .append("radialGradient") // .attr("id", "radial-gradient-" + d2.gradientID) // .attr("cx", d2.gradientX + "%") //The x-center of the gradient // .attr("cy", d2.gradientY + "%") //The y-center of the gradient // .attr("r", d2.gradientR + "%"); //The radius of the gradient // //Add colors to make the gradient // radialGradient // .append("stop") // .attr("offset", d2.gradientI + "%") // .attr("stop-color", d2.invertGradient ? d2.color : "#FFFFFF"); // radialGradient // .append("stop") // .attr("offset", "100%") // .attr("stop-color", d2.invertGradient ? "#FFFFFF" : d2.color); // background // .append("g") // .append("path") // .attr("transform", `translate(${d2.cx}, ${d2.cy}) rotate(180)`) // .attr("d", d3.line().curve(d3.curveLinearClosed)(arrPoints)) // .style("stroke", d2.color) // .style("stroke-width", d2.strokeWidth) // .style( // "fill", // d2.gradientID // ? "url(#radial-gradient-" + d2.gradientID + ")" // : fading(d2.color, d2.polyFade) // ) // .style("fill-opacity", d2.polyOpacity) // .clone() // .lower() // .style("fill", d2.polyOpaque ? "white" : "") // .style("fill-opacity", d2.polyOpaque ? 1 : 0); arrPoints = []; } // arrPoints.push([OB0txP, OB0tyP]); // outside of polygone arrPoints.push([OAixP(1), OAiyP(1)]); for (const p in d) { d2[p] = d[p]; } // Adding Center Text for polygone const centerText = g .append("text") .style("font-weight", d.bold) .style("fill", darken(d.color, d.darkenFactor)) //.style("fill", check.includes("outlineOnly") ? black : "white") .attr("font-family", d.fontName) .attr("font-size", d.fontSize); const titleLines = d.centerText.split("//"); if (titleLines.length == 1) // one line break centerText .text(d.centerText) .attr("text-anchor", "middle") .attr("dy", -d.up + "em"); if (titleLines.length == 2) // one line break centerText .text(titleLines[0]) .attr("text-anchor", "middle") .attr("dy", "-0.8" - d.up + "em") .clone(true) .text(titleLines[1]) .attr("dy", "0.6" - d.up + "em"); if (titleLines.length == 3) // two line breaks centerText .text(titleLines[0]) .attr("text-anchor", "middle") .attr("dy", -1.2 - d.up + "em") .clone(true) .text(titleLines[1]) .attr("dy", 0.1 - d.up + "em") .clone(true) .text(titleLines[2]) .attr("dy", 1.4 - d.up + "em"); // Function that split lines and add spacing const lines = d.text?.split("//"); const numberOfLines = lines?.length; const line = (d, n) => numberOfLines > 1 ? lines[n - 1].split("").join("\u200A".repeat(d.letterSpacing)) : d.text?.split("").join("\u200A".repeat(d.letterSpacing)); // Arc // // Arc (!square) cases where lines needs: // - flipping: radial && !atLeft // - reverse path: !radial && atBottom // - lower dy: !radial && atBottom if (!d.square) { g.append("path") .style( "stroke", d.strokeColor ? d.strokeFade ? fading(d.strokeColor, d.strokeFade) : d.strokeColor : d.strokeFade ? fading(d.color, d.strokeFade) : d.color ) .style("stroke-width", d.strokeWidth) // .style("fill", fading(d.color, d.fade)) .style( "fill", d.gradientID ? "url(#radial-gradient-" + d.gradientID + ")" : fading(d.color, d.fade) ) .style("fill-opacity", d.opacity) .attr( "d", d3 .arc() .innerRadius(R) .outerRadius(R + r) //.altCX(d.gcx) //.altCY(d.gcy) //.gR(gr) .padAngle(d.padAngle) // .startPadAngle(d.startPadAngle) // old custom // .endPadAngle(d.endPadAngle) .startAngle(a) .endAngle(b) .cornerRadius(d.cornerRadius) .padRadius(d.padRadius) ) .clone() .lower() .style("fill", d.opaque ? "white" : "") .style("fill-opacity", d.opaque ? 1 : 0); if (!d.radial) { // If Arc not radial // Adding Arc path for text g.append("path") .attr("id", id) .style("fill", "none") .attr("d", () => { const context = d3.path(); context.arc( 0, 0, R, (atBottom ? b : a) - pi / 2, (atBottom ? a : b) - pi / 2, atBottom ); return context.toString(); }); g.append("text") .style( "fill", d.opacity < d.opacityLimit || d.fade > d.fadeLimit ? darken(d.color, d.opacity * d.darkenFactor) : "white" ) .style("font-size", d.fontSize) .style("font-weight", d.bold ? d.bold : "normal") .attr("font-family", d.fontName) .attr("dy", (d.innerR / 2) * (atBottom ? +1 : -0.9)) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines == 1 ? line(d, 1) : "") .select(function () { return this.parentNode; }) .clone() .attr( "dy", (d.innerR / 2) * (atBottom ? +0.7 + d.bottomAdjust : -1.3 + d.topAdjust) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines > 1 ? line(d, 1) : "") .select(function () { return this.parentNode; }) .clone() .attr( "dy", (d.innerR / 2) * (atBottom ? +1.5 + d.topAdjust : -0.55 + d.bottomAdjust) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines > 1 ? line(d, 2) : ""); } } // Square Style or Radial if (d.radial || d.square) { function labelTransform(d, twoLines = 0) { // 0 middle, 1 up, 2 down // For arc radial transform const f = modPi(e - pi / 2); // clockwise from base const df = c / 3; const f2 = twoLines == 0 // Middle Line ? f : twoLines == 1 // Top Line ? d.flipLines ^ !atLeft ^ atBottom ^ (atBottom && !atLeft) // sorry for that but I have no time to think about it, it works ? f + df : f - df : d.flipLines ^ !atLeft ^ atBottom ^ (atBottom && !atLeft) // Bottom Line ? f - df : f + df; // For square transformations const cornerX = OAix(n - 1); const cornerY = OAiy(n - 1); const halfWayX = d.radial ? twoLines == 0 // Middle line ? (OAix(1) - OAix(0)) / 2 : twoLines == 1 // Top Line ? ((OAix(1) - OAix(0)) * 4) / 6 : ((OAix(1) - OAix(0)) * 2) / 6 : (OAix(1) - OAix(0)) / 2; const halfWayY = d.radial ? twoLines == 0 ? (OAiy(1) - OAiy(0)) / 2 : twoLines == 1 ? ((OAiy(1) - OAiy(0)) * 4) / 6 : ((OAiy(1) - OAiy(0)) * 2) / 6 : (OAiy(1) - OAiy(0)) / 2; const heightLineX = d.radial ? A0B0x / 2 : twoLines == 0 // Middle line ? A0B0x / (atBottom ? 1.8 : 2.2) : twoLines == 1 // Top Line ? (A0B0x * 4) / 6 : (A0B0x * 2) / 6; // Bottom Line const heightLineY = d.radial ? A0B0y / 2 : twoLines == 0 ? A0B0y / (atBottom ? 1.8 : 2.2) : twoLines == 1 ? (A0B0y * 4) / 6 : (A0B0y * 2) / 6; return d.square ? `translate(${cornerX + halfWayX + heightLineX}, ${cornerY + halfWayY + heightLineY} ) rotate( ${ rTD(f) + (d.flipLetters ? 180 : 0) + (d.radial ? 0 : 90) + (atBottom ? 180 : 0) + (atLeft && d.radial ? 180 : 0) } )` : `rotate(${rTD(f2)}) translate(${R + r / 2},0) rotate(${ (d.flipLetters ? 180 : 0) + atLeft ? 180 : 0 // arc radial })`; } const topLine = !d.flipLines ^ (!d.radial && atBottom) ^ (d.radial && !atLeft); // square cases where needs flipping // square && !radial && atBottom // square && radial && !atLeft g.append("text") .style( "fill", d.opacity < d.opacityLimit || d.fade > d.fadeLimit ? darken(d.color, d.opacity * d.darkenFactor) : "white" ) .style("font-size", d.fontSize) .style("font-weight", d.bold ? d.bold : "normal") .attr("font-family", d.fontName) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .text(line(d, topLine ? 1 : 2)) .attr( "transform", numberOfLines > 1 ? labelTransform(d, 1) : labelTransform(d, 0) ) .clone() .text(numberOfLines > 1 ? line(d, topLine ? 2 : 1) : "") .attr("transform", labelTransform(d, 2)); } }); const svgRing = svg.node().innerHTML; svgOrigin.append("g").html(svgRing); }34:[{"id":"6ccb0977f54213c59d7d965b83022cd30c8338b944357ae7bc7b1ce588b7799b2f8ceef45c99f814170b0f6dc1f16445c0bf7abf5f58664696cc949f60f807d6","href":"https://static.observableusercontent.com/files/6ccb0977f54213c59d7d965b83022cd30c8338b944357ae7bc7b1ce588b7799b2f8ceef45c99f814170b0f6dc1f16445c0bf7abf5f58664696cc949f60f807d6","name":"88x31.png","type":"image/png","lastModified":1713618410829.345,"size":997},{"id":"ee7bc8fe405b3174c17f9b72804d4cd662b2cb3ce37991f82231a5506ac8218371a4dcd91678279aee2f7c0b463115d235d0b7c136dbe7fcf6913b289f8ec396","href":"https://static.observableusercontent.com/files/ee7bc8fe405b3174c17f9b72804d4cd662b2cb3ce37991f82231a5506ac8218371a4dcd91678279aee2f7c0b463115d235d0b7c136dbe7fcf6913b289f8ec396","name":"cc0gris@3.svg","type":"image/svg+xml","lastModified":1713618410829.345,"size":9683},{"id":"9a5af7590a65a76c9175b836760ab80721483325428b1f5adecefe262f8ebbadd5d73803269c858b46e2ad16e10925f4bacde3cc2961953eca3d35f446abdc09","href":"https://static.observableusercontent.com/files/9a5af7590a65a76c9175b836760ab80721483325428b1f5adecefe262f8ebbadd5d73803269c858b46e2ad16e10925f4bacde3cc2961953eca3d35f446abdc09","name":"cc-zero.svg","type":"image/svg+xml","lastModified":1713618410829.345,"size":8981},{"id":"2358111e71c548a01716c64c7afeea3a66faceba14f9ceac7a03ed73ea2e7a0163427ccd3881e48407d3cd05b2cdd03885c4a28d9ed9c9a476b318808234f144","href":"https://static.observableusercontent.com/files/2358111e71c548a01716c64c7afeea3a66faceba14f9ceac7a03ed73ea2e7a0163427ccd3881e48407d3cd05b2cdd03885c4a28d9ed9c9a476b318808234f144","name":"leavesWithParallels.json","type":"application/json","lastModified":1713709779347.795,"size":415135},{"id":"b6684a857d8bac4f2e7b5b8d8a255e6ad6ccfe8e67b641438f15f12ace8708d6c483d974e9c001f1f63f4b2741d340f19dcaf2e44b9002694da800125167da1a","href":"https://static.observableusercontent.com/files/b6684a857d8bac4f2e7b5b8d8a255e6ad6ccfe8e67b641438f15f12ace8708d6c483d974e9c001f1f63f4b2741d340f19dcaf2e44b9002694da800125167da1a","name":"leavesWithFixParallels.json","type":"application/json","lastModified":1713719848879.883,"size":569403}] 2d:{"title":"SuttaPitaka Parralels","cells":[{"id":1,"value":"md`# SuttaPitaka Parralels\n- Website: [www.dhammacharts.org](https://www.dhammacharts.org/)\n- See https://cittadhammo.github.io/parallels/ for how the data was processed\n\n#### Sources\n- 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\n\n#### License\n- [CC0 Public Domain](https://creativecommons.org/publicdomain/zero/1.0/)`","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: 5\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: 13\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([0, 2], {\n label: \"Frame Size\",\n step: 0.01,\n value: 1.05\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":2748,"value":"viewof hierarchy = Inputs.toggle({ label: \"Include hierarchy\", 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":2436,"value":"viewof nf = Inputs.range([1, 10], { label: \"n factor\", step: 1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2458,"value":"viewof times = Inputs.radio([1, 10], { label: \"n times\", value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2446,"value":"viewof a = Inputs.range([0, 2], { label: \"a factor\", step: 0.1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"viewof b = Inputs.range([0, 2], { label: \"b factor\", step: 0.1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2604,"value":"viewof bundling = Inputs.toggle({ label: \"Bundling\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1714,"value":"xLicense = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"yLicense = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1726,"value":"fLicense = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"parallelsFiltered = parallels.map((d) =>\n d.parallels?.map((p) => p.split(\"#\")[0].replace(/~/g, \"\"))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2601,"value":"leaveswithparallels = FileAttachment(\"leavesWithParallels.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2617,"value":"leaveswithfixparallels = FileAttachment(\"leavesWithFixParallels.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2528,"value":"parallels = fetch(\n \"https://raw.githubusercontent.com/suttacentral/sc-data/main/relationship/parallels.json\"\n).then((response) => response.json())","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":1631,"value":"// chart2.attr(\"viewBox\", autoBox).node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"$30","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":"$31","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":2414,"value":"data.children","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"data = {\n return d3.stratify()(suttapitakatreefull);\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\"\nimport { suttapitakatreefull } 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":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2634,"value":"line = d3\n .lineRadial()\n .curve(d3.curveBundle)\n .radius((d) => d.y)\n .angle((d) => d.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2632,"value":"function path([source, target]) {\n const p = new Path();\n line.context(p)(source.path(target));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2608,"value":"class Path {\n constructor(_) {\n this._ = _;\n this._m = undefined;\n }\n moveTo(x, y) {\n this._ = [];\n this._m = [x, y];\n }\n lineTo(x, y) {\n this._.push(new Line(this._m, (this._m = [x, y])));\n }\n bezierCurveTo(ax, ay, bx, by, x, y) {\n this._.push(\n new BezierCurve(this._m, [ax, ay], [bx, by], (this._m = [x, y]))\n );\n }\n *split(k = 0) {\n const n = this._.length;\n const i = Math.floor(n / 2);\n const j = Math.ceil(n / 2);\n const a = new Path(this._.slice(0, i));\n const b = new Path(this._.slice(j));\n if (i !== j) {\n const [ab, ba] = this._[i].split();\n a._.push(ab);\n b._.unshift(ba);\n }\n if (k > 1) {\n yield* a.split(k - 1);\n yield* b.split(k - 1);\n } else {\n yield a;\n yield b;\n }\n }\n toString() {\n return this._.join(\"\");\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2613,"value":"class Line {\n constructor(a, b) {\n this.a = a;\n this.b = b;\n }\n split() {\n const { a, b } = this;\n const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n return [new Line(a, m), new Line(m, b)];\n }\n toString() {\n return `M${this.a}L${this.b}`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2611,"value":"BezierCurve = {\n const l1 = [4 / 8, 4 / 8, 0 / 8, 0 / 8];\n const l2 = [2 / 8, 4 / 8, 2 / 8, 0 / 8];\n const l3 = [1 / 8, 3 / 8, 3 / 8, 1 / 8];\n const r1 = [0 / 8, 2 / 8, 4 / 8, 2 / 8];\n const r2 = [0 / 8, 0 / 8, 4 / 8, 4 / 8];\n\n function dot([ka, kb, kc, kd], { a, b, c, d }) {\n return [\n ka * a[0] + kb * b[0] + kc * c[0] + kd * d[0],\n ka * a[1] + kb * b[1] + kc * c[1] + kd * d[1]\n ];\n }\n\n return class BezierCurve {\n constructor(a, b, c, d) {\n this.a = a;\n this.b = b;\n this.c = c;\n this.d = d;\n }\n split() {\n const m = dot(l3, this);\n return [\n new BezierCurve(this.a, dot(l1, this), dot(l2, this), m),\n new BezierCurve(m, dot(r1, this), dot(r2, this), this.d)\n ];\n }\n toString() {\n return `M${this.a}C${this.b},${this.c},${this.d}`;\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2652,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2511,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}