2f:T807,chart = { // const svg = d3 // .select(DOM.svg(w, h)) // .attr("viewBox", `${-w / 2} ${-h / 2} ${w} ${h}`) // .style("width", "100%") // .style("height", "auto") // .style("font", "10px sans-serif"); const svg = d3 .create("svg") .attr("viewBox", [(zoom * -w) / 2, (zoom * -w) / 2, zoom * w, zoom * w]); const fontName = "Cormorant SC"; GFontToDataURI( "https://fonts.googleapis.com/css2?family=Cormorant SC&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); d3.select("svg") .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); // const g = svg.append("g").attr("transform", `translate(${w / 2}, ${h / 2})`); // const g = svg.append("g").attr("font-family", "Cormorant SC"); let i = 0; const text = svg .append("text") .style("font-weight", "bold") .style("fill", darkMode ? "grey" : "black") .attr("font-family", "Cormorant SC") .attr("font-size", 33) .attr("text-anchor", "middle") .text("31 Planes") .attr("dy", "-.8em") .clone() .text("of") .attr("font-size", 23) .attr("dy", "0.15em") .clone() .text("Existence") .attr("font-size", 33) .attr("dy", "1.2em"); drawRing(svg, ringCat); drawRing(svg, ringPlanes); drawRing(svg, ringNum); drawRing(svg, ringJhana); drawRing(svg, ringSmallDiv); drawRing(svg, ringDestruction); drawRing(svg, ringPlanesBackground); drawRing(svg, ringNames); const g = svg.append("g"); g.append("g") .selectAll("path") .data(formattedData) .enter() .append("path") .attr("d", arc) // .style("fill", fill) // .style("stroke", stroke) .style("fill", (d) => { i++; return colorRealms(d.num); }) .style("stroke-width", strokeWidth); // g.append("g").call(xAxis); // g.append("g").call(xAxis1); g.append("g").call(yAxis); return svg.node(); }30:T5c5,ringSmallDiv = ({ r: outerR + 212, innerR: 40, padAngle: 0.3, fontSize: 23, fade: 10, opacity: 0.8, data: [ { text: pali ? "Satya Lokas" : "Satya Lokas", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (14 + 12), endAngle: (360 / (30 + 16)) * (14 + 21), letterSpace: 0 }, { text: pali ? "Bratphala" : "Bratphala", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (14 + 21), endAngle: (360 / (30 + 16)) * (14 + 23), letterSpace: 0 }, { text: pali ? "Suddhavasa Lokas" : "Pure Abodes", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (14 + 23), endAngle: (360 / (30 + 16)) * (14 + 28), letterSpace: 0 }, { text: "1st", color: colorImaterial, startAngle: (360 / (30 + 16)) * (14 + 28), endAngle: (360 / (30 + 16)) * (14 + 29), letterSpace: 0 }, { text: "2nd", color: colorImaterial, startAngle: (360 / (30 + 16)) * (14 + 29), endAngle: (360 / (30 + 16)) * (14 + 30), letterSpace: 0 }, { text: "3rd", color: colorImaterial, startAngle: (360 / (30 + 16)) * (14 + 30), endAngle: (360 / (30 + 16)) * (14 + 31), letterSpace: 0 }, { text: "4th", color: colorImaterial, startAngle: (360 / (30 + 16)) * (14 + 31), endAngle: (360 / (30 + 16)) * (14 + 32), letterSpace: 0 } ] })31:T627,ringJhana = ({ r: outerR + 257, innerR: 40, padAngle: 0.3, fontSize: 23, fade: 5, opacity: 0.9, data: [ { text: pali ? "Divya Lokas" : "Divya Lokas", color: colorMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 1), endAngle: (360 / (30 + 16)) * (16 + 3 + 7), letterSpace: 10 }, { text: pali ? "Paṭhamaṃ jhāna" : "1st Rūpa Jhāna", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3), letterSpace: 0 }, { text: pali ? "Dutiyaṃ jhāna" : "2nd Rūpa Jhāna", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3), letterSpace: 0 }, { text: pali ? "Tatiyaṃ jhāna" : "3rd Rūpa Jhāna", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3 + 3), letterSpace: 0 }, { text: pali ? "Catutthaṃ jhāna" : "4th Rūpa Jhāna", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3 + 3), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3 + 3 + 7), letterSpace: 0 }, { text: pali ? "Arūpa jhāna" : "Arūpa Jhāna", color: colorImaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3 + 3 + 7), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 3 + 3 + 3 + 7 + 4), letterSpace: 0 } ] })32:T79e,ringCat = ({ r: outerR + 346, innerR: 50, padAngle: 0.27, fontSize: 25, fade: 0, opacity: 1, data: [ { text: "1", color: colorDepravation, startAngle: 0, endAngle: (360 / (30 + 16)) * 16, letterSpace: 30, r: outerR + 302, innerR: 40, adjust: 7 }, { text: pali ? "Ata Mahā Unusum Niraya" : "Cold Hells", color: colorCold, startAngle: 0, endAngle: ((360 / (30 + 16)) * 16) / 2, letterSpace: pali ? 0 : 30, r: outerR + 257, innerR: 40, padAngle: 0.3, fontSize: 23, fade: 10, opacity: 0.8, adjust: 5 }, { text: pali ? "Ata Mahā Sithala Niraya" : "Hot Hells", color: colorHot, startAngle: ((360 / (30 + 16)) * 16) / 2, endAngle: (360 / (30 + 16)) * 16, letterSpace: pali ? 0 : 30, r: outerR + 257, innerR: 40, padAngle: 0.3, fontSize: 23, fade: 10, opacity: 0.8, flipLetters: true, adjust: 5 }, { text: pali ? "Kāmaduggati Bhūmi (Apāya)" : "Depravation Realms", color: colorDepravation, startAngle: 0, endAngle: (360 / (30 + 16)) * (16 + 3), letterSpace: pali ? 20 : 30 }, { text: pali ? "Kāmasugati Bhūmi" : "Sensuous Realms", color: colorMaterial, startAngle: (360 / (30 + 16)) * (16 + 3), endAngle: (360 / (30 + 16)) * (16 + 3 + 7), letterSpace: 5 }, { text: pali ? "Rūpadhatu-Loka" : "Fine-Material Realms", color: colorFineMaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 16), letterSpace: 10 }, { text: pali ? "Arūpadhatu-Loka" : "Immaterial Realms", color: colorImaterial, startAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 16), endAngle: (360 / (30 + 16)) * (16 + 3 + 7 + 16 + 4), letterSpace: 2 } ] })33:T22a2,// Function that create a HTML layer arc of multile labels with options. // data contains the angles, text, font-size & letter-spacing... drawRing = (svgOrigin, ring) => { // Deconstruct object param const { cx = 0, cy = 0, r = 100, innerR = 20, padAngle = 1, color = "black", data, strokeWidth = 1, fontSize = 12, fontName = "Cormorant SC", letterSpace = 0, fade = 0, fadeLimit = 60, opacity = 1, opacityLimit = 0.5, bold = true, darkenFactor = 0, radial = false, div = 1, // for division of the ring n = 1, // at each n section off = 0 } = ring; // Global Constants const darkMode = false; const halfPI = Math.PI / 2; // Color Functions const fading = (color, f) => { const { l, c, h } = d3.lch(color); return d3.lch(l + f, c, h); }; const darken = (color, f) => { const { l, c, h } = d3.lch(color); return d3.lch(l - f, c, h); }; // Function to konw if we are at the bottom const atBottom = (d) => { const middle = ((Math.PI / 180) * d.startAngle - halfPI + (Math.PI / 180) * d.endAngle - halfPI) / 2; const bottom = middle >= 0 && middle < Math.PI; return bottom ^ d.flipLetters; // XOR }; // Define parameters if global or local in data const dFlipLetters = (d) => d.flipLetters != undefined ? d.flipLetters : false; const dColor = (d) => (d.color != undefined ? d.color : color); const dLetterSpace = (d) => d.letterSpace != undefined ? d.letterSpace : letterSpace; const dStrokeWidth = (d) => d.strokeWidth != undefined ? d.strokeWidth : strokeWidth; const dFade = (d) => (d.fade != undefined ? d.fade : fade); const dOpacity = (d) => (d.opacity != undefined ? d.opacity : opacity); const dRadial = (d) => (d.radial != undefined ? d.radial : radial); const dDarkenFactor = (d) => d.darkenFactor != undefined ? d.darkenFactor : darkenFactor; const dAdjust = (d) => (d.adjust != undefined ? d.adjust : 0); const dBottomAdjust = (d) => d.bottomAdjust != undefined ? d.bottomAdjust : 0; const dTopAdjust = (d) => (d.topAdjust != undefined ? d.topAdjust : 0); const dDiv = (d) => (d.div != undefined ? d.div : div); const dN = (d) => (d.n != undefined ? d.n : n); const dOff = (d) => (d.off != undefined ? d.off : off); const dInnerR = (d) => (d.innerR != undefined ? d.innerR : innerR); const dR = (d) => (d.r != undefined ? d.r : r); // calculate angles when division is made const thetaDiv = (d) => (d.endAngle - d.startAngle - 2 * dOff(d)) / dDiv(d); const newData = data.map((d) => { const thetaStart = d.startAngle + dOff(d) + (dN(d) - 1) * thetaDiv(d); const thetaEnd = d.startAngle + dOff(d) + dN(d) * thetaDiv(d); return { ...d, startAngle: thetaStart, endAngle: thetaEnd }; }); // Create Ring const svg = d3.create("svg"); const arc = d3 .arc() .innerRadius((d) => dR(d)) .outerRadius((d) => dR(d) + dInnerR(d)) .padAngle((Math.PI / 180) * padAngle) .startAngle((d) => { return (Math.PI / 180) * d.startAngle; }) .endAngle((d) => (Math.PI / 180) * d.endAngle); const enter = (enter) => { // Move to center const g = enter .append("g") .attr("class", "arcLabel") .attr("transform", `translate(${cx}, ${cy})`); // Create Arc and fill g.append("path") .attr("id", (d) => d.uid.id) .style("fill", "none") .attr("d", (d) => { const context = d3.path(); if (atBottom(d)) { context.arc( 0, 0, dR(d), (Math.PI / 180) * d.endAngle - halfPI, (Math.PI / 180) * d.startAngle - halfPI, true ); } else { context.arc( 0, 0, dR(d), (Math.PI / 180) * d.startAngle - halfPI, (Math.PI / 180) * d.endAngle - halfPI, false ); } return context.toString(); }); g.append("path") .style("stroke", (d) => dColor(d)) .style("stroke-width", (d) => dStrokeWidth(d)) .style("fill", (d) => fading(dColor(d), dFade(d))) .style("fill-opacity", (d) => !darkMode ? dOpacity(d) : dOpacity(d) > opacityLimit ? dOpacity(d) : 0 ) .attr("d", (d) => arc(d)); // Create Text // If radial function labelTransform(d, twoLines = 0) { const x = (d.endAngle + d.startAngle) / 2 - 90; const dx = dRadial(d) ? (d.endAngle - d.startAngle) / 6 : 0; const angle = twoLines == 0 ? x : twoLines == 1 ? x + dx : x - dx; return `rotate(${angle}) translate(${dR(d) + dInnerR(d) / 2},0) rotate(${ angle < 180 - 90 ? 0 : 180 })`; } g.append("text") .style("fill", (d) => dOpacity(d) < opacityLimit || dFade(d) > fadeLimit ? darken(dColor(d), dOpacity(d) * dDarkenFactor(d)) : "white" ) .style("font-size", (d) => (d.fontSize ? d.fontSize : fontSize)) .style("font-weight", bold ? "bold" : "normal") .attr("font-family", fontName) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .text((d) => { let rawText = d.text; if (!rawText.includes("\\n")) { return dLetterSpace(d) ? rawText.split("").join("\u200A".repeat(dLetterSpace(d))) : rawText; } else { let arrText = rawText.split("\\n"); return dLetterSpace(d) ? arrText[0].split("").join("\u200A".repeat(dLetterSpace(d))) : arrText[0]; } }) .attr("transform", (d) => d.text.includes("\\n") ? labelTransform(d, 1) : labelTransform(d, 0) ) .attr("display", (d) => (dRadial(d) ? "true" : "none")) .clone() .text((d) => { let rawText = d.text; if (rawText.includes("\\n")) { let arrText = rawText.split("\\n"); return dLetterSpace(d) ? arrText[1].split("").join("\u200A".repeat(dLetterSpace(d))) : arrText[1]; } }) .attr("transform", (d) => labelTransform(d, 2)); // If not radial g.append("text") .style("fill", (d) => dOpacity(d) < opacityLimit || dFade(d) > fadeLimit ? darken(dColor(d), dOpacity(d) * dDarkenFactor(d)) : darkMode ? "black" : "white" ) .style("font-size", (d) => (d.fontSize ? d.fontSize : fontSize)) .style("font-weight", bold ? "bold" : "normal") .attr("font-family", fontName) .attr("dy", (d) => (innerR / 2) * (atBottom(d) ? +1 : -0.9) + dAdjust(d)) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) .text((d) => { let rawText = d.text; if (!rawText.includes("\n")) { return dLetterSpace(d) ? rawText.split("").join("\u200A".repeat(dLetterSpace(d))) : rawText; } }) .select(function () { return this.parentNode; }) .attr("display", (d) => (dRadial(d) ? "none" : "true")) // In case of \n in text (This could be improved with less duplication with the if statement) .clone() .attr( "dy", (d) => (dInnerR(d) / 2) * (atBottom(d) ? +0.7 + dBottomAdjust(d) : -1.3 + dTopAdjust(d)) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) .text((d) => { let rawText = d.text; if (rawText.includes("\n")) { let arrText = rawText.split("\n"); return dLetterSpace(d) ? arrText[0].split("").join("\u200A".repeat(dLetterSpace(d))) : arrText[0]; } }) .select(function () { return this.parentNode; }) .attr("display", (d) => (dRadial(d) ? "none" : "true")) .clone() .attr( "dy", (d) => (dInnerR(d) / 2) * (atBottom(d) ? +1.5 + dTopAdjust(d) : -0.55 + dBottomAdjust(d)) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) .text((d) => { let rawText = d.text; if (rawText.includes("\n")) { let arrText = rawText.split("\n"); return dLetterSpace(d) ? arrText[1].split("").join("\u200A".repeat(dLetterSpace(d))) : arrText[1]; } }) .attr("display", (d) => (dRadial(d) ? "none" : "true")); }; newData.forEach((d) => (d.uid = DOM.uid("p-" + d.index))); svg.selectAll("g.arcLabel").data(newData).join(enter); const svgRing = svg.node().innerHTML; svgOrigin.append("g").html(svgRing); }34:T4ad,xAxis1 = (g) => { let i = 0; g.attr("text-anchor", "start").call((g) => g .selectAll("g") .data(formattedData) .join("g") .attr( "transform", (d) => ` rotate(${ ((x(d[xAccessor]) + x.bandwidth() / 2) * 180) / Math.PI - 90 }) translate(${outerR + 90},0) ` ) .call((g) => g .append("text") .attr("font-size", 25) .attr("font-weight", 500) // .attr("dy", "0.31em") // .attr("x", (d) => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", (d) => x(d[xAccessor]) + x.bandwidth() / 2 < Math.PI ? "start" : "end" ) // .attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null)) .attr("transform", (d) => x(d[xAccessor]) + x.bandwidth() / 2 < Math.PI ? "rotate(0)" : "rotate(180)" ) .style("fill", (d) => { i++; return colorRealms(d[xAccessor]); }) .text((d) => d.PlaneNameEn) ) ); }35:Tbf0,yAxis = (g) => g .attr("text-anchor", "middle") .call( (g) => g // .append("text") // .attr("font-family", "Cormorant SC") // .attr("font-weight", 600) // .attr("font-size", 18) // .attr("y", -160) // .attr("stroke", "#fff") // .attr("stroke-width", 2) // .attr("dy", "2em") // .text("Life Span") // .clone(true) // .attr("fill", "#000") // .attr("stroke", "none") // .clone(true) // .attr("stroke", "#fff") // .attr("stroke-width", 2) // .attr("dy", "3em") // .text("in Years") // .clone(true) // .attr("fill", "#000") // .attr("stroke", "none") ) .call((g) => g .selectAll("g") .data(y.ticks(6)) .join("g") .attr("fill", "none") .call((g) => g .append("circle") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("r", y) ) .call( (g) => g .append("text") .attr("y", (d) => -y(d)) .attr("dy", "0.35em") .attr("stroke", "#fff") .attr("fill", "#000") // .attr("dx", -8) .attr("text-anchor", "end") .attr("stroke-width", 2) // .text(y.tickFormat()) // .append("tspan") // .text((x, i) => `${x.toFixed(0) == 0 ? "0" : "10"}`) .text((x, i) => `${"10"}`) .clone(true) .attr("fill", "#000") .attr("stroke", "none") .clone(true) // .text((x, i) => `${x.toFixed(0)} ${i ? "" : "years"}`) // .text((x, i) => `${x.toFixed(0) == 0 ? "" : x.toFixed(0)} `) .text((x, i) => `${x.toFixed(0)} `) .attr("text-anchor", "start") .attr("dy", -4) .attr("dx", 2) .attr("font-size", 11) .attr("stroke", "#fff") .attr("fill", "#000") .clone(true) .attr("fill", "#000") .attr("stroke", "none") // var svg = d3.select("body").append("svg"); // var data = [ // {text: "Here's some normal text", super:"Here's superscript"}, // {text:"Some text", super:"α,β,γ,%,!,1,2,3"} // ]; // var text = svg.selectAll() // .data(data) // .enter() // .append("text") // .attr("x", 10) // .attr("y", function(d,i) { return i * 20 + 20; }); // // Main content: // text.append("tspan") // .text(function(d) { return d.text; }) // .attr("font-size", 14) // // Superscript content: // text.append("tspan") // .text(function(d) { return " " +d.super; }) // .attr("dy",-5) // .attr("font-size",11) ) )36: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 }); }37:[{"id":"d5d94f2014e5096133d03867e746cbf897f34386160dc514eeea5166f948f1f1d711e8b3f6009bfef74caaeab266b5fc2d3eb74c3ab686ca770e0789231d6cd5","href":"https://static.observableusercontent.com/files/d5d94f2014e5096133d03867e746cbf897f34386160dc514eeea5166f948f1f1d711e8b3f6009bfef74caaeab266b5fc2d3eb74c3ab686ca770e0789231d6cd5","name":"956351507b90e287df4db6c05d20afb5.jpeg","type":"image/jpeg","lastModified":1700762648268.124,"size":46546},{"id":"9ef6b765c84719522becf841cffcac91c9fcb95bd9a8867efc492f65f2f1d063b9cbf63090f56e16128ff1257832abc22e88cd0c013be2a6364963b33048b8d0","href":"https://static.observableusercontent.com/files/9ef6b765c84719522becf841cffcac91c9fcb95bd9a8867efc492f65f2f1d063b9cbf63090f56e16128ff1257832abc22e88cd0c013be2a6364963b33048b8d0","name":"cae7dd6a814b46476e09bbb022a1a6d4.jpeg","type":"image/jpeg","lastModified":1700762648217.767,"size":35648},{"id":"193d2f31ea1fe4ee3385659875a5bb03c46638ace013cc2b483d5ce0bd04eba500620caa056ea41ccf7399b9c500ab8cacf1dccf3fe70ea159f5298063895a8c","href":"https://static.observableusercontent.com/files/193d2f31ea1fe4ee3385659875a5bb03c46638ace013cc2b483d5ce0bd04eba500620caa056ea41ccf7399b9c500ab8cacf1dccf3fe70ea159f5298063895a8c","name":"image.jpeg","type":"image/jpeg","lastModified":1700762648276.695,"size":50915},{"id":"40c7cab1c5cf4b55b47246a362428ce0d05240b401f9ef8676aee8817caffb1ab095f13ccc2e60677de9f1d8866e1e8caaca3b72c9bf88c365adf3890032a3ca","href":"https://static.observableusercontent.com/files/40c7cab1c5cf4b55b47246a362428ce0d05240b401f9ef8676aee8817caffb1ab095f13ccc2e60677de9f1d8866e1e8caaca3b72c9bf88c365adf3890032a3ca","name":"f45b37eab761ee65f094c1068f083e26.jpeg","type":"image/jpeg","lastModified":1700762648389.673,"size":66811},{"id":"9f4d71e385f41e825c8e1475d7031492fa544603b1f3245d6eaf753e5955bbb8956d9b02c8238a1d15e433f2d805ab6bd3b744f4b0cbf27637b40b9b1a0a7bdb","href":"https://static.observableusercontent.com/files/9f4d71e385f41e825c8e1475d7031492fa544603b1f3245d6eaf753e5955bbb8956d9b02c8238a1d15e433f2d805ab6bd3b744f4b0cbf27637b40b9b1a0a7bdb","name":"Paradise-Dante-e1378981232655.gif","type":"image/png","lastModified":1700762648435.731,"size":84769},{"id":"e9c1c67b738b39e0a5e0bef0efa2fa4ff0e4f1fba7a0af3ab21cd2ad2411d6f0dd02e2ec562254ef44de3e8a59ecb99d65f8e63ec665a43fbd16ed8c0176a15c","href":"https://static.observableusercontent.com/files/e9c1c67b738b39e0a5e0bef0efa2fa4ff0e4f1fba7a0af3ab21cd2ad2411d6f0dd02e2ec562254ef44de3e8a59ecb99d65f8e63ec665a43fbd16ed8c0176a15c","name":"image2.jpeg","type":"image/jpeg","lastModified":1700762648522.812,"size":104409},{"id":"315e0ab62357437f225f3086779b4d0fcb2580ca7d0ec3a5251304dbdc700e164ea972253dd7224dd7ac82ae66c9b6ba38e8bb6194d99262704381c3857a904a","href":"https://static.observableusercontent.com/files/315e0ab62357437f225f3086779b4d0fcb2580ca7d0ec3a5251304dbdc700e164ea972253dd7224dd7ac82ae66c9b6ba38e8bb6194d99262704381c3857a904a","name":"dantedivine-comedymap-DP9XCF.jpeg","type":"image/jpeg","lastModified":1700762648527.113,"size":273678},{"id":"958a5f0d5d2b24972376a28f3e29a9ba4612d43e63987c1a85c672f4e159443bdd855fb46dd473539f865cc15ce5ff026b9814ef799145086ec51d988374a6f6","href":"https://static.observableusercontent.com/files/958a5f0d5d2b24972376a28f3e29a9ba4612d43e63987c1a85c672f4e159443bdd855fb46dd473539f865cc15ce5ff026b9814ef799145086ec51d988374a6f6","name":"81VP4NLHOhL.jpeg","type":"image/jpeg","lastModified":1700762648695.576,"size":517704},{"id":"e8e666694ff6fe2d39df56424675b2669363991a53935068a7dde1bb12040d577f28819eb996f39d136766366b0dc7819b6026ec1070fd307a706701af62b3ae","href":"https://static.observableusercontent.com/files/e8e666694ff6fe2d39df56424675b2669363991a53935068a7dde1bb12040d577f28819eb996f39d136766366b0dc7819b6026ec1070fd307a706701af62b3ae","name":"bdb899ae47388717ae_Michelangelo_Caetani_Cross_Section_of_Hell_1855_Cornell_CUL_PJM_1071_04.jpeg","type":"image/jpeg","lastModified":1700762648643.092,"size":269920}] 2d:{"title":"31 Planes of Existance IV","cells":[{"id":0,"value":"md`# 31 Planes of Existance IV\n\n[Table Link](https://docs.google.com/spreadsheets/d/1Ol_zqnCYlKcm5olJX1-MFQKBx9NtAj-9Yg2i1uLMU9g/edit#gid=0)\n#### License\n- [CC0 Public Domain](https://creativecommons.org/publicdomain/zero/1.0/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"iLicense","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viewof mahakappa = slider({\n title: \"Maha Kappa\",\n min: 1,\n max: 140,\n step: 1,\n value: 17,\n description: \"Order of Magnitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"viewof pali = Inputs.toggle({ label: \"Pali Names\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"viewof colorCold = Inputs.color({\n label: \"Cold Hells\",\n value: \"#428fa9\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"viewof colorHot = Inputs.color({\n label: \"Hot Hells\",\n value: \"#913730\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"viewof colorDepravation = Inputs.color({\n label: \"Depravation Realms\",\n value: \"#773c3c\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"viewof colorMaterial = Inputs.color({\n label: \"Material Realms\",\n value: \"#6e874f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"viewof colorFineMaterial = Inputs.color({\n label: \"Fine Material Realms\",\n value: \"#4c6885\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"viewof colorImaterial = Inputs.color({\n label: \"Imaterial Realms\",\n value: \"#8662b2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"darkMode = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"viewof PNGprecision = Inputs.range([1, 9], {\n label: \"PNG resolution factor\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"DOM.download(() => rasterizeWhite(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2242,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"viewof zoom = slider({\n title: \"Zoom\",\n min: 0.1,\n max: 5,\n step: 0.1,\n value: 2.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"## 480 BCE India","pinned":false,"hidden":false,"mode":"md"},{"id":2282,"value":"image = FileAttachment(\"image.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2277,"value":"# The Divine Comedy Cosmos\n## 1320 AD Italy","pinned":false,"hidden":false,"mode":"md"},{"id":2296,"value":"image2 = FileAttachment(\"image2.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2292,"value":"bdb899ae47388717ae_michelangelo_caetani_cross_sect = FileAttachment(\"bdb899ae47388717ae_Michelangelo_Caetani_Cross_Section_of_Hell_1855_Cornell_CUL_PJM_1071_04.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2295,"value":"f45b37eab761ee65f094c1068f083e26 = FileAttachment(\"f45b37eab761ee65f094c1068f083e26.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"ringDestruction = ({\n r: outerR - 45,\n innerR: 12,\n padAngle: 0.55,\n fontSize: 12,\n fade: 10,\n opacity: 0.4,\n letterSpace: 30,\n data: [\n {\n text: pali ? \"Destruction by Fire\" : \"Destruction by Fire\",\n color: colorDepravation,\n startAngle: (360 / (30 + 16)) * 0,\n endAngle: (360 / (30 + 16)) * (14 + 17),\n r: outerR - 11\n },\n {\n text: pali ? \"Destruction by Water\" : \"Destruction by Water\",\n color: colorFineMaterial,\n startAngle: (360 / (30 + 16)) * 0,\n endAngle: (360 / (30 + 16)) * (14 + 20),\n r: outerR - 28\n },\n {\n text: pali ? \"Destruction by Air\" : \"Destruction by Air\",\n color: colorCold,\n startAngle: (360 / (30 + 16)) * 0,\n endAngle: (360 / (30 + 16)) * (14 + 21)\n },\n {\n text: \"Life Span in Years\",\n color: undefined,\n startAngle: -90,\n endAngle: 90,\n r: innerR - 25,\n letterSpace: 0,\n strokeWidth: 0,\n opacity: 0,\n fontSize: 15\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2211,"value":"ringNames = ({\n r: innerR - 50,\n innerR: 50,\n fontSize: 12,\n opacity: 0,\n strokeWidth: 0,\n radial: true,\n data: [\n {\n text: \"You are Here\",\n startAngle: (360 / 46) * (0 + 19),\n endAngle: (360 / 46) * (0 + 20),\n r: innerR - 50 - 8,\n fontSize: 9\n },\n {\n text: \"Mara\",\n startAngle: (360 / 46) * (6 + 19),\n endAngle: (360 / 46) * (6 + 20)\n },\n {\n text: \"Metteya\",\n startAngle: (360 / 46) * (4 + 19),\n endAngle: (360 / 46) * (4 + 20),\n r: innerR - 50 - 8\n // fontSize: 9\n },\n {\n text: \"Yama\",\n startAngle: (360 / 46) * (3 + 19),\n endAngle: (360 / 46) * (3 + 20)\n },\n {\n text: \"Sakka\",\n startAngle: (360 / 46) * (2 + 19),\n endAngle: (360 / 46) * (2 + 20)\n },\n {\n text: \"Baka\",\n startAngle: (360 / 46) * (16 + 19),\n endAngle: (360 / 46) * (16 + 20)\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"ringPlanesBackground = ({\n r: innerR,\n innerR: 310 - 50 - 32 - 10 - 30,\n padAngle: 0.7,\n fontSize: pali ? 20 : 18,\n fade: 10,\n opacity: 0.4,\n radial: true,\n\n data: dataRingPlanesBackground\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"dataRingPlanesBackground = formattedData.map((d) => {\n // const angle = x(d[xAccessor]) + x.bandwidth() / 2;\n\n const obj = {\n text: \"\",\n color: colorRealms(d.num),\n startAngle: (x(d[xAccessor]) * 180) / Math.PI,\n endAngle: ((x(d[xAccessor]) + x.bandwidth()) * 180) / Math.PI\n };\n return obj;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"ringPlanes = ({\n r: outerR + 7,\n innerR: 310 - 50,\n padAngle: 0.4,\n fontSize: pali ? 20 : 18,\n fade: 10,\n opacity: 0.4,\n radial: true,\n\n data: dataRingPlanes\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"dataRingPlanes = formattedData.map((d) => {\n // const angle = x(d[xAccessor]) + x.bandwidth() / 2;\n\n const obj = {\n text: pali ? d.PlaneNamePali : d.PlaneNameEn,\n color: colorRealms(d.num),\n startAngle: (x(d[xAccessor]) * 180) / Math.PI,\n endAngle: ((x(d[xAccessor]) + x.bandwidth()) * 180) / Math.PI,\n r:\n d.num > 20\n ? outerR - 45\n : d.num > 19\n ? outerR - 28\n : d.num > 16\n ? outerR - 10\n : undefined,\n innerR:\n d.num > 20\n ? 200 + 52\n : d.num > 19\n ? 200 + 35\n : d.num > 16\n ? 200 + 17\n : d.num < 2\n ? 200\n : d.num > 11 && d.num < 32\n ? 200\n : d.num > 1 && d.num < 6\n ? 290\n : 245,\n fontSize:\n d.num < 2\n ? pali\n ? 20\n : 18\n : d.num > 27 && pali\n ? 20\n : d.num > 1 && d.num < 6\n ? 18\n : undefined\n };\n return obj;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"ringNum = ({\n r: outerR + 302,\n innerR: 40,\n padAngle: 0.25,\n fontSize: 20,\n fade: 0,\n opacity: 1,\n radial: false,\n\n data: dataRingNum\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"dataRingNum = formattedData.map((d) => {\n const obj = {\n text: d.num < 2 ? d.num.toString().slice(-1) : d.num.toString(),\n color: colorRealms(d.num),\n startAngle: (x(d[xAccessor]) * 180) / Math.PI,\n endAngle: ((x(d[xAccessor]) + x.bandwidth()) * 180) / Math.PI,\n r: d.num < 2 ? outerR + 212 : undefined,\n fade: d.num < 2 ? 10 : undefined,\n padAngle: d.num < 2 ? 0.6 : undefined,\n opacity: d.num < 2 ? 0.4 : undefined\n };\n return obj;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"colorRealms = (i) => {\n return i < 1.2\n ? colorHot\n : i < 1.3\n ? colorCold\n : i < 5\n ? colorDepravation\n : i < 5 + 7\n ? colorMaterial\n : i < 28\n ? colorFineMaterial\n : colorImaterial;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"viewof fill = color({ title: \"Fill Colour\", value: \"#24435c\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof stroke = color({title: \"Stroke Colour\", value: \"#121212\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"viewof strokeWidth = slider({\n title: \"Stroke Width\",\n min: 1,\n max: 8,\n step: 0.1,\n value: 1.2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof w = slider({\n min: 100, \n max: 1000, \n step: 25, \n value: 775,\n title: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof innerR = slider({\n min: 20,\n max: 400,\n step: 10,\n value: 150,\n title: \"Inner Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"viewof padding = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 0.025,\n title: \"Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof xAccessor = text({\n title: \"X Accessor\",\n value: \"num\",\n description: \"if data defined\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof yAccessor = text({\n title: \"Y Accessor\",\n value: \"LifeSpanYears\",\n description: \"if data defined\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"formattedData = data","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"xAxis = (g) =>\n g\n .attr(\"text-anchor\", \"middle\")\n .call((g) =>\n g\n .selectAll(\"g\")\n .data(formattedData)\n .join(\"g\")\n .attr(\n \"transform\",\n (d) => `\n rotate(${\n ((x(d[xAccessor]) + x.bandwidth() / 2) * 180) / Math.PI -\n 90\n })\n translate(${outerR + 27},0)\n `\n )\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"transform\", (d) =>\n (x(d[xAccessor]) + x.bandwidth() / 2 + Math.PI / 2) %\n (2 * Math.PI) <\n Math.PI\n ? \"rotate(90)translate(0,16)\"\n : \"rotate(-90)translate(0,-9)\"\n )\n .text((d) => d[xAccessor])\n )\n )\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleBand()\n .domain(formattedData.map(d => d[xAccessor]))\n .range([0, 2 * Math.PI])\n .align(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(formattedData, (d) => d[yAccessor])])\n .range([innerR, outerR - 50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"arc = d3.arc()\n .innerRadius(d => y(0))\n .outerRadius(d => y(d[yAccessor]))\n .startAngle(d => x(d[xAccessor]))\n .endAngle(d => x(d[xAccessor]) + x.bandwidth())\n .padAngle(padding)\n .padRadius(innerR)","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"// outerR = (w - (innerR * 2)) / 2\nouterR = w / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"function random(min, max) { return Math.floor(Math.random() * (max - min) + min);}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {slider, text, number, color, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"function csvInput({initialUrl, init, accept = \".csv\", label = \"\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init).then(function(response) {\n return response.ok ? response.text() : Promise.reject(response.status);\n }).then(function(text) {\n return d3.csvParse(text, d3.autoType);\n });;\n },\n label\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"function fileInput({\n initialUrl, // e.g., \"https://example.com/file.txt\"\n accept, // e.g., \".txt,.md\"\n load = value => value, // A function to specify which value is exposed.\n label = \"\"\n}) {\n let file = null;\n const form = html`

${label}\n ${Object.assign(html``, {value: initialUrl})}\n \n ${Object.assign(html``, {accept})}\n`;\n form.onsubmit = event => {\n form.value = load(form.url.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n event.preventDefault();\n };\n form.url.oninput = event => {\n event.stopPropagation();\n };\n form.file.oninput = () => {\n if (file !== null) URL.revokeObjectURL(file);\n file = URL.createObjectURL(form.file.files[0]);\n form.value = load(form.url.value = file);\n };\n if (initialUrl !== undefined) {\n form.value = load(initialUrl);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"url = \"https://docs.google.com/spreadsheets/d/1Ol_zqnCYlKcm5olJX1-MFQKBx9NtAj-9Yg2i1uLMU9g/edit#gid=0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"getCsvUrl = (url) => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3];\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"data31 = d3.csv(getCsvUrl(url), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"dataInYears = data31.map((d) => {\n let ls =\n d.LifeSpanYears == null\n ? d.LifeSpanMahakappa * Math.pow(10, mahakappa)\n : d.LifeSpanYears;\n return {\n ...d,\n LifeSpanYears: Math.log10(ls)\n };\n // return {\n // ...d,\n // lifeSpan:\n // d.lifeSpan == null ? d.lifeSpanEon * Math.pow(10, mahakappa) : d.lifeSpan\n // };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"data = dataInYears\n .filter(function (obj, index, arr) {\n return obj.num > 0 && obj.num != 1;\n })\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2251,"value":"import { iLicense } from \"@7722371e7ecac8bd/suttapitaka\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"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":2236,"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":2315,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W37","stdlib":"1","titling":"auto"}