2f:T7d5,chart = { // Create SVG const width = 1050; const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -width / 2, width, width]); // Google Font API GFontToDataURI( "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); svg .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); GFontToDataURI( "https://fonts.googleapis.com/css2?family=Cormorant SC&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); svg .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); // background if (darkMode) { const H = 1100; const W = H; svg .append("rect") .attr("width", W) .attr("height", H) .attr("x", -W / 2) .attr("y", -H / 2) // .attr("fill-opacity", 0); .attr("fill", "black"); } // Text at the Center const text = svg .append("text") .style("font-weight", "bold") .style("fill", darkMode ? "grey" : "black") .attr("font-family", selectedFont) .attr("font-size", 13) .attr("text-anchor", "middle") .text("Nibbāna") .attr("dy", "0.35em"); drawRing(svg, ringCessation); drawRing(svg, ringFormless); drawRing(svg, ringFormlessJhana); drawRing(svg, ringFormlessTitle); drawRing(svg, ringJhanas); drawRing(svg, ringJhanasTitle); drawRing(svg, ringFormTitle); drawRing(svg, ringAnapana); drawRing(svg, ringAnapanaTitle); drawRing(svg, ringFundationsTitle); drawRing(svg, ringFundationsTopicTitle); drawRing(svg, ringFundationsTopics); drawRing(svg, ring32Parts); drawRing(svg, ring32Parts1); drawRing(svg, ring32Parts2); return svg.node(); }30:T91a,ringAnapana = ({ r: 168 + 30 + 26, innerR: 25, padAngle: 1.2, fontSize: 10, color: colorAnapana, fade: 10, opacity: 0.1, data: [ { text: "short", color: colorBody, startAngle: 0, endAngle: (360 / 16) * 1 }, { text: "Long", color: colorBody, startAngle: (360 / 16) * 1, endAngle: (360 / 16) * 2 }, { text: "Whole \nBody", color: colorBody, startAngle: (360 / 16) * 2, endAngle: (360 / 16) * 3 }, { text: "Calming // Bodily Formations", color: colorBody, fontSize: 8.5, startAngle: (360 / 16) * 3, endAngle: (360 / 16) * 4 }, { text: "Joy", color: colorFeeling, startAngle: (360 / 16) * 4, endAngle: (360 / 16) * 5 }, { text: "Pleasure", color: colorFeeling, startAngle: (360 / 16) * 5, endAngle: (360 / 16) * 6 }, { text: "Expereriencing // the Mind", color: colorFeeling, startAngle: (360 / 16) * 6, endAngle: (360 / 16) * 7 }, { text: "Calming // Mental Formations", color: colorFeeling, fontSize: 8.5, startAngle: (360 / 16) * 7, endAngle: (360 / 16) * 8 }, { text: "Expending", color: colorMind, startAngle: (360 / 16) * 8, endAngle: (360 / 16) * 9 }, { text: "Gladdeing", color: colorMind, startAngle: (360 / 16) * 9, endAngle: (360 / 16) * 10 }, { text: "Unifing", color: colorMind, startAngle: (360 / 16) * 10, endAngle: (360 / 16) * 11 }, { text: "Releasing", color: colorMind, startAngle: (360 / 16) * 11, endAngle: (360 / 16) * 12 }, { text: "Impermanance", color: colorMindObject, startAngle: (360 / 16) * 12, endAngle: (360 / 16) * 13 }, { text: "Dispassion", color: colorMindObject, startAngle: (360 / 16) * 13, endAngle: (360 / 16) * 14 }, { text: "Cessation", color: colorMindObject, startAngle: (360 / 16) * 14, endAngle: (360 / 16) * 15 }, { text: "Relinquishment", color: colorMindObject, fontSize: 9, startAngle: (360 / 16) * 15, endAngle: (360 / 16) * 16 } ] })31:T6e9,ringFundationsTopicTitle = ({ r: 355 + 30 + 26 + 25 + 3, innerR: 25, padAngle: 0.8, fontSize: 15, color: colorAnapana, fade: 10, opacity: 0.4, data: [ { text: "4 Postures", color: colorBody, startAngle: 0, endAngle: (360 / 12) * 1 }, { text: "Full Awareness", color: colorBody, startAngle: (360 / 12) * 1, endAngle: (360 / 12) * 2 }, { text: "32 Parts", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3 }, { text: "9 Decompositions", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4 }, { text: "4 Elements", color: colorBody, startAngle: (360 / 12) * 4, endAngle: (360 / 12) * 5 }, { text: "6 Feelings", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6 }, { text: "8 Mind States", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7 }, { text: "5 Hinderances", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8 }, { text: "5 Aggragates", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9 }, { text: "6 Sense bases", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10 }, { text: "7 Factors of Awakening", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11 }, { text: "4 Noble Truths", color: colorMindObject, startAngle: (360 / 12) * 11, endAngle: (360 / 12) * 12 } ] })32:T2bb5,ringFundationsTopics = ({ r: 230 + 30 + 26 + 25 + 2, innerR: 120, padAngle: 0.5, endPadAngle: 1, fontSize: 12, color: colorAnapana, fade: 10, opacity: 0.1, radial: true, off: 0.3, data: [ { text: "Walking", color: colorBody, startAngle: 0, endAngle: 360 / 12, div: 4, n: 1 }, { text: "Standing", color: colorBody, startAngle: 0, endAngle: 360 / 12, div: 4, n: 2 }, { text: "Sitting", color: colorBody, startAngle: 0, endAngle: 360 / 12, div: 4, n: 3 }, { text: "Lying Down", color: colorBody, startAngle: 0, endAngle: 360 / 12, div: 4, n: 4 }, { text: "going forward & returning", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 1 }, { text: "looking toward & looking away", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 2 }, { text: "bending & extending limbs", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 3 }, { text: "carrying cloak, // upper robe & bowl", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 4 }, { text: "eating, drinking, // chewing & savoring", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 5 }, { text: "urinating & defecating", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 6 }, { text: "walking, standing & sitting", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, div: 9, fontSize: 8, n: 7 }, { text: "falling asleep & waking up", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 8 }, { text: "talking & remaining silent", color: colorBody, startAngle: 360 / 12, endAngle: (360 / 12) * 2, fontSize: 8, div: 9, n: 9 }, { text: "swolen, blue & festering", color: colorBody, startAngle: (360 / 12) * 3, fontSize: 8, endAngle: (360 / 12) * 4, div: 9, n: 1 }, { text: "eaten by crows & dog &worms", color: colorBody, startAngle: (360 / 12) * 3, fontSize: 8, endAngle: (360 / 12) * 4, div: 9, n: 2 }, { text: "some flesh, tendon & blood", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 3 }, { text: "bloody skeleton & tendon", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 4 }, { text: "skeleton & tendon", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 5 }, { text: "loose bones & scattered", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 6 }, { text: "white bleached bones", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 7 }, { text: "heaped old bones pile", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 8 }, { text: "dust & rotten bones", color: colorBody, startAngle: (360 / 12) * 3, endAngle: (360 / 12) * 4, fontSize: 8, div: 9, n: 9 }, { text: "earth", color: colorBody, startAngle: (360 / 12) * 4, endAngle: (360 / 12) * 5, div: 4, n: 1 }, { text: "water", color: colorBody, startAngle: (360 / 12) * 4, endAngle: (360 / 12) * 5, div: 4, n: 2 }, { text: "fire", color: colorBody, startAngle: (360 / 12) * 4, endAngle: (360 / 12) * 5, div: 4, n: 3 }, { text: "air", color: colorBody, startAngle: (360 / 12) * 4, endAngle: (360 / 12) * 5, div: 4, n: 4 }, { text: "Plesant (carnal)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 1 }, { text: "Painful (carnal)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 2 }, { text: "Neutral (carnal)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 3 }, { text: "Plesant (spiritual)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 4 }, { text: "Painful (spiritual)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 5 }, { text: "Neutral (spiritual)", color: colorFeeling, startAngle: (360 / 12) * 5, endAngle: (360 / 12) * 6, div: 6, n: 6 }, { text: "Greedy", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 1 }, { text: "Angry", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 2 }, { text: "Exalted", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 3 }, { text: "Surpassed", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 4 }, { text: "Deluded", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 5 }, { text: "Contracted", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 6 }, { text: "Unified", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 7 }, { text: "Released", color: colorMind, startAngle: (360 / 12) * 6, endAngle: (360 / 12) * 7, div: 8, n: 8 }, { text: "Sensual desire", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8, div: 5, n: 1 }, { text: "Ill-will", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8, div: 5, n: 2 }, { text: "Sleepiness", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8, div: 5, n: 3 }, { text: "Restlessness", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8, div: 5, n: 4 }, { text: "Doubt", color: colorMindObject, startAngle: (360 / 12) * 7, endAngle: (360 / 12) * 8, div: 5, n: 5 }, { text: "Form", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9, div: 5, n: 1 }, { text: "Feeling", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9, div: 5, n: 2 }, { text: "Perception", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9, div: 5, n: 3 }, { text: "Mental formation", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9, div: 5, n: 4 }, { text: "consciousness", color: colorMindObject, startAngle: (360 / 12) * 8, endAngle: (360 / 12) * 9, div: 5, n: 5 }, { text: "Seeing", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 1 }, { text: "Hearing", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 2 }, { text: "Smelling", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 3 }, { text: "Tasting", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 4 }, { text: "Touching", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 5 }, { text: "Thinking", color: colorMindObject, startAngle: (360 / 12) * 9, endAngle: (360 / 12) * 10, div: 6, n: 6 }, { text: "Mindfulness", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 1 }, { text: "Investigation", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 2 }, { text: "Effort", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 3 }, { text: "Joy", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 4 }, { text: "Tranquility", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 5 }, { text: "Unification", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 6 }, { text: "Equanimity", color: colorMindObject, startAngle: (360 / 12) * 10, endAngle: (360 / 12) * 11, div: 7, n: 7 }, { text: "Suffering", color: colorMindObject, startAngle: (360 / 12) * 11, endAngle: (360 / 12) * 12, div: 4, n: 1 }, { text: "Origin", color: colorMindObject, startAngle: (360 / 12) * 11, endAngle: (360 / 12) * 12, div: 4, n: 2 }, { text: "Cessation", color: colorMindObject, startAngle: (360 / 12) * 11, endAngle: (360 / 12) * 12, div: 4, n: 3 }, { text: "Path", color: colorMindObject, startAngle: (360 / 12) * 11, endAngle: (360 / 12) * 12, div: 4, n: 4 } ] })33:T6a4,ring32Parts = ({ r: 230 + 30 + 26 + 25, innerR: 38, padAngle: 0.5, fontSize: 7, color: colorAnapana, fade: 10, opacity: 0.1, radial: true, off: 0.3, data: [ { text: "head hairs", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 1 }, { text: "body hairs", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 2 }, { text: "Nails", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 3 }, { text: "Teeth", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 4 }, { text: "skin", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 5 }, { text: "flesh", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 6 }, { text: "tendons", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 7 }, { text: "bones", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 8 }, { text: "marrow", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 9 }, { text: "kidneys", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 10 } ] })34:T6bc,ring32Parts1 = ({ r: 230 + 30 + 26 + 42 + 25, innerR: 38, padAngle: 0.5, fontSize: 7, color: colorAnapana, fade: 10, opacity: 0.1, radial: true, off: 0.3, data: [ { text: "heart", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 1 }, { text: "liver", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 2 }, { text: "pleura", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 3 }, { text: "spleen", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 4 }, { text: "lungs", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 5 }, { text: "large // intestines", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 6 }, { text: "small // intestines", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 7 }, { text: "stomach", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 8 }, { text: "feces", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 9 }, { text: "brain", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 10, n: 10 } ] })35:T7dc,ring32Parts2 = ({ r: 230 + 30 + 26 + 42 + 42 + 25, innerR: 38, padAngle: 0.5, fontSize: 7, color: colorAnapana, fade: 10, opacity: 0.1, radial: true, off: 0.3, data: [ { text: "bile", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 1 }, { text: "phlegm", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 2 }, { text: "pus", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 3 }, { text: "blood", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 4 }, { text: "sweat", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 5 }, { text: "fat", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 6 }, { text: "tears", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 7 }, { text: "grease", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 8 }, { text: "saliva", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 9 }, { text: "mucus", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 10 }, { text: "oil of //the joints", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 11 }, { text: "urine", color: colorBody, startAngle: (360 / 12) * 2, endAngle: (360 / 12) * 3, div: 12, n: 12 } ] })36:T2349,// 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, n = 1, off = 0 } = ring; 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 dBottomAjust = (d) => (d.bottomAjust != undefined ? d.bottomAjust : 0); const dTopAjust = (d) => (d.topAjust != undefined ? d.topAjust : 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); // 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(r) .outerRadius(r + innerR) .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 &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, r, (Math.PI / 180) * d.endAngle - halfPI, (Math.PI / 180) * d.startAngle - halfPI, true ); } else { context.arc( 0, 0, r, (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)); // .clone() // for dark mode // .lower() // .style("fill", "white") // .style("fill-opacity", 1); // Create Text // if radial function labelTransform(d) { const x = (d.endAngle + d.startAngle) / 2 - 90; return `rotate(${x}) translate(${r + innerR / 2},0) rotate(${ x < 180 - 90 ? 0 : 180 })`; } // ADD THIS: function labelTransform2(d, twoLines) { const mid = (d.startAngle + d.endAngle) / 2; const x = mid - 90; const span = (d.endAngle - d.startAngle) / 2; const df = span / 3; const flip = x >= 90; const f2 = twoLines === 0 ? x : twoLines === 1 ? flip ? x + df : x - df : flip ? x - df : x + df; return `rotate(${f2}) translate(${r + innerR / 2},0) rotate(${ flip ? 180 : 0 })`; } // AFTER — radial text with // multiline support, ported from drawRing3 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) => { const lines = toTitleCase(d.text)?.split("//"); const text = lines.length > 1 ? lines[0] : toTitleCase(d.text); return dLetterSpace(d) ? text.split("").join("\u200A".repeat(dLetterSpace(d))) : text; }) .attr("transform", (d) => { const lines = toTitleCase(d.text)?.split("//"); return lines.length > 1 ? labelTransform2(d, 1) : labelTransform(d); }) .attr("display", (d) => (dRadial(d) ? "true" : "none")) .clone() .text((d) => { const lines = toTitleCase(d.text)?.split("//"); return lines.length > 1 ? dLetterSpace(d) ? lines[1].split("").join("\u200A".repeat(dLetterSpace(d))) : lines[1] : ""; }) .attr("transform", (d) => labelTransform2(d, 2)) .attr("display", (d) => (dRadial(d) ? "true" : "none")); // 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)) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) // AFTER .text((d) => { let rawText = toTitleCase(d.text); if (!rawText.includes("//")) { 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 .clone() .attr( "dy", (d) => (innerR / 2) * (atBottom(d) ? +0.7 + dBottomAjust(d) : -1.3 + dTopAjust(d)) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) // AFTER .text((d) => { let rawText = toTitleCase(d.text); if (rawText.includes("//")) { let arrText = rawText.split("//"); 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) => (innerR / 2) * (atBottom(d) ? +1.5 + dTopAjust(d) : -0.55 + dBottomAjust(d)) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", (d) => d.uid.href) // AFTER .text((d) => { let rawText = toTitleCase(d.text); if (rawText.includes("//")) { let arrText = rawText.split("//"); 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); }37:Ta49,// 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 &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 // &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 }); }38:T6a3,// from https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript?noredirect=1&lq=1 function toTitleCase(str) { const articles = ["a", "an", "the"]; const conjunctions = ["for", "and", "nor", "but", "or", "yet", "so"]; const prepositions = [ "with", "at", "from", "into", "upon", "of", "to", "in", "for", "on", "by", "like", "over", "plus", "but", "up", "down", "off", "near" ]; // The list of spacial characters can be tweaked here const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, " ").replace(/(\s\s+)/gi, " "); const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1); const normalizeStr = (str) => str.toLowerCase().trim(); const shouldCapitalize = (word, fullWordList, posWithinStr) => { if (posWithinStr == 0 || posWithinStr == fullWordList.length - 1) { return true; } return !( articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word) ); }; //str = replaceCharsWithSpace(str); // str = normalizeStr(str); let words = str.split(" "); if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized words = words.map((w) => capitalizeFirstLetter(w)); } else { for (let i = 0; i < words.length; i++) { words[i] = shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]; } } const str2 = words.join(" "); words = str2.split("-"); words = words.map((w) => capitalizeFirstLetter(w)); return words.join("-"); }39:[] 2d:{"title":"Nibbana IV","cells":[{"id":0,"value":"# Nibbana IV\n","pinned":false,"hidden":false,"mode":"md"},{"id":852,"value":"viewof darkMode = Inputs.toggle({ label: \"Dark Mode\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"viewof colorJhanas = Inputs.color({ label: \"Jhanas\", value: \"#6a2520\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof colorFormless = Inputs.color({ label: \"Formless\", value: \"#20656A\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"viewof colorCessation = Inputs.color({ label: \"Cessation\", value: \"#5a3b16\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof colorAnapana = Inputs.color({ label: \"Anapana\", value: \"#595f58\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof colorBody = Inputs.color({ label: \"Body\", value: \"#10430f\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof colorFeeling = Inputs.color({ label: \"Feeling\", value: \"#2b5364\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof colorMind = Inputs.color({ label: \"Mind\", value: \"#987334\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof colorMindObject = Inputs.color({\n label: \"Mind Objects\",\n value: \"#682763\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"\n

${viewof PNGprecision}

${DOM.download(() => rasterizeWhite(chart, PNGprecision), undefined, \"Save as PNG\")}

${DOM.download(() => serialize(chart), undefined, \"Save as SVG\")}

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1179,"value":"customD3 = require(\"https://cdn.jsdelivr.net/gh/cittadhammo/d3@64d0d712f9938f352ea504f94f13fcfb818e47f4/dist/d3.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"viewof selectedFont = select({\n options: [\"Cormorant SC\", \"serif\", \"Open Sans\", \"sans-serif\"],\n value: \"Cormorant SC\",\n title: \"Font\"\n // --serif: \"Source Serif Pro\", \"Iowan Old Style\", \"Apple Garamond\", \"Palatino Linotype\", \"Times New Roman\", \"Droid Serif\", Times, serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n // --sans-serif: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, helvetica, \"helvetica neue\", ubuntu, roboto, noto, \"segoe ui\", arial, sans-serif;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"ringAnapanaTitle = ({\n r: 200 + 30 + 26,\n innerR: 25,\n padAngle: 1,\n fontSize: 14,\n color: colorAnapana,\n fade: 0,\n opacity: 1,\n letterSpace: 0,\n\n data: [\n {\n text: \"mindfulness of Breathing\",\n startAngle: (360 / 4) * 0,\n endAngle: (360 / 4) * 1,\n color: colorBody\n },\n {\n text: \"mindfulness of Breathing\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 2,\n color: colorFeeling\n },\n {\n text: \"mindfulness of Breathing\",\n startAngle: (360 / 4) * 2,\n endAngle: (360 / 4) * 3,\n color: colorMind\n },\n {\n text: \"mindfulness of Breathing\",\n startAngle: (360 / 4) * 3,\n endAngle: (360 / 4) * 4,\n color: colorMindObject\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"ringFundationsTitle = ({\n r: 387 + 30 + 26 + 25 + 2,\n innerR: 35,\n padAngle: 0.8,\n fontSize: 15,\n color: colorAnapana,\n fade: 0,\n opacity: 1,\n\n data: [\n {\n text: \"Mindfulness of the Body\",\n letterSpace: 2,\n color: colorBody,\n startAngle: 0,\n endAngle: (360 / 12) * 5\n },\n {\n text: \"Mindfulness of \\nFeeling\",\n color: colorFeeling,\n startAngle: (360 / 12) * 5,\n endAngle: (360 / 12) * 6\n },\n {\n text: \"Mindfulness of\\nMind\",\n color: colorMind,\n startAngle: (360 / 12) * 6,\n endAngle: (360 / 12) * 7\n },\n {\n text: \"Mindfulness of Mind Objects\",\n letterSpace: 2,\n color: colorMindObject,\n startAngle: (360 / 12) * 7,\n endAngle: (360 / 12) * 12\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"ringCessation = ({\n r: 35,\n innerR: 9,\n padAngle: 0,\n fontSize: 8,\n color: colorCessation,\n fade: 10,\n opacity: 1,\n\n data: [\n {\n text: \"\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 3,\n opacity: 0\n },\n {\n text: \"Cessation of\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 1,\n strokeWidth: 0\n },\n {\n text: \"Feeling & Perception\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 3,\n strokeWidth: 0\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"ringFormless = ({\n r: 59,\n innerR: 20,\n padAngle: 2.6,\n fontSize: 7,\n color: colorFormless,\n fade: 10,\n opacity: 0.1,\n\n data: [\n {\n text: \"Infinit Space\",\n startAngle: 0,\n endAngle: (360 / 4) * 1\n },\n {\n text: \"Infinit Consciousness\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 2\n },\n {\n text: \"Nothingness\",\n startAngle: (360 / 4) * 2,\n endAngle: (360 / 4) * 3\n },\n {\n text: \"Neither Perception //nor Non-Perception\",\n startAngle: (360 / 4) * 3,\n endAngle: (360 / 4) * 4\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"ringFormlessTitle = ({\n r: 83 + 24,\n innerR: 11,\n padAngle: 0,\n fontSize: 10,\n color: colorFormless,\n fade: 0,\n opacity: 1,\n letterSpace: 10,\n\n data: [\n {\n text: \"\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 3,\n opacity: 1\n },\n {\n text: \"Formless\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 1,\n strokeWidth: 0\n },\n {\n text: \"Absorbtions\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 3,\n strokeWidth: 0\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"ringFormlessJhana = ({\n r: 83,\n innerR: 20,\n padAngle: 2,\n fontSize: 9,\n color: colorFormless,\n fade: 10,\n opacity: 0.3,\n\n data: [\n {\n text: \"5th Jhana\",\n startAngle: 0,\n endAngle: (360 / 4) * 1\n },\n {\n text: \"6th Jhana\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 2\n },\n {\n text: \"7th Jhana\",\n startAngle: (360 / 4) * 2,\n endAngle: (360 / 4) * 3\n },\n {\n text: \"8th Jhana\",\n startAngle: (360 / 4) * 3,\n endAngle: (360 / 4) * 4\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"ringJhanas = ({\n r: 108+ 26,\n innerR: 25,\n padAngle: 1.5,\n fontSize: 10,\n color: colorJhanas,\n fade: 10,\n opacity: 0.1,\n\n data: [\n {\n text: \"Thinking & Pondering\",\n startAngle: 0,\n endAngle: (360 / 4) * 1\n },\n {\n text: \"Joy\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 2\n },\n {\n text: \"Pleasure\",\n startAngle: (360 / 4) * 2,\n endAngle: (360 / 4) * 3\n },\n {\n text: \"Equanimity\",\n startAngle: (360 / 4) * 3,\n endAngle: (360 / 4) * 4\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"ringJhanasTitle = ({\n r: 138 + 26,\n innerR: 25,\n padAngle: 1.2,\n fontSize: 13,\n color: colorJhanas,\n fade: 10,\n opacity: 0.4,\n\n data: [\n {\n text: \"1st Jhana\",\n startAngle: (360 / 4) * 0,\n endAngle: (360 / 4) * 1\n },\n {\n text: \"2nd Jhana\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 2\n },\n {\n text: \"3rd Jhana\",\n startAngle: (360 / 4) * 2,\n endAngle: (360 / 4) * 3\n },\n {\n text: \"3rd Jhana\",\n startAngle: (360 / 4) * 3,\n endAngle: (360 / 4) * 4\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"ringFormTitle = ({\n r: 138 + 30 + 24,\n innerR: 15,\n padAngle: 0,\n fontSize: 12,\n color: colorJhanas,\n fade: 0,\n opacity: 1,\n letterSpace: 20,\n\n data: [\n {\n text: \"\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 3,\n opacity: 1\n },\n {\n text: \"Form\",\n startAngle: (360 / 4) * -1,\n endAngle: (360 / 4) * 1,\n strokeWidth: 0\n },\n {\n text: \"Absorbtions\",\n startAngle: (360 / 4) * 1,\n endAngle: (360 / 4) * 3,\n strokeWidth: 0\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"viewof PNGprecision = slider({\n title: \"PNG Resolution Factor\",\n min: 0,\n max: 12,\n step: 1,\n value: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"import { slider, select, color, checkbox, button } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1141,"value":"function rasterizeWhite(svg, PNGprecision) {\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":true,"hidden":false,"mode":"ojs"},{"id":1165,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W39","stdlib":"1","titling":"auto"}