2c:["$","title",null,{"children":"The Dhamma Citadel: Navigating the Four Noble Truths | Cittadhammo | Observable"}] 31:T1353,# The Dhamma Citadel: Navigating the Four Noble Truths

**Make Your Own Translation!**

Fill out the GoogleSheet Translation Table with your language
- Add your own Language by adding 2 new columns (yourLanguage, yourLanguageFont) like the previous ones (and refresh this page)!
- Put the chart window on the left and the translation table on the right on your screen to ease the work. See this sceenshot for example.
- Click on the button "Refresh Translation" for updating the chart when adding new translations.
- Add numbers in the column Font to adapt your words font size to the chart. The font is 10 by default. Adding numbers after spaces in that field will add a Letter Spacing to your word and a Line height (for center Titles). For example : "11 2 -0.2" will give you a font size 11, letter spacing 2, and line height -0.2.
- Use "//" (double slash) to indicate line break
- Use Title Case Capitalisation (link)
- Adjust the x & y coordinate below the chart when working in a small area of translation.
- Uncheck the Display checkboxes that are not necessary to have a faster rendering when translating
- You can use the following prompt in **ChatGPT** to get an initial tranlsation: Copy paste 100 or more cells at a time after this prompt: "I need to translate a Google Spreadsheet column from English to Italian. The cells contain titles that should be translated. These titles contain the "//" character inside them that represents a line break. Please keep the "//" in the same place, but translate the title as a whole following the Italian Buddhist terminology. ONLY give me the result of your translation, no comment, so that I can copy-paste it into my spreadsheet."

**Sources**

dhammacharts.org : Home Site
observablehq.com : Notebook Source

Main Sources
- Outline of Buddhism (wikipedia.org)
- Buddha's Lists (dhammawiki.com)
- iDhamma Guide
- A Gradual Training (accesstoinsight.org)
Secondary Sources

Buddhist Dictionary
Bhikkhu Manual
The Complete Book of Buddha's Lists: PDF
Buddha Dhamma : PDF
Buddha Vacana : Formula
Leight Breisington
Buddhadust
Lucid24 : Strang website ![]
Practical Pali Grammar

**Notes**

Target Image: At the bottom
Expected Date of Completion: End of Vassa 2023
Medieval Castle Terminology : At the bottom
See The Simile of the Citadel
Citadel Parts

**License**

CC0 Public Domain`

32:T1b7e,chart = { const w = 400; const svgOrigin = d3 .create("svg") .attr("viewBox", [ ((1 / zoom) * -w) / 2 + x, ((1 / zoom) * -w) / 2 - y, (1 / zoom) * w, (1 / zoom) * w ]) .attr("cursor", "grab"); const svg = svgOrigin.append("g").attr("transform", "translate(0, 0)"); 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)); if (check.includes("background")) { drawRing(svg, Ramparts); if (check.includes("rampartNames")) drawRing(svg, RampartsNames), drawRing(svg, RampartsTitle); drawRing(svg, grass1); drawRing(svg, grass2); drawRing(svg, grass33); drawRing(svg, grass3); drawRing(svg, grass32); drawRing(svg, grass4); } if (check.includes("4NT")) drawRing(svg, DonjonChemise); if (check.includes("ring2")) { drawRing(svg, LowerBaileyTitle); } if (check.includes("ring1")) { drawRing(svg, HigherBaileyTitle); drawRing(svg, HigherBailey); } if (check.includes("ring2")) { drawRing(svg, LowerBaileySubTitle); // drawRing(svg, LowerBaileyTitle); drawRing(svg, LowerBailey); } if (check.includes("4NT")) drawRing(svg, Donjon); if (check.includes("do")) { drawRing(svg, InnerWall); drawRing(svg, InnerWallTitle); } if (check.includes("corner")) drawRing(svg, CornerStones); if (check.includes("nutriments")) { drawRing(svg, OuterWallBackGround); drawRing(svg, OuterWallTitle); drawRing(svg, OuterWall); } if (check.includes("centerRadius")) { drawRing(svg, WBattlementsBackground); drawRing(svg, EBattlementsBackground); drawRing(svg, WBattlementsTitle); drawRing(svg, WBattlementsSubTitle); drawRing(svg, WBattlementsSubSubTitle); drawRing(svg, EBattlementsTitle); drawRing(svg, NBattlementsTitle); drawRing(svg, NBattlementsSubTitle); drawRing(svg, SBattlementsTitle); drawRing(svg, WBattlements); drawRing(svg, EBattlements); drawRing(svg, NEBattlements); drawRing(svg, NWBattlements2); drawRing(svg, NWBattlements3); drawRing(svg, NEBattlementsSubSubTitle); drawRing(svg, NWBattlements); drawRing(svg, SBattlements); drawRing(svg, SBattlements2); drawRing(svg, WBattlementsNumbers); drawRing(svg, SBattlementsNumbers); drawRing(svg, EBattlementsNumbers); drawRing(svg, NEBattlementsNumbers); drawRing(svg, EBattlementsNumbersTitle); drawRing(svg, NWCornerTower); drawRing(svg, NWCornerTowerSubTitle); drawRing(svg, NECornerTower); drawRing(svg, SECornerTower); drawRing(svg, NECornerTowerSubTitle); drawRing(svg, SWCornerTower); } if (check.includes("moat")) { drawRing(svg, Moat); drawRing(svg, MoatTitle); } if (check.includes("flanking")) { drawRing(svg, EFlankingTowerTitle); drawRing(svg, EFlankingTower); drawRing(svg, NFlankingTowerTitle); drawRing(svg, WFlankingTowerTitle); drawRing(svg, WFlankingTower); drawRing(svg, SFlankingTowerTitle); drawRing(svg, SFlankingTower); drawRing(svg, NFlankingTower); } if (check.includes("watch")) { drawRing(svg, NNEWatchTower); drawRing(svg, NNWWatchTower); drawRing(svg, ENEWatchTower); drawRing(svg, WNWWatchTower); drawRing(svg, ESEWatchTower); drawRing(svg, WSWWatchTower); drawRing(svg, SSEWatchTower); drawRing(svg, SSWWatchTower); } if (check.includes("sentinel")) { drawRing(svg, NESentinelTower); } ////////////////////////////////////////////////////// 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)); svg .append("g") .attr( "transform", ` translate(${p.ramparts - 75}, ${p.ramparts - 30}) scale(0.8)` ) .attr("fill", "#828282") .html(logo); const text = svg .append("text") .attr("x", p.ramparts - 80) .attr("y", p.ramparts) .style("font-weight", "bold") .style("fill", "#828282") .attr("font-family", fontName) .attr("font-size", 9) .text( selectedLanguage == "french" ? "La Citadelle du Dhamma" : selectedLanguage == "italian" //? "La cittadella del Dhamma" ? "La Fortezza del Dhamma" : "The Dhamma Citadel" ) .attr("text-anchor", "end") .attr("dy", "-2.3em") .attr("dx", "0em") .append("tspan") .attr("x", p.ramparts - 80) .attr("dy", "1.4em") .text("DhammaCharts.org"); // const text = svg // .append("text") // .attr("x", p.ramparts - 10) // .attr("y", p.ramparts) // .style("font-weight", "bold") // .style("fill", "#828282") // .attr("font-family", fontName) // .attr("font-size", 9) // .text("CC0 - Public Domain") // .attr("text-anchor", "end") // .attr("dy", "-2.45em") // .clone(true) // .text("DhammaCharts.org") // .attr("dy", "-1.1em"); ////////////////////////////////////////////////////// End of License /////////////////////////////////////////////// // svgOrigin.call( // d3 // .zoom() // .scaleExtent([1, scrollZoom ? 8 : 1]) // .on("zoom", zoomed) // ); function zoomed({ transform }) { svg.attr("transform", transform); } // --- alternative zoom from https://talk.observablehq.com/t/update-value-of-another-input-when-an-input-is-triggered-in-a-multi-input-single-object/8532/3 independant of toogle and allow zoom only on fullscreen --- // const zooming = d3.zoom().scaleExtent([0.5, 8]).on("zoom", zoomed); const toggleZoom = (enabled) => { if (enabled) { // Attach zoom handlers svgOrigin.call(zooming); } else { svgOrigin.call(zooming.transform, d3.zoomIdentity); // Remove all *.zoom event handlers svgOrigin.on(".zoom", null); } }; // Initialize toggleZoom(); document.addEventListener("fullscreenchange", (e) => { // Enable zooming if svg.node() is the fullscreen element toggleZoom(e.target === document.fullscreenElement); }); return svgOrigin.node(); }33:T125a,p = { const p = {}; p.gap = 2.5; p.river = 10; // Between Bailey & Inner Wall p.strokeWidth = 1; p.arrowFactor = 0.5; // color fade p.subFade = 7; p.subOpacity = 0.9; p.itemFade = 10; p.itemOpacity = 0.3; p.itemFade2 = 20; p.itemOpacity2 = 0.5; p.backOpacity = 0.7; p.backOpacity2 = 0.6; // Donjon p.padDonjon = 0; p.donjon = 58; p.donjonInner = 31; p.chemise = 75.2 + 1; p.chemiseInner = 19; p.donjonInner = 31.7; p.chemise = 75.2 + 1.3 - 2; p.chemiseInner = 19; // Higher Bailey p.higherBailey = p.donjon + p.donjonInner + 2.5 * p.gap; p.higherBaileyInner = 90; //95, 100 p.higherBaileySubTitleInner = 19; p.higherBaileyTitle = p.higherBailey + p.higherBaileyInner + p.gap; p.higherBaileyTitleInner = 20; p.higherBaileyTitleInner = 20; p.higherBaileySectionInner = 10; // Lower Bailey p.lowerBailey = p.higherBaileyTitle + p.higherBaileyTitleInner + 1.5 * p.gap; p.lowerBaileyInner = 90; p.lowerBaileySubTitle = p.lowerBailey + p.lowerBaileyInner + p.gap; p.lowerBaileySubTitleInner = 18; p.lowerBaileySubSubTitleInner = 18; p.lowerBaileySubSub = p.lowerBailey + p.lowerBaileyInner - p.gap - p.lowerBaileySubTitleInner + p.higherBaileySectionInner; p.lowerBaileyTitle = p.lowerBaileySubTitle + p.lowerBaileySubTitleInner + p.gap; p.lowerBaileyTitleInner = 22; p.lowerBaileyInner8F = p.lowerBaileyInner - 3 * p.gap - p.lowerBaileySubTitleInner + p.higherBaileySectionInner; p.consci = (p.lowerBaileyInner + p.lowerBaileySubTitleInner - (5 / 1) * p.gap) / 6; p.consciGap = 2; p.lowerBaileyRingInner = 7; // Inner Wall p.innerWall = p.lowerBaileyTitle + p.lowerBaileyTitleInner + p.river; p.innerWallInner = 23; p.innerWallTitle = p.innerWall + p.innerWallInner + p.gap; p.innerWallTitleInner = 13; // Outer Wall p.outerWall = p.innerWallTitle + p.innerWallTitleInner + 1.5 * p.gap; p.outerWallInner = 24; //p.outerWallTitle = p.outerWall + 1 * p.gap + 28; p.outerWallTitle = p.outerWall + p.outerWallInner + 1 * p.gap; p.outerWallTitleInner = 13; p.outerWallBackAdjust = 1; // Corner Stones p.CornerStones = ((p.outerWall - 2 * p.gap) / 2) * (1 - 1 / Math.SQRT2) - p.gap / 2; // radius p.CornerStonesInner = 20; p.dCornerStones = (p.outerWall * (Math.SQRT2 - 1)) / 2; // diagonal radius p.cCornerStonesx = p.outerWall - p.CornerStones - 2 * p.gap; p.cCornerStonesy = p.cCornerStonesx; // Battlements p.battlements = p.outerWallTitle + p.outerWallTitleInner + p.gap; p.battlementsInner = 120; p.battlementsTitle = p.battlements + p.battlementsInner + p.gap; p.battlementsTitleInner = 20; p.battlementsSubTitleInner = 18; p.battlementsSubTitle = p.battlementsTitle - p.gap - p.battlementsSubTitleInner; p.battlementsNumbers = 20; p.rGap = 1 / 400; // ratio for N Battlements p.rWB = 0.005; // ratio for W Battlements p.rEB = 0.003; // ratio for W Battlements p.battlementsRingInner = 8; p.WBattlementsTitleInner = 20; //12; // p.WBattlementsTitleInner = // p.battlementsTitleInner - p.battlementsRingInner - p.gap; p.battlementsGain = p.battlementsTitleInner - p.WBattlementsTitleInner; p.WBattlementsInner = p.battlementsInner + p.battlementsGain; p.WbattlementsTitle = p.battlementsTitle + p.battlementsGain; p.WbattlementsSubTitle = p.WbattlementsTitle - p.gap - p.battlementsSubTitleInner; p.rNB = 0.003; p.battlementsBackAdjust = -p.outerWallBackAdjust - 71.6; // Corner Tower p.cornerTowerx = p.battlements + p.battlementsInner / 2; p.cornerTowery = p.battlements + p.battlementsInner / 2; p.cornerTower = p.battlementsInner / 2; //+ p.strokeWidth - 0.5; // Moat p.moat = Math.SQRT2 * (p.battlementsTitle + p.battlementsTitleInner) + 3 * p.gap; p.moatInner = 20; p.moatTitle = p.moat + p.moatInner + p.gap; p.moatTitleInner = 12; // Flanking tower p.flankingTowerCenter = p.battlementsTitle + p.battlementsTitleInner + 2 * p.gap; p.flankingTowerTitleInner = 20; p.flankingTower = p.moat - p.flankingTowerCenter - p.flankingTowerTitleInner - 1 * p.gap - 1; p.flankingTowerSubTitleInner = 15; p.step = 61; p.stepp = 61; p.rFL = 0.008; p.stepInner = p.step - p.flankingTowerSubTitleInner - p.gap; // Watch tower p.watchTowerCenterLong = p.moat - 172 + 3; p.watchTowerCenterShort = p.battlements - 100; p.watchTower = 40; p.watchTowerTitle = 18; // Sentinel tower p.sentielTowerCenter = (Math.sqrt(2) * p.moat) / 2 + 135; p.sentinelTower = 55; p.sentinelTowerTitle = 23; //28; // Ramparts p.ramparts = p.moatTitle + p.moatTitleInner + 0.5 * p.gap; p.rampartsInner = 24; return p; }34:T6b6,Ramparts = ({ r: p.ramparts, innerR: p.rampartsInner, square: true, centerInnerR: true, centerRadius: true, padAngle: 0, opacity: 1, data: [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { color: colorFourNobleTruths, // background gradient gradientID: "1", gradientR: 65, polyFade: 0, polyOpacity: 1, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "1", polyPad: 0, strokeWidth: 0 }; }) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { color: option.includes("rampartsBlue") ? colorCessation : colorPath, //fade: p.rampartsFade, opacity: p.backOpacity, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), // polyId: "1", // polyPad: 0, strokeWidth: 1, strokeColor: option.includes("rampartsBlue") ? colorCessation : colorPath }; }) ) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { r: p.ramparts + 0.6, innerR: p.rampartsInner - 0.6, color: option.includes("rampartsBlue") ? colorCessation : colorPath, opacity: p.backOpacity, //fade: p.rampartsFade, padSquare: 0, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), // polyId: "1", // polyPad: 0, strokeWidth: 0 }; }) ) })35:T4cb,RampartsTitle = ({ r: p.ramparts + p.rampartsInner, innerR: 12, //stroke: 0, strokeWidth: 0.6, //0.2, square: true, centerInnerR: true, centerRadius: true, padAngle: 0, data: [dataOfId("T100N")[0], 2, 3, 4] // any array of dim 4 .map((d, i) => { return { color: option.includes("rampartsBlue") ? colorCessation : colorPath, //fade: p.rampartsFade, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45 + 90 * i, endAngle: -45 + 90 * (i + 1), // polyId: "1", // polyPad: 1, strokeColor: option.includes("rampartsBlue") ? colorCessation : colorPath }; }) // .concat( // [dataOfId("T100N")[0], 2, 3, 4] // any array of dim 4 // .map((d, i) => { // return { // color: colorPath, // //fade: p.rampartsFade, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: -45 + 90 * i, // endAngle: -45 + 90 * (i + 1), // // polyId: "1", // // polyPad: 0, // strokeColor: colorPath // }; // }) // ) })36:T6f3,RampartsNames = ({ r: p.ramparts + p.gap, innerR: p.rampartsInner - 2 * p.gap, square: true, centerInnerR: true, centerRadius: true, color: option.includes("rampartsBlue") ? colorCessation : colorPath, padAngle: 0.06, padSquare: 1.9, // opacity: 0.9, // opacityLimit: 1, // opacity: p.itemOpacity2, opacity: p.itemOpacity, //opaque: false, //strokeWidth: 0.5, //fade: p.rampartsFade, fade: p.itemFade, data: dataOfId("100N") .slice(0, 25) .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45 + 90 * 0, endAngle: 45 + 90 * 0, div: 25, n: i + 1 }; }) .concat( dataOfId("100N") .slice(25, 50) .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45 + 90 * 1, endAngle: 45 + 90 * 1, div: 25, n: i + 1 }; }) ) .concat( dataOfId("100N") .slice(50, 75) .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45 + 90 * 2, endAngle: 45 + 90 * 2, div: 25, n: i + 1 }; }) ) .concat( dataOfId("100N") .slice(75, 100) .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45 + 90 * 3, endAngle: 45 + 90 * 3, div: 25, n: i + 1 }; }) ) })37:T421,grass1 = ({ r: 0, innerR: p.moat, padAngle: 0, strokeWidth: 0, data: [1, 2, 3, 4].map((d, i) => { const arrColors = [colorCessation, colorPath, colorOrigin, colorSuffering]; const arrGradX = option.includes("backrotate") ? [50, 0, 50, 100] //[50, 0, 50, 100] : [0, 0, 100, 100]; //[0, 0, 100, 100]; const arrGradY = option.includes("backrotate") ? [100, 50, 0, 50] //[100, 50, 0, 50] : [100, 0, 0, 100]; //[100, 0, 0, 100]; // const arrGradFX = [50, 45, 50, 55]; // const arrGradFY = [55, 50, 55, 50]; const arrGradFX = [50, 0, 50, 100]; const arrGradFY = [100, 50, 0, 50]; return { color: arrColors[i], startAngle: (option.includes("backrotate") ? -45 : 0) + 90 * i, endAngle: (option.includes("backrotate") ? -45 : 0) + 90 * (i + 1), gradientID: "MO" + i, gradientR: 100, //105, //95 90; //95;105;115; gradientI: 0, gradientFX: arrGradFX[i], gradientFY: arrGradFY[i], gradientX: arrGradX[i], gradientY: arrGradY[i] }; }) })38:Td31,grass2 = ({ r: 0, opacity: 1, //p.backOpacity, padAngle: 0, //strokeWidth: 0, //opacity: p.backOpacity, data: [1, 2, 3, 4] .map((d, i) => { const arrColors = [ colorCessation, colorPath, colorOrigin, colorSuffering ]; const centerX = [0, p.flankingTowerCenter, 0, -p.flankingTowerCenter]; const centerY = [-p.flankingTowerCenter, 0, p.flankingTowerCenter, 0]; return { innerR: p.flankingTower, cx: centerX[i], cy: centerY[i], color: arrColors[i], startAngle: -90 + 90 * i, endAngle: 90 + 1 * 270 + 90 * i, gradientID: "FL" + i, gradientR: 60, gradientI: -50, gradientX: 50, gradientY: 50 }; }) .concat( [1, 2, 3, 4].map((d, i) => { const arrColors = [ colorCessation, colorPath, colorOrigin, colorSuffering ]; const centerX = [0, p.flankingTowerCenter, 0, -p.flankingTowerCenter]; const centerY = [-p.flankingTowerCenter, 0, p.flankingTowerCenter, 0]; return { strokeWidth: 0, innerR: p.flankingTower, opacity: 0.7, cx: centerX[i], cy: centerY[i], color: arrColors[i], startAngle: -90 + 90 * i + 180, endAngle: 90 + 0 * 270 + 90 * i + 180 }; }) ) // .concat( // [1, 2, 3, 4].map((d, i) => { // const arrColors = [ // colorCessation, // colorPath, // colorOrigin, // colorSuffering // ]; // const centerX = [0, p.flankingTowerCenter, 0, -p.flankingTowerCenter]; // const centerY = [-p.flankingTowerCenter, 0, p.flankingTowerCenter, 0]; // return { // strokeWidth: 0, // innerR: p.flankingTower * 0.7, // opacity: 0.7, // cx: centerX[i], // cy: centerY[i], // color: arrColors[i], // startAngle: -90 + 90 * i, // endAngle: 270 + 0 * 270 + 90 * i // }; // }) // ) .concat( [1, 2, 3, 4].map((d, i) => { const arrColors = [ colorCessation, colorPath, colorOrigin, colorSuffering ]; const centerX = [0, p.flankingTowerCenter, 0, -p.flankingTowerCenter]; const centerY = [-p.flankingTowerCenter, 0, p.flankingTowerCenter, 0]; return { strokeWidth: 0, innerR: p.flankingTower * 0.8, opacity: 0.65, cx: centerX[i], cy: centerY[i], color: arrColors[i], startAngle: -90 + 90 * i, endAngle: 90 + 0 * 270 + 90 * i }; }) ) .concat( [1, 2, 3, 4].map((d, i) => { const arrColors = [ colorCessation, colorPath, colorOrigin, colorSuffering ]; const centerX = [0, p.flankingTowerCenter, 0, -p.flankingTowerCenter]; const centerY = [-p.flankingTowerCenter, 0, p.flankingTowerCenter, 0]; return { opacity: 0, opaque: false, innerR: p.flankingTower, cx: centerX[i], cy: centerY[i], color: arrColors[i], startAngle: -90 + 90 * i, endAngle: 90 + 0 * 270 + 90 * i }; }) ) })39:T729,grass33 = ({ cx: 0, cy: 0, r: p.battlements / 2 - p.battlementsBackAdjust, innerR: 0, square: true, squareEnds: true, centerInnerR: true, centerRadius: true, padAngle: 0, strokeWidth: 0, polyPad: 0, polyOpacity: 0.8, opacity: 0.8, data: [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: p.battlements / 2 - p.battlementsBackAdjust, cy: -p.battlements / 2 + p.battlementsBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "1s", color: colorPath }; }) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: p.battlements / 2 - p.battlementsBackAdjust, cy: p.battlements / 2 - p.battlementsBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "2s", color: colorPath }; }) ) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: -p.battlements / 2 + p.battlementsBackAdjust, cy: p.battlements / 2 - p.battlementsBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "3s", color: colorSuffering }; }) ) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: -p.battlements / 2 + p.battlementsBackAdjust, cy: -p.battlements / 2 + p.battlementsBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "4s", color: colorSuffering }; }) ) })3a:Teaf,grass3 = ({ cx: 0, cy: 0, r: p.battlements / 2 - p.outerWallBackAdjust, innerR: 0, square: true, squareEnds: true, centerInnerR: true, centerRadius: true, padAngle: 0, strokeWidth: 0, polyPad: 0, opacity: p.backOpacity, data: [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: p.battlements / 2 - p.outerWallBackAdjust, cy: -p.battlements / 2 + p.outerWallBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "1", color: colorCessation, gradientID: "grass-poly-1", gradientR: 115, gradientX: 100, gradientY: 0 }; }) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: p.battlements / 2 - p.outerWallBackAdjust, cy: p.battlements / 2 - p.outerWallBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "2", color: colorPath, gradientID: "grass-poly-2", gradientR: 115, gradientX: 100, gradientY: 100 }; }) ) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: -p.battlements / 2 + p.outerWallBackAdjust, cy: p.battlements / 2 - p.outerWallBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "3", color: colorOrigin, gradientID: "grass-poly-3", gradientR: 115, gradientX: 0, gradientY: 100 }; }) ) .concat( [1, 2, 3, 4] // any array of dim 4 .map((d, i) => { return { cx: -p.battlements / 2 + p.outerWallBackAdjust, cy: -p.battlements / 2 + p.outerWallBackAdjust, text: "", startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "4", color: colorSuffering, gradientID: "grass-poly-4", gradientR: 115, gradientX: 0, gradientY: 0 }; }) ) // .concat({ // r: p.battlements, // innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, // innerSide: 2 * p.battlements, // text: "", // startAngle: 180 + 45, // endAngle: 270 + 45, // color: colorSuffering, // endPadRatio: -0.158 // }) // .concat({ // r: p.battlements - p.gap, // innerR: p.battlementsInner + p.battlementsTitleInner + 3 * p.gap, // innerSide: 2 * p.battlements, // text: "", // startAngle: 45, // endAngle: 90 + 45, // color: colorPath, // startPadRatio: -0.158 // }) // .concat({ // r: p.battlements, // innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, // innerSide: 2 * (p.battlementsTitle + p.battlementsTitleInner), // text: "", // startAngle: 90 + 45, // endAngle: 90 + 90 + 45, // color: colorSuffering // }) // .concat({ // r: p.battlements, // innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, // innerSide: 2 * (p.battlementsTitle + p.battlementsTitleInner), // text: "", // startAngle: -45, // endAngle: +45, // color: colorCessation, // startRatio: 0.5 // }) // .concat({ // r: p.battlements, // innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, // innerSide: 2 * (p.battlementsTitle + p.battlementsTitleInner), // text: "", // startAngle: -45, // endAngle: +45, // color: colorSuffering, // endRatio: 0.5 // }) })3b:T1929,NESentinelTower = ({ cx: p.sentielTowerCenter, cy: -p.sentielTowerCenter, r: p.sentinelTower + 5, innerR: p.sentinelTowerTitle, square: false, centerRadius: true, centerInnerR: true, fade: p.itemFade, padAngle: 1.4, opacity: p.itemOpacity, color: colorCessation, data: dataOfId("4IMP") .map((d, i) => { return { cx: p.sentielTowerCenter - 10, cy: -p.sentielTowerCenter + 10, square: true, r: p.sentinelTower + p.sentinelTowerTitle + p.gap, innerR: 0, startAngle: 0 + 90 * i, endAngle: 0 + 90 * (i + 1), polyId: "senta-2", polyOpacity: p.backOpacity, polyPad: 0, padAngle: 1 }; }) .concat( [ dataOfId("4IMP")[2], dataOfId("4IMP")[0], dataOfId("4IMP")[1], dataOfId("4IMP")[3] ].map((d, i) => { return { cx: p.sentielTowerCenter - 10, cy: -p.sentielTowerCenter + 10, square: true, r: p.sentinelTower, innerR: p.sentinelTowerTitle, fade: 0, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 0 + 90 * i, endAngle: 0 + 90 * (i + 1), polyId: "se3n-223", polyPad: 3.5, padAngle: 1, gradientID: "se1nt-12", gradientR: 95, gradientI: 40, invertGradient: true }; }) ) .concat( dataOfId("T4IMP").map((d) => { return { cx: p.sentielTowerCenter - 10, cy: -p.sentielTowerCenter + 10, square: true, r: p.sentinelTower, centerText: d.text, fontSize: d.fontSize + 3, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) .concat( dataOfId("4ANS").map((d, i) => { return { square: true, cx: -p.sentielTowerCenter - 2, cy: -p.sentielTowerCenter - 2, r: p.sentinelTower + p.sentinelTowerTitle + 3 * p.gap, innerR: 0, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "sesfa-nt-2", polyOpacity: p.backOpacity, polyPad: 0, color: colorSuffering, padAngle: 1 }; }) ) .concat( dataOfId("4ANS").map((d, i) => { return { square: true, cx: -p.sentielTowerCenter - 2, cy: -p.sentielTowerCenter - 2, fade: 0, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "sen-22", polyPad: 3.5, gradientID: "df--1", gradientR: 140, gradientI: 40, invertGradient: true, color: colorSuffering, padAngle: 1 }; }) ) .concat( dataOfId("T4ANS").map((d) => { return { square: true, cx: -p.sentielTowerCenter - 2, cy: -p.sentielTowerCenter - 2, centerText: d.text, fontSize: d.fontSize + 3, letterSpacing: d.letterSpacing, up: d.lineHeight, color: colorSuffering }; }) ) .concat( dataOfId("7TEN").map((d, i) => { // background return { square: true, cx: -p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + p.sentinelTowerTitle + 5 + 5 + p.gap, innerR: 0, color: colorOrigin, startAngle: 0 + (360 / 7) * i, endAngle: 0 + (360 / 7) * (i + 1), polyId: "65251", polyOpacity: p.backOpacity, polyPad: 0 }; }) ) .concat( dataOfId("7TEN").map((d, i) => { return { fade: 0, square: true, cx: -p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + 5 + 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 0 + (360 / 7) * i, endAngle: 0 + (360 / 7) * (i + 1), polyId: "7FdsOE", polyPad: 2.5, gradientID: "asd7FOg", gradientR: 105, gradientY: 48, gradientI: 38, invertGradient: true }; }) ) .concat( dataOfId("T7TEN").map((d) => { return { square: true, cx: -p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + 5 + 5, centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight, color: colorOrigin }; }) ) .concat( dataOfId("37WTA").map((d, i) => { // background return { square: true, cx: p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + p.sentinelTowerTitle + 5 + 5 + p.gap, innerR: 0, color: colorPath, startAngle: 180 + (360 / 7) * i, endAngle: 180 + (360 / 7) * (i + 1), polyId: "65d251", polyOpacity: p.backOpacity, polyPad: 0 }; }) ) .concat( dataOfId("37WTA").map((d, i) => { return { fade: 0, square: true, cx: p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + 5 + 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 + (360 / 7) * i, endAngle: 180 + (360 / 7) * (i + 1), polyId: "7FdssdfffOE", polyPad: 2.5, gradientID: "asd7FOdg", gradientR: 105, gradientY: 52, gradientI: 40, invertGradient: true }; }) ) .concat( dataOfId("T37WTA").map((d) => { return { square: true, cx: p.sentielTowerCenter, cy: p.sentielTowerCenter, r: p.sentinelTower + 5 + 5, centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight, color: colorPath }; }) ) })3c:T5ff,NNEWatchTower = ({ cx: p.watchTowerCenterShort, cy: -p.watchTowerCenterLong, cx: option.includes("backrotate") ? p.watchTowerCenterShort : p.watchTowerCenterLong, cy: option.includes("backrotate") ? -p.watchTowerCenterLong : -p.watchTowerCenterShort, r: p.watchTower, innerR: p.watchTowerTitle, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, up: 0.3, padAngle: 1.5, opacity: p.itemOpacity, color: colorCessation, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "ttt-12", gradientR: 100, gradientI: 40, invertGradient: true } ] .concat( dataOfId("4FOSE") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) // polyId: "31PL", // polyPad: 0, // strokeWidth: 0 }; }) ) .concat( dataOfId("T4FOSE").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })3d:T601,NNWWatchTower = ({ cx: -p.watchTowerCenterShort, cy: -p.watchTowerCenterLong, cx: option.includes("backrotate") ? -p.watchTowerCenterShort : +p.watchTowerCenterShort, cy: option.includes("backrotate") ? -p.watchTowerCenterLong : -p.watchTowerCenterLong, r: p.watchTower, innerR: p.watchTowerTitle, up: -0.4, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorCessation, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "ttt-sd12", gradientR: 100, gradientI: 40, invertGradient: true } ] .concat( dataOfId("4DA") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) // polyId: "31PL", // polyPad: 0, // strokeWidth: 0 }; }) ) .concat( dataOfId("T4DA").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })3e:T5f8,SSEWatchTower = ({ cx: p.watchTowerCenterShort, cy: p.watchTowerCenterLong, cx: option.includes("backrotate") ? p.watchTowerCenterShort : -p.watchTowerCenterShort, cy: option.includes("backrotate") ? p.watchTowerCenterLong : p.watchTowerCenterLong, r: p.watchTower, innerR: p.watchTowerTitle, up: 0, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorOrigin, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "ttast-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( dataOfId("3CON") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 0 + 120 * i, endAngle: 0 + 120 * (i + 1) // polyId: "31PL", // polyPad: 0, // strokeWidth: 0 }; }) ) .concat( dataOfId("T3CON").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })3f:T5fc,SSWWatchTower = ({ cx: -p.watchTowerCenterShort, cy: p.watchTowerCenterLong, cx: option.includes("backrotate") ? -p.watchTowerCenterShort : -p.watchTowerCenterLong, cy: option.includes("backrotate") ? p.watchTowerCenterLong : p.watchTowerCenterShort, r: p.watchTower, innerR: p.watchTowerTitle, up: 0, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorOrigin, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "ttasdat-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( dataOfId("3VAN") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 0 + 120 * i, endAngle: 0 + 120 * (i + 1) // polyId: "31PL", // polyPad: 0, // strokeWidth: 0 }; }) ) .concat( dataOfId("T3VAN").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })40:T5a5,ENEWatchTower = ({ cx: p.watchTowerCenterLong, cy: -p.watchTowerCenterShort, cx: option.includes("backrotate") ? p.watchTowerCenterLong : +p.watchTowerCenterLong, cy: option.includes("backrotate") ? -p.watchTowerCenterShort : p.watchTowerCenterShort, r: p.watchTower, innerR: p.watchTowerTitle, up: -0.4, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorPath, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "tttasdv-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( dataOfId("4BOP") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) }; }) ) .concat( dataOfId("T4BOP").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })41:T5b3,WNWWatchTower = ({ cx: -p.watchTowerCenterLong, cy: -p.watchTowerCenterShort, cx: option.includes("backrotate") ? -p.watchTowerCenterLong : -p.watchTowerCenterShort, cy: option.includes("backrotate") ? -p.watchTowerCenterShort : -p.watchTowerCenterLong, r: p.watchTower, innerR: p.watchTowerTitle, up: -0.4, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorSuffering, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "tasdfasfdtt-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( dataOfId("4HEAV") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) }; }) ) .concat( dataOfId("T4HEAV").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })42:T612,ESEWatchTower = ({ cx: p.watchTowerCenterLong, cy: p.watchTowerCenterShort, cx: option.includes("backrotate") ? p.watchTowerCenterLong : +p.watchTowerCenterShort, cy: option.includes("backrotate") ? p.watchTowerCenterShort : p.watchTowerCenterLong, r: p.watchTower, innerR: p.watchTowerTitle, up: -0.4, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorPath, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "tasfdasdfasdftt-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( [ dataOfId("5FAC")[3], dataOfId("5FAC")[1], dataOfId("5FAC")[0], dataOfId("5FAC")[2], dataOfId("5FAC")[4] ].map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 0 + (360 / 5) * i, endAngle: 0 + (360 / 5) * (i + 1) }; }) ) .concat( dataOfId("T5FAC").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })43:T5a8,WSWWatchTower = ({ cx: -p.watchTowerCenterLong, cy: p.watchTowerCenterShort, cx: option.includes("backrotate") ? -p.watchTowerCenterLong : -p.watchTowerCenterLong, cy: option.includes("backrotate") ? p.watchTowerCenterShort : -p.watchTowerCenterShort, r: p.watchTower, innerR: p.watchTowerTitle, up: 0, //square: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.5, opacity: p.itemOpacity, color: colorSuffering, data: [ { r: 0, innerR: p.watchTower + p.watchTowerTitle + p.gap, fade: p.itemFade, opacity: p.backOpacity, startAngle: 0, endAngle: 360 }, { r: 0, innerR: p.watchTower - p.gap, fade: 0, opacity: 1, startAngle: 0, endAngle: 360, gradientID: "tttqwer-12", gradientR: 100, gradientI: 42, invertGradient: true } ] .concat( dataOfId("4NUT") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) }; }) ) .concat( dataOfId("T4NUT").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })44:T7de,Moat = ({ r: p.moat, innerR: p.moatInner, fade: p.itemFade, opacity: p.itemOpacity, padAngle: 0.1, data: [ { r: p.moat - p.gap, innerR: p.moatInner + p.moatTitleInner + 2.2 * p.gap, text: "", // background color: colorCessation, startAngle: -90, endAngle: 90, strokeWidth: 0, fade: 0, opacity: 0.8, padAngle: 0 }, { r: p.moat - p.gap, innerR: p.moatInner + p.moatTitleInner + 2.2 * p.gap, text: "", // background color: colorSuffering, startAngle: 90, endAngle: 270, strokeWidth: 0, fade: 0, opacity: 0.8, padAngle: 0 }, { r: p.moat - p.gap, innerR: p.moatInner + p.moatTitleInner + 2 * p.gap, text: "", // background color: colorCessation, startAngle: -90, endAngle: 90, strokeWidth: 1, fade: 0, opacity: p.backOpacity, padAngle: 0.1 }, { r: p.moat - p.gap, innerR: p.moatInner + p.moatTitleInner + 2 * p.gap, text: "", // background color: colorSuffering, startAngle: 90, endAngle: 270, strokeWidth: 1, fade: 0, opacity: p.backOpacity, padAngle: 0.1 } ] .concat( dataOfId("33SYN").map((d, i) => { return { //gPadAngle: 1, endsPadAngle: 0.15, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: -90, endAngle: 90, div: 33, n: i + 1 }; }) ) .concat( dataOfId("32PAR") .reverse() .map((d, i) => { return { endsPadAngle: 0.15, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 90, endAngle: 270, div: 32, n: i + 1 }; }) ) })45:T1735,NFlankingTowerOld = ({ r: p.flankingTowerCenter + p.gap, innerR: p.step + 4, innerSide: 432 - 4, square: true, centerInnerR: true, padAngle: 0, padSquare: 1, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorCessation, data: dataOfId("3PLG1") .map((d, i) => { // Buddha Background return { opacity: p.backOpacity, innerR: p.step, innerSide: 242 + 5, r: p.flankingTowerCenter + p.step + 2.5 + p.step + 2.5, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) .concat( dataOfId("3PLG") // Buddha Qualities .slice(1, 5) .map((d, i) => { return { padSquare: 1.7, innerR: p.step / 3, innerSide: 242, r: p.flankingTowerCenter + p.step + 2.5 + p.step + 2.5 + 1.5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1 }; }) ) .concat( dataOfId("3PLG") // Buddha Qualities 2 .slice(5, 9) .map((d, i) => { return { padSquare: 1.7, innerR: p.step / 3, innerSide: 242, r: p.flankingTowerCenter + p.step + 2.5 + p.step + 25 + 1, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1 }; }) ) .concat( dataOfId("3PLG1").map((d, i) => { // Buddha return { opacity: 1, innerR: 15, innerSide: 247, r: p.flankingTowerCenter + p.step + 2.5 + p.step + 2.5 + p.step - 15, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG11").map((d, i) => { // Dhamma return { opacity: p.backOpacity2, innerR: p.step - 4 - p.gap, innerSide: 373, r: p.flankingTowerCenter + p.gap + p.step + 2.5 + 4, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG11").map((d, i) => { // Dhamma Title return { opacity: 1, innerR: 15, innerSide: 373, r: p.flankingTowerCenter + p.step + 2.5 + p.step - 15, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG") // Dhamma Qualities .slice(11, 14) .map((d, i) => { return { innerR: p.step / 3.8, innerSide: 375 - 8, r: p.flankingTowerCenter + p.step + p.gap + 2.5 + 25, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3PLG") // Dhamma Qualities 2 .slice(14, 17) .map((d, i) => { return { innerR: p.step / 3.8, innerSide: 375 - 8, r: p.flankingTowerCenter + p.step + p.gap + 2.5 + 7, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3PLG18").map((d, i) => { // Sangha return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG") // SAangha Qualities .slice(18, 22) .map((d, i) => { return { innerR: p.step / 4.5, innerSide: 432 - 8, r: p.flankingTowerCenter + p.gap + 34, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1 }; }) ) .concat( dataOfId("3PLG") // Sangha Qualities 2 .slice(22, 26) .map((d, i) => { return { innerR: p.step / 4.5, innerSide: 432 - 8, r: p.flankingTowerCenter + p.gap + 18, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1 }; }) ) .concat( dataOfId("3PLG27").map((d, i) => { // Sangha Quality 3 return { innerR: p.step / 4.5, innerSide: 432 - 8, r: p.flankingTowerCenter + p.gap + 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG18").map((d, i) => { // Sangha return { opacity: 1, innerR: 15, innerSide: 432 - 4, r: p.flankingTowerCenter + p.gap + p.step - 15 + 4, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) })46:T1ca4,NFlankingTower = ({ r: p.flankingTowerCenter + 1 * p.gap, innerR: p.step, innerSide: 422, square: true, centerInnerR: true, padAngle: 0, padSquare: 1, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorCessation, data: dataOfId("3PLG1") .map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) .concat( dataOfId("3PLG1").map((d, i) => { // Buddha return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, innerSide: 223, r: p.flankingTowerCenter + 3 * p.step + 3 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG") .slice(2, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("3PLG") .slice(6, 10) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // .concat( dataOfId("3PLG11").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG11").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG") .slice(11, 14) .map((d, i) => { return { padSquare: 1.1, innerR: p.stepInner / 2 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 3, n: i + 1, startRatio: p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("3PLG") .slice(14, 17) .map((d, i) => { return { padSquare: 1.1, innerR: p.stepInner / 2 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 3, n: i + 1, startRatio: p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // .concat( dataOfId("3PLG18").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG18").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45 }; }) ) .concat( dataOfId("3PLG") .slice(18, 22) .map((d, i) => { return { padSquare: 1.2, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("3PLG") .slice(22, 26) .map((d, i) => { return { padSquare: 1.2, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("3PLG27").map((d, i) => { return { padSquare: 2.3, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) })47:T4174,WFlankingTower = ({ r: p.flankingTowerCenter + 1 * p.gap, innerR: p.step, innerSide: 422, square: true, centerInnerR: true, padAngle: 0, padSquare: 1, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorSuffering, data: dataOfId("T5REC") .map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 2 / 3 - p.rFL }; }) .concat( dataOfId("T5REC").map((d, i) => { // Buddha return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, innerSide: 223, r: p.flankingTowerCenter + 3 * p.step + 3 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 2 / 3 - p.rFL }; }) ) .concat( dataOfId("5REC") .slice(0, 2) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 2 / 3 - 2 * p.rFL }; }) ) .concat( dataOfId("5REC") .slice(2, 4) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 2 / 3 - 2 * p.rFL }; }) ) .concat( dataOfId("5REC5").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: p.rFL, endRatio: 2 / 3 - 2 * p.rFL }; }) ) .concat( dataOfId("T3STA").map((d, i) => { return { opacity: p.backOpacity, innerR: p.step, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 2 / 3 + p.rFL / 2 }; }) ) .concat( dataOfId("T3STA").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 223, r: p.flankingTowerCenter + 3 * p.step + 3 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 2 / 3 + p.rFL / 2 }; }) ) .concat( dataOfId("3STA1").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 2 / 3 + 1.5 * p.rFL, endRatio: 1 - p.rFL }; }) ) .concat( dataOfId("3STA2").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 2 / 3 + 1.5 * p.rFL, endRatio: 1 - p.rFL }; }) ) .concat( dataOfId("3STA3").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 2 / 3 + 1.5 * p.rFL, endRatio: 1 - p.rFL }; }) ) // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // .concat( dataOfId("T4POS").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 1.3 / 5 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T4POS").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 1.3 / 5 - 0.45 * p.rFL }; }) ) .concat( dataOfId("4POS") .slice(0, 2) .map((d, i) => { return { padSquare: 2.5, innerR: p.stepInner / 2 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 1.3 / 5 - 1.3 * p.rFL }; }) ) .concat( dataOfId("4POS") .slice(2, 4) .map((d, i) => { return { padSquare: 2.5, innerR: p.stepInner / 2 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 1.3 / 5 - 1.3 * p.rFL }; }) ) .concat( dataOfId("T9CEM").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 1.3 / 5 + 0.45 * p.rFL, endRatio: 1 }; }) ) .concat( dataOfId("T9CEM").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 1.3 / 5 + 0.45 * p.rFL, endRatio: 1 }; }) ) .concat( dataOfId("9CEM") .slice(0, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, startRatio: 1.3 / 5 + 1.5 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("9CEM") .slice(3, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, startRatio: 1.3 / 5 + 1.5 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("9CEM") .slice(6, 9) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, startRatio: 1.3 / 5 + 1.5 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // .concat( dataOfId("T10MED").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 1 / 2 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T10MED").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, endRatio: 1 / 2 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T10PER").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 1 / 2 + 0.45 * p.rFL }; }) ) .concat( dataOfId("T10PER").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, startRatio: 1 / 2 + 0.45 * p.rFL }; }) ) .concat( dataOfId("10PER") .slice(0, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, startRatio: 1 / 2 + 1.2 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("10PER") .slice(3, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, startRatio: 1 / 2 + 1.2 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("10PER") .slice(6, 10) .map((d, i) => { return { padSquare: 2.3, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 4, n: i + 1, startRatio: 1 / 2 + 1.2 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("10MED") .slice(0, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, endRatio: 1 / 2 - 1.2 * p.rFL, startRatio: 0.7 * p.rFL }; }) ) .concat( dataOfId("10MED") .slice(3, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 3, n: i + 1, endRatio: 1 / 2 - 1.2 * p.rFL, startRatio: 0.7 * p.rFL }; }) ) .concat( dataOfId("10MED") .slice(6, 10) .map((d, i) => { return { padSquare: 2.3, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, div: 4, n: i + 1, endRatio: 1 / 2 - 1.2 * p.rFL, startRatio: 0.7 * p.rFL }; }) ) })48:T44ff,SFlankingTower = ({ r: p.flankingTowerCenter + 1 * p.gap, innerR: p.step, innerSide: 422, square: true, centerInnerR: true, padAngle: 0, padSquare: 1, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorOrigin, data: // dataOfId("T20WV") // .map((d, i) => { // return { // opacity: p.backOpacity, // innerR: p.step, // innerSide: 223, // r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, // text: "", // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // endRatio: 1 / 2 - p.rFL // }; // }) // .concat( // dataOfId("T20WV").map((d, i) => { // // Buddha // return { // opacity: 1, fade: 0, // innerR: p.flankingTowerSubTitleInner, // innerSide: 223, // r: // p.flankingTowerCenter + // 3 * p.step + // 3 * p.gap - // p.flankingTowerSubTitleInner, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // endRatio: 1 / 2 - p.rFL // }; // }) // ) // .concat( // dataOfId("20WV") // .slice(0, 2) // .map((d, i) => { // return { // padSquare: 1.7, // innerR: p.stepInner / 2 - p.gap, // innerSide: 223, // r: // p.flankingTowerCenter + // 2 * p.step + // 4 * p.gap + // (p.stepInner * 1) / 2, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // div: 2, // n: i + 1, // startRatio: p.rFL, // endRatio: 1 / 2 - 2 * p.rFL // }; // }) // ) // .concat( // dataOfId("20WV") // .slice(2, 4) // .map((d, i) => { // return { // padSquare: 1.7, // innerR: p.stepInner / 2 - p.gap, // innerSide: 223, // r: // p.flankingTowerCenter + // 2 * p.step + // 4 * p.gap + // (p.stepInner * 0) / 2, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // div: 2, // n: i + 1, // startRatio: p.rFL, // endRatio: 1 / 2 - 2 * p.rFL // }; // }) // ) //.concat( dataOfId("T4PER") .map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45 //startRatio: 1 + p.rFL }; }) //) .concat( dataOfId("T4PER").map((d, i) => { // Buddha return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, innerSide: 223, r: p.flankingTowerCenter + 3 * p.step + 3 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45 //startRatio: 1 + p.rFL }; }) ) .concat( dataOfId("4PER") .slice(2, 4) .reverse() .map((d, i) => { return { padSquare: 1.3, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: 1.5 * p.rFL, endRatio: 1 - 1.5 * p.rFL }; }) ) .concat( dataOfId("4PER") .slice(0, 2) .reverse() .map((d, i) => { return { padSquare: 1.3, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: 1.5 * p.rFL, endRatio: 1 - 1.5 * p.rFL }; }) ) // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // .concat( dataOfId("62WV7").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, endRatio: 1 / 2 - 0.45 * p.rFL }; }) ) .concat( dataOfId("62WV7").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, endRatio: 1 / 2 - 0.45 * p.rFL }; }) ) .concat( dataOfId("62WV") .slice(7, 9) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 1 / 2 - 1.3 * p.rFL }; }) ) .concat( dataOfId("62WV") .slice(10, 12) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 1 / 2 - 1.3 * p.rFL }; }) ) .concat( dataOfId("62WV10").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, startRatio: p.rFL, endRatio: 1 / 2 - 1.3 * p.rFL }; }) ) .concat( dataOfId("62WV1").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, startRatio: 1 / 2 + 0.45 * p.rFL, endRatio: 1 }; }) ) .concat( dataOfId("62WV1").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, startRatio: 1 / 2 + 0.45 * p.rFL, endRatio: 1 }; }) ) .concat( dataOfId("62WV") .slice(1, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: 1 / 2 + 1.3 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("62WV") .slice(4, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 2, n: i + 1, startRatio: 1 / 2 + 1.3 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) .concat( dataOfId("62WV4").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, startRatio: 1 / 2 + 1.3 * p.rFL, endRatio: 1 - 1 * p.rFL }; }) ) // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // .concat( // dataOfId("T10WV").map((d, i) => { // return { // opacity: p.backOpacity2, // text: "", // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // endRatio: 1 / 2 - 0.45 * p.rFL // }; // }) // ) // .concat( // dataOfId("T10WV").map((d, i) => { // return { // opacity: 1, // innerR: p.flankingTowerSubTitleInner, // r: // p.flankingTowerCenter + // +p.gap + // p.step - // p.flankingTowerSubTitleInner, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // endRatio: 1 / 2 - 0.45 * p.rFL // }; // }) // ) .concat( dataOfId("T10IND").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45 //startRatio: 1 / 2 + 0.45 * p.rFL }; }) ) .concat( dataOfId("T10IND").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45 //startRatio: 1 / 2 + 0.45 * p.rFL }; }) ) .concat( dataOfId("10IND") .slice(0, 3) .map((d, i) => { return { padSquare: 1, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 3, n: i + 1, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("10IND") .slice(3, 6) .map((d, i) => { return { padSquare: 1, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 3, n: i + 1, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("10IND") .slice(6, 10) .map((d, i) => { return { padSquare: 1.2, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 - 45, endAngle: 180 + 45, div: 4, n: i + 1, startRatio: 0.7 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) // .concat( // dataOfId("10WV") // .slice(0, 3) // .map((d, i) => { // return { // padSquare: 1.7, // innerR: p.stepInner / 3 - p.gap, // r: // p.flankingTowerCenter + // 0 * p.step + // 2 * p.gap + // (p.stepInner * 2) / 3, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // div: 3, // n: i + 1, // endRatio: 1 / 2 - p.rFL, // startRatio: 0.7 * p.rFL // }; // }) // ) // .concat( // dataOfId("10WV") // .slice(3, 6) // .map((d, i) => { // return { // padSquare: 1.7, // innerR: p.stepInner / 3 - p.gap, // r: // p.flankingTowerCenter + // 0 * p.step + // 2 * p.gap + // (p.stepInner * 1) / 3, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // div: 3, // n: i + 1, // endRatio: 1 / 2 - p.rFL, // startRatio: 0.7 * p.rFL // }; // }) // ) // .concat( // dataOfId("10WV") // .slice(6, 10) // .map((d, i) => { // return { // padSquare: 2.3, // innerR: p.stepInner / 3 - p.gap, // r: // p.flankingTowerCenter + // 0 * p.step + // 2 * p.gap + // (p.stepInner * 0) / 3, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 - 45, // endAngle: 180 + 45, // div: 4, // n: i + 1, // endRatio: 1 / 2 - p.rFL, // startRatio: 0.7 * p.rFL // }; // }) // ) })49:T39f2,EFlankingTower = ({ r: p.flankingTowerCenter + 1 * p.gap, innerR: p.step, innerSide: 422, square: true, centerInnerR: true, padAngle: 0, padSquare: 1, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorPath, data: dataOfId("T6GRAD") .map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 3 * p.gap, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45 //endRatio: 1 / 2 - p.rFL }; }) .concat( dataOfId("T6GRAD").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, innerSide: 223, r: p.flankingTowerCenter + 3 * p.step + 3 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45 //endRatio: 1 / 2 - p.rFL }; }) ) .concat( dataOfId("6GRAD") .slice(0, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, startRatio: p.rFL, endRatio: 1 - p.rFL //1 / 2 - 1 * p.rFL }; }) ) .concat( dataOfId("6GRAD") .slice(3, 6) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, innerSide: 223, r: p.flankingTowerCenter + 2 * p.step + 4 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, startRatio: p.rFL, endRatio: 1 - p.rFL //1 / 2 - 1 * p.rFL }; }) ) // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // // SECOND STEP // .concat( dataOfId("T7PUR").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, endRatio: 7 / 10 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T7PUR").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, endRatio: 7 / 10 - 0.45 * p.rFL }; }) ) .concat( dataOfId("7PUR") .slice(0, 3) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, startRatio: p.rFL, endRatio: 7 / 10 - 1.3 * p.rFL }; }) ) .concat( dataOfId("7PUR") .slice(3, 5) .map((d, i) => { return { padSquare: 1.1, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 7 / 10 - 1.3 * p.rFL }; }) ) .concat( dataOfId("7PUR") .slice(5, 7) .map((d, i) => { return { padSquare: 1.1, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 2, n: i + 1, startRatio: p.rFL, endRatio: 7 / 10 - 1.3 * p.rFL }; }) ) .concat( dataOfId("T3PIL").map((d, i) => { return { opacity: p.backOpacity2, innerR: p.step, innerSide: 360, r: p.flankingTowerCenter + 2 * p.gap + p.step, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 10 + 0.4 * p.rFL, endRatio: 1 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T3PIL").map((d, i) => { return { opacity: 1, fade: 0, innerR: 15, innerSide: 360, r: p.flankingTowerCenter + 2 * p.step + 2 * p.gap - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 10 + 0.4 * p.rFL, endRatio: 1 - 0.45 * p.rFL }; }) ) .concat( dataOfId("3PIL1").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 10 + 1.2 * p.rFL, endRatio: 1 - 1.3 * p.rFL }; }) ) .concat( dataOfId("3PIL2").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 10 + 1.2 * p.rFL, endRatio: 1 - 1.3 * p.rFL }; }) ) .concat( dataOfId("3PIL3").map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, innerSide: 360, r: p.flankingTowerCenter + 1 * p.step + 3 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 10 + 1.2 * p.rFL, endRatio: 1 - 1.3 * p.rFL }; }) ) // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // // FIRST STEP // .concat( dataOfId("T7ESS").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, endRatio: 7 / 11 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T7ESS").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, endRatio: 7 / 11 - 0.45 * p.rFL }; }) ) .concat( dataOfId("T4PRA").map((d, i) => { return { opacity: p.backOpacity2, text: "", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 11 + 0.45 * p.rFL }; }) ) .concat( dataOfId("T4PRA").map((d, i) => { return { opacity: 1, fade: 0, innerR: p.flankingTowerSubTitleInner, r: p.flankingTowerCenter + +p.gap + p.step - p.flankingTowerSubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 11 + 0.45 * p.rFL }; }) ) .concat( dataOfId("7ESS8") //.slice(0, 2) .map((d, i) => { return { opacity: p.backOpacity2 - 0.1, fade: 0, padSquare: 1.7, innerR: p.stepInner / 1.5 - 2 * p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3, text: "", startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 11 / 3 + 0.6 * p.rFL, endRatio: 7 / 11 - 1.2 * p.rFL }; }) ) .concat( dataOfId("7ESS8") //.slice(0, 2) .map((d, i) => { return { opacity: p.subOpacity, fade: p.subFade, padSquare: 1.7, innerR: p.stepInner / 3 - 2 * p.gap, r: p.flankingTowerCenter + 0 * p.step + 3 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 7 / 11 / 3 + 0.6 * p.rFL, endRatio: 7 / 11 - 1.2 * p.rFL }; }) ) .concat( dataOfId("7ESS") .slice(0, 1) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 2) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, endRatio: 7 / 11 - 1.2 * p.rFL, startRatio: 0.7 * p.rFL }; }) ) .concat( dataOfId("7ESS") .slice(1, 4) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: i < 1 ? p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 3 : p.flankingTowerCenter + 0 * p.step + 3 * p.gap + (p.stepInner * 1) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, endRatio: i < 1 ? 7 / 11 - 1.2 * p.rFL : 7 / 11 - 2 * p.rFL, startRatio: i < 1 ? 0.7 * p.rFL : 2.5 * p.rFL }; }) ) .concat( dataOfId("7ESS") .slice(4, 7) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 3 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 3, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 3, n: i + 1, endRatio: 7 / 11 - 1.2 * p.rFL, startRatio: 0.7 * p.rFL }; }) ) .concat( dataOfId("4PRA") .slice(0, 2) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 1) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 2, n: i + 1, startRatio: 7 / 11 + 1.2 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) .concat( dataOfId("4PRA") .slice(2, 4) .map((d, i) => { return { padSquare: 1.7, innerR: p.stepInner / 2 - p.gap, r: p.flankingTowerCenter + 0 * p.step + 2 * p.gap + (p.stepInner * 0) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, div: 2, n: i + 1, startRatio: 7 / 11 + 1.2 * p.rFL, endRatio: 1 - 0.7 * p.rFL }; }) ) })4a:Tbb5,NEBattlements = ({ r: p.battlements + p.battlementsNumbers + 3 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 3.5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, color: colorPath, data: dataOfId("9LEVM") .slice(1, 6) .reverse() .map((d, i) => { return { innerR: i < 3 ? p.battlementsInner - p.battlementsNumbers - 3 * p.gap - 2 * p.battlementsRingInner - 2 * p.gap : p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap - 2 * p.battlementsRingInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 5, n: i + 1, startRatio: 1 / 2 + (1 / 2 / 12) * 7 + 1.7 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) .concat( dataOfId("9LEVM") .slice(7, 11) .reverse() .map((d, i) => { return { innerR: p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: 1 / 2 + (1 / 2 / 12) * 3 + 1.5 * p.rNB, endRatio: 1 / 2 + (1 / 2 / 12) * 7 - 1.1 * p.rNB }; }) ) .concat( dataOfId("9LEVM12").map((d, i) => { return { r: p.battlements + p.battlementsNumbers + 3 * p.gap, innerR: p.battlementsInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 2 + 1.4 * p.rNB, endRatio: 1 / 2 + (1 / 2 / 12) * 3 - 0.2 * p.rNB }; }) ) .concat( dataOfId("2NIB") .reverse() .map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner - 1 * p.gap - p.battlementsRingInner - p.gap, color: colorCessation, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 2, n: i + 1, startRatio: 1 / 2 + 0.001 + 1.3 * p.rNB, //5 / 32, endRatio: 1 / 2 + (1 / 2 / 12) * 2 - 1.3 * p.rNB }; }) ) })4b:T75d,NEBattlementsSubSubTitle = ({ r: p.battlementsTitle - 1 * p.gap - 1 * p.battlementsRingInner, innerR: p.battlementsRingInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, opacity: p.subOpacity, centerRadius: true, squareEnds: true, color: colorPath, data: dataOfId("9LEVM14") .map((d, i) => { return { r: p.battlementsTitle - 2 * p.gap - 2 * p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: p.SubOpacity, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 7 + 1.7 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) // ) .concat( dataOfId("9LEVM13").map((d, i) => { return { r: p.battlementsTitle - 3 * p.gap - 3 * p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 10 + 0 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) ) .concat( dataOfId("9LEVM15").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 7 + 1.7 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) ) .concat( dataOfId("9LEVM15").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 3 + 1.5 * p.rNB, endRatio: 1 / 2 + (1 / 2 / 12) * 7 - 1.1 * p.rNB }; }) ) })4c:T7e8,NEBattlementsNumbers = ({ r: p.battlements + 2 * p.gap, innerR: p.battlementsNumbers, square: true, centerInnerR: true, padAngle: 0, innerSide: (p.battlements - p.gap) * 2, padSquare: 4, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorPath, data: dataOfId("9LEVM") .slice(1, 4) .map((d, i) => { return { text: String(4 - i), fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 5, n: i + 1, startRatio: 1 / 2 + (1 / 2 / 12) * 7 + 1.7 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) .concat( // the one ;-) dataOfId("9LEVM2").map((d, i) => { return { text: "1", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 10 + 0 * p.rNB, endRatio: 1 - 2 * p.rNB }; }) ) .concat( dataOfId("9LEVM") .slice(6, 10) .map((d, i) => { return { text: String(4 + 4 - i), fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, div: 4, n: i + 1, startRatio: 1 / 2 + (1 / 2 / 12) * 3 + 1.5 * p.rNB, endRatio: 1 / 2 + (1 / 2 / 12) * 7 - 1.1 * p.rNB }; }) ) .concat( dataOfId("9LEVM") .slice(6, 7) .map((d, i) => { return { r: p.battlements + 2 * p.gap - p.gap, innerR: p.battlementsNumbers + p.gap, text: "9", fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 1 / 2 + (1 / 2 / 12) * 2 + 1.4 * p.rNB, endRatio: 1 / 2 + (1 / 2 / 12) * 3 - 0.2 * p.rNB }; }) ) })4d:T18d4,NBattlementsTitle = ({ r: p.battlementsTitle, innerR: p.battlementsTitleInner, innerSide: (p.battlements - p.gap / 2) * 2, square: true, centerInnerR: true, fade: 0, padAngle: 0, opacity: 1, centerRadius: true, squareEnds: true, // padSquare: 0.0, padRatio: 0.0015, data: dataOfId("T9SUFP") .map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, opacity: p.backOpacity, text: "", color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: 0, //5 / 32, endRatio: 1 / 2 - 0.001 }; }) .concat( dataOfId("T9SUFP").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner + p.battlementsTitleInner - p.gap, opacity: p.backOpacity2, text: "", color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: p.rNB, //5 / 32, endRatio: ((1 / 2) * 4) / 12 }; }) ) .concat( dataOfId("T9SUFP").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: p.rNB, endRatio: ((1 / 2) * 4) / 12 }; }) ) .concat( dataOfId("T3SUFC").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner + p.battlementsTitleInner - p.gap, opacity: p.backOpacity2, text: "", color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 4) / 12, //5 / 32, endRatio: ((1 / 2) * 10.4) / 12 }; }) ) .concat( dataOfId("T3SUFC").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 4) / 12, //5 / 32, endRatio: ((1 / 2) * 10.4) / 12 }; }) ) .concat( dataOfId("TSUFF").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner + p.battlementsTitleInner - p.gap, opacity: p.backOpacity2, text: "", color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 10.4) / 12, //5 / 32, endRatio: 1 / 2 - p.rNB * 1.2 }; }) ) .concat( dataOfId("TSUFF").map((d, i) => { return { r: p.battlementsTitle - p.battlementsRingInner - p.gap, innerR: p.battlementsTitleInner + p.gap + p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 10.4) / 12, //5 / 32, endRatio: ((1 / 2) * 5) / 5 - p.rNB * 1.2 }; }) ) // EAST SIDE // // EAST SIDE // // EAST SIDE // // EAST SIDE // // EAST SIDE // // EAST SIDE // // EAST SIDE // .concat( dataOfId("T2NIB").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, opacity: p.backOpacity, text: "", color: colorCessation, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + 0.001, //5 / 32, endRatio: 1 / 2 + (1 / 2 / 12) * 2 }; }) ) .concat( dataOfId("T2NIB").map((d, i) => { return { r: p.battlementsTitle - p.battlementsRingInner - p.gap, innerR: p.battlementsTitleInner + p.gap + p.battlementsRingInner + p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + 0.001, //5 / 32, endRatio: 1 / 2 + (1 / 2 / 12) * 2 }; }) ) .concat( dataOfId("T9SUFP").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.battlementsTitleInner + 2 * p.gap, opacity: p.backOpacity, text: "", color: colorPath, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + (1 / 2 / 12) * 2, //5 / 32, endRatio: 1 }; }) ) .concat( dataOfId("9LEVM1").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner + p.battlementsTitleInner - p.gap, opacity: p.backOpacity2, text: "", color: colorPath, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + (1 / 2 / 12) * 7, endRatio: 1 - p.rNB }; }) ) .concat( dataOfId("9LEVM1").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + (1 / 2 / 12) * 7, endRatio: 1 - p.rNB }; }) ) .concat( dataOfId("9LEVM7").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsInner + p.battlementsTitleInner - p.gap, opacity: p.backOpacity2, text: "", color: colorPath, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + (1 / 2 / 12) * 3, endRatio: 1 / 2 + (1 / 2 / 12) * 7 }; }) ) .concat( dataOfId("9LEVM7").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: -45, endAngle: -45 + 90, startRatio: 1 / 2 + (1 / 2 / 12) * 3, endRatio: 1 / 2 + (1 / 2 / 12) * 7 }; }) ) })4e:T432,NBattlementsSubTitle = ({ r: p.battlementsSubTitle, innerR: p.battlementsSubTitleInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, fade: p.subFade, padAngle: 0, opacity: p.subOpacity, centerRadius: true, squareEnds: true, padRatio: 0.0015, data: dataOfId("T8WW") .map((d, i) => { return { opacity: p.backOpacity2, r: p.battlements + 2 * p.gap, innerR: p.battlementsInner - 2 * p.gap, text: "", color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 4) / 12 + p.rGap, endRatio: ((1 / 2) * 7.7) / 12 + p.rGap }; }) .concat( dataOfId("T8WW").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: -45, endAngle: -45 + 90, startRatio: ((1 / 2) * 4) / 12 + p.rGap, endRatio: ((1 / 2) * 7.7) / 12 + p.rGap }; }) ) })4f:T56e,NWBattlements = ({ cy: -p.battlements - (p.battlementsInner - p.battlementsSubTitleInner - p.gap) / 2 - 4, cx: -p.battlements + 2 * p.battlementsInner + p.gap - p.battlementsInner / 2 - 4 * p.gap + 145, // it is on the outside of a square r: 100, innerR: (p.battlementsInner + 19) / 2.23, innerSide: p.battlementsInner - p.battlementsSubTitleInner - 4 * p.gap, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, padRatio: 0.0015, data: dataOfId("8WW") .slice(0, 4) .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 4, n: i + 1 }; }) .concat( dataOfId("8WW") .slice(4, 8) .reverse() .map((d, i) => { return { cx: -p.battlements + 2 * p.battlementsInner + p.gap + 140, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 4, n: i + 1 }; }) ) })50:Tdaf,NWBattlements3 = ({ r: p.battlements + 2 * p.gap, //innerR: p.battlementsInner - 1 * p.gap, innerR: (p.battlementsInner - p.gap) / 5 - p.gap, innerSide: (p.battlements - p.gap) * 2, square: true, padSquare: 1.8, centerInnerR: true, padAngle: 0, //padSquare: 3.5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, color: colorSuffering, data: dataOfId("9SUFP") .slice(0, 2) .map((d, i) => { return { r: p.battlements + 2 * p.gap + ((p.battlementsInner - p.gap) * 4) / 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 2 * p.rNB, endRatio: ((1 / 2) * 4) / 12 - 1.8 * p.rNB, div: 2, n: i + 1 }; }) .concat( dataOfId("9SUFP") .slice(2, 4) .map((d, i) => { return { r: p.battlements + 2 * p.gap + ((p.battlementsInner - p.gap) * 3) / 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 2 * p.rNB, endRatio: ((1 / 2) * 4) / 12 - 1.8 * p.rNB, div: 2, n: i + 1 }; }) ) .concat( dataOfId("9SUFP") .slice(4, 6) .map((d, i) => { return { r: p.battlements + 2 * p.gap + ((p.battlementsInner - p.gap) * 2) / 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 2 * p.rNB, endRatio: ((1 / 2) * 4) / 12 - 1.8 * p.rNB, div: 2, n: i + 1 }; }) ) .concat( dataOfId("9SUFP") .slice(6, 8) .map((d, i) => { return { r: p.battlements + 2 * p.gap + ((p.battlementsInner - p.gap) * 1) / 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 2 * p.rNB, endRatio: ((1 / 2) * 4) / 12 - 1.8 * p.rNB, div: 2, n: i + 1 }; }) ) .concat( dataOfId("9SUFP9").map((d, i) => { return { r: p.battlements + 2 * p.gap + ((p.battlementsInner - p.gap) * 0) / 5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: 2 * p.rNB, endRatio: ((1 / 2) * 4) / 12 - 1.8 * p.rNB }; }) ) .concat( dataOfId("3SUFC") //.reverse() .map((d, i) => { return { padSquare: 4, radial: true, flipLines: true, flipLetters: true, innerR: p.battlementsInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: -45, endAngle: +45, startRatio: ((1 / 2) * 7.7) / 12 + 1.5 * p.rNB, endRatio: ((1 / 2) * 10.4) / 12 - 1.5 * p.rNB, div: 3, n: i + 1 }; }) ) })51:T416,SBattlements = ({ cy: p.battlements + p.battlementsInner / 2 + p.gap, cx: 100 - 1.9 * p.gap, r: 100, innerR: p.battlementsInner + 18.5 - 3.8 * p.gap, innerSide: p.battlementsInner, square: true, centerInnerR: true, padAngle: 0, padSquare: 9, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, padRatio: 0.0015, data: dataOfId("8FDH") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 45, endAngle: 270 + 45, div: 8, n: i + 1 }; }) .concat( dataOfId("8TDH").map((d, i) => { return { cx: -100 + 1.9 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0 + 45, endAngle: 90 + 45, div: 8, n: i + 1 }; }) ) })52:T205d,SBattlements2 = ({ r: p.battlements + p.battlementsNumbers + 2 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 2 * p.gap - p.battlementsRingInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, padRatio: 0.0015, data: dataOfId("10CRA") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: i < 6 ? 0.9 * p.rNB : 1 / 32 + 2.3 * p.rNB, endRatio: i < 6 ? 10 / 32 - 1.2 * p.rNB : 11 / 32 - 1 * p.rNB, div: 10, n: i + 1, flipLetters: true, // opacity: i < 6 ? undefined : p.itemOpacity2, // fade: i < 6 ? undefined : p.itemFade2, r: i < 11 ? p.battlements + p.battlementsNumbers + 2 * p.gap : p.battlements + p.battlementsNumbers + 2 * p.gap - 2 * p.battlementsRingInner, innerR: i < 6 ? p.battlementsInner - p.battlementsNumbers - 2 * p.gap - p.battlementsRingInner : p.battlementsInner - p.battlementsNumbers - 1 * p.gap - 3 * p.battlementsRingInner }; }) .concat( dataOfId("T5PRE").map((d, i) => { return { radial: false, r: p.battlements + p.battlementsInner - 2 * p.battlementsRingInner - p.gap, innerR: p.battlementsRingInner + p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: 1, fade: 0, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - 1.7 * p.rNB, startRatio: ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 5) / 10 + 5.5 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("5PRE1").map((d, i) => { return { r: p.battlements + p.battlementsNumbers + 2 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 5 * p.gap - 2 * p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: 6 / 32 + 0.4 * p.rNB, endRatio: 7 / 32 - 0.6 * p.rNB, flipLetters: true, opacity: p.itemOpacity, fade: p.itemFade }; }) ) .concat( dataOfId("5PRE1").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsNumbers, text: "(v)", radial: false, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: 6 / 32 + 0.4 * p.rNB, endRatio: 7 / 32 - 0.6 * p.rNB, opacity: p.itemOpacity, fade: p.itemFade }; }) ) .concat( dataOfId("3DOOR1").map((d, i) => { return { radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: p.subOpacity, fade: 0, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - 1.7 * p.rNB, startRatio: ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 8) / 11 + +1.1 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR2").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - (0.5 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 11 + 1.1 * p.rNB), startRatio: 0 + ((1 - 2.3 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 11 + 1.2 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR3").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - (1.8 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 8) / 11 + 0.2 * p.rNB), startRatio: 0.4 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("10CWA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0, div: 10, n: i + 1, flipLines: true }; }) ) .concat( dataOfId("3DOOR1").map((d, i) => { return { fade: 0, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: p.subOpacity, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 7) / 10 - p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR2").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 10 + 0.3 * p.rNB, endRatio: 1 - ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 10 - 1.2 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR3").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 7) / 10 + 0.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0 }; }) ) })53:T1fb3,SBattlements2Old = ({ r: p.battlements + p.battlementsNumbers + 2 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 2 * p.gap - p.battlementsRingInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, padRatio: 0.0015, data: dataOfId("10CRA") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: 0.9 * p.rNB, endRatio: 10 / 32 - 1.2 * p.rNB, div: 10, n: i + 1, flipLetters: true, // opacity: i < 6 ? undefined : p.itemOpacity2, // fade: i < 6 ? undefined : p.itemFade2, r: i < 6 ? p.battlements + p.battlementsNumbers + 2 * p.gap : p.battlements + p.battlementsNumbers + 2 * p.gap + 2 * p.battlementsRingInner, innerR: i < 6 ? p.battlementsInner - p.battlementsNumbers - 2 * p.gap - p.battlementsRingInner : p.battlementsInner - p.battlementsNumbers - 2 * p.gap - 3 * p.battlementsRingInner }; }) .concat( dataOfId("T5PRE").map((d, i) => { return { radial: false, r: p.battlements, innerR: p.battlementsRingInner + 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: 1, fade: 0, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - 1 * p.rNB, startRatio: ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 5) / 10 + 7 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("5PRE1").map((d, i) => { return { r: p.battlements + p.battlementsNumbers + 5 * p.gap + p.battlementsRingInner, innerR: p.battlementsInner - 3 * p.gap - p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: 10 / 32 - 0 * p.rNB, endRatio: 11 / 32 - 0 * p.rNB, flipLetters: true, opacity: p.itemOpacity2, fade: p.itemFade2 }; }) ) .concat( dataOfId("5PRE1").map((d, i) => { return { r: p.battlements + 3 * p.gap + p.battlementsRingInner, innerR: p.battlementsNumbers + p.gap, text: "5", radial: false, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: 10 / 32 - 0 * p.rNB, endRatio: 11 / 32 - 0 * p.rNB, opacity: p.itemOpacity2, fade: p.itemFade2 }; }) ) .concat( dataOfId("3DOOR1").map((d, i) => { return { radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: p.subOpacity, fade: 0, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 10 / 32 - 1.7 * p.rNB, startRatio: ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 7) / 11 + +0.7 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR2").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - (1.2 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 4) / 11 + 1.1 * p.rNB), startRatio: 0 + ((1 - 2.3 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 11 + 1.2 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR3").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 11 / 32 - (1.8 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 8) / 11 + 0.2 * p.rNB), startRatio: 0.4 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("10CWA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0, div: 10, n: i + 1 }; }) ) .concat( dataOfId("3DOOR1").map((d, i) => { return { fade: 0, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, opacity: p.subOpacity, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 7) / 10 - p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR2").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 10 + 0.3 * p.rNB, endRatio: 1 - ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 3) / 10 - 1.2 * p.rNB, endPadRatio: 0 }; }) ) .concat( dataOfId("3DOOR3").map((d, i) => { return { fade: 0, opacity: p.subOpacity, radial: false, r: p.battlementsTitle - p.battlementsRingInner, innerR: p.battlementsRingInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB + ((1 - 0.9 * p.rNB - (21 / 32 + 1.2 * p.rNB)) * 7) / 10 + 0.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0 }; }) ) })54:T5e1,SBattlementsNumbers = ({ r: p.battlements + p.gap, innerR: p.battlementsNumbers, square: true, centerInnerR: true, padAngle: 0, innerSide: (p.battlements - p.gap) * 2, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: false, padRatio: 0.0015, data: dataOfId("10CRA") .map((d, i) => { const roman = ["i", "ii", "iii", "iv", "v"].reverse(); return { text: i < 6 ? String(10 - i) : String(10 - i) + " (" + roman[i - 5] + ")", fontSize: 9, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startPadRatio: 0, startRatio: i < 6 ? 0.9 * p.rNB : 1 / 32 + 2.3 * p.rNB, endRatio: i < 6 ? 10 / 32 - 1.2 * p.rNB : 11 / 32 - 1 * p.rNB, // opacity: i < 6 ? undefined : p.itemOpacity2, // fade: i < 6 ? undefined : p.itemFade2, r: i < 11 ? p.battlements + p.gap : p.battlements + p.gap + 0 * p.gap + 2 * p.battlementsRingInner, div: 10, n: i + 1 }; }) .concat( dataOfId("10CWA").map((d, i) => { return { text: String(i + 1), fontSize: 9, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0, div: 10, n: i + 1 }; }) ) })55:T52a,SBattlementsNumbersOld = ({ r: p.battlements + p.gap, innerR: p.battlementsNumbers, square: true, centerInnerR: true, padAngle: 0, innerSide: (p.battlements - p.gap) * 2, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: false, padRatio: 0.0015, data: dataOfId("10CRA") .map((d, i) => { return { text: String(10 - i), fontSize: 9, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 0.9 * p.rNB, startPadRatio: 0, endRatio: 10 / 32 - 1.2 * p.rNB, // opacity: i < 6 ? undefined : p.itemOpacity2, // fade: i < 6 ? undefined : p.itemFade2, r: i < 6 ? p.battlements + p.gap : p.battlements + p.gap + 0 * p.gap + 2 * p.battlementsRingInner, div: 10, n: i + 1 }; }) .concat( dataOfId("10CWA").map((d, i) => { return { text: String(i + 1), fontSize: 9, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 21 / 32 + 1.2 * p.rNB, endRatio: 1 - 0.9 * p.rNB, endPadRatio: 0, div: 10, n: i + 1 }; }) ) })56:T1141,SBattlementsTitle = ({ r: p.battlementsTitle + p.gap, innerR: p.battlementsTitleInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, fade: 0, padAngle: 0, opacity: 1, centerRadius: true, squareEnds: true, // padSquare: 0.0, padRatio: 0.002, //0.0015 data: dataOfId("T10CRA") .map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 11 / 32 }; }) .concat( dataOfId("T10CRA").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner - p.battlementsRingInner * 2 - 2.2 * p.gap, opacity: p.backOpacity, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 7 / 32 + p.rNB * 0.4, startPadRatio: 0, startRatio: 6 / 32 - p.rNB * 0.4 }; }) ) .concat( dataOfId("T10CRA").map((d, i) => { return { strokeWidth: 0, r: p.battlements - p.gap / 2, innerR: p.battlementsInner - p.battlementsRingInner * 2 - 2 * p.gap, opacity: 0.8, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, endRatio: 7 / 32 + p.rNB * 0.2, startPadRatio: 0, startRatio: 6 / 32 - p.rNB * 0.2 }; }) ) .concat( dataOfId("T10CRA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 11 / 32 }; }) ) .concat( dataOfId("T8TDH").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorCessation, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 11 / 32 - p.rNB / 3, endRatio: 4 / 8 }; }) ) .concat( dataOfId("T8TDH").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 11 / 32 - p.rNB / 3, endRatio: 4 / 8 }; }) ) .concat( dataOfId("T8FDH").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorOrigin, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 4 / 8, endRatio: (32 - 11) / 32 + p.rNB / 3 }; }) ) .concat( dataOfId("T8FDH").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 4 / 8, endRatio: (32 - 11) / 32 + p.rNB / 3 }; }) ) .concat( dataOfId("T10CWA").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: (32 - 11) / 32, endRatio: 1, endPadRatio: 0 }; }) ) .concat( dataOfId("T10CWA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: (32 - 11) / 32, endRatio: 1, endPadRatio: 0 }; }) ) })57:T1219,SBattlementsTitleOld = ({ r: p.battlementsTitle + p.gap, innerR: p.battlementsTitleInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, fade: 0, padAngle: 0, opacity: 1, centerRadius: true, squareEnds: true, // padSquare: 0.0, padRatio: 0.002, //0.0015 data: dataOfId("T10CRA") .map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 6 / 32 + p.rNB * 0.7 }; }) .concat( dataOfId("T10CRA").map((d, i) => { return { r: p.battlements + p.battlementsRingInner * 2, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner - p.battlementsRingInner * 2, opacity: p.backOpacity, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 6 / 32 + p.rNB * 0.2, startPadRatio: 0, endRatio: 10 / 32 }; }) ) .concat( dataOfId("T10CRA").map((d, i) => { return { strokeWidth: 0, r: p.battlements + p.battlementsRingInner * 2 + 0.6, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner - p.battlementsRingInner * 2 - 0.6, opacity: p.backOpacity, text: "", color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 6 / 32 - p.rNB * 0.5, startPadRatio: 0, endRatio: 10 / 32 - p.rNB }; }) ) .concat( dataOfId("T10CRA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 10 / 32 }; }) ) .concat( dataOfId("T8TDH").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorCessation, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 11 / 32 - p.rNB / 3, endRatio: 4 / 8 }; }) ) .concat( dataOfId("T8TDH").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 11 / 32 - p.rNB / 3, endRatio: 4 / 8 }; }) ) .concat( dataOfId("T8FDH").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorOrigin, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 4 / 8, endRatio: (32 - 11) / 32 + p.rNB / 3 }; }) ) .concat( dataOfId("T8FDH").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: 4 / 8, endRatio: (32 - 11) / 32 + p.rNB / 3 }; }) ) .concat( dataOfId("T10CWA").map((d, i) => { return { r: p.battlements, innerR: p.battlementsInner + p.gap + p.battlementsTitleInner, opacity: p.backOpacity, text: "", color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: (32 - 11) / 32, endRatio: 1, endPadRatio: 0 }; }) ) .concat( dataOfId("T10CWA").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 - 45, endAngle: 180 - 45 + 90, startRatio: (32 - 11) / 32, endRatio: 1, endPadRatio: 0 }; }) ) })58:Tcb9,WBattlementsTitle = ({ r: p.WbattlementsTitle, innerR: p.WBattlementsTitleInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, //fade: p.subFade, padAngle: 0, //opacity: p.subOpacity, centerRadius: true, squareEnds: true, // padSquare: 0.0, padRatio: 0.0015, color: colorSuffering, // data: dataOfId("4REL4") // .map((d, i) => { // return { // r: p.battlements + p.gap, // innerR: p.battlementsInner, // text: "", // opacity: p.backOpacity2, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: p.rWB / 2, // startPadRatio: 0, // endRatio: 4 / 31 // }; // }) // .concat( // dataOfId("4REL4").map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: p.rWB / 2, // startPadRatio: 0, // endRatio: 4 / 31 // }; // }) // ) // .concat( data: dataOfId("4REL3") .map((d, i) => { return { r: p.battlements + p.gap, innerR: p.WBattlementsInner, text: "", opacity: p.backOpacity2, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: p.rWB / 2 / 2, //0 / 31, endRatio: 11 / 31 }; }) // ) .concat( dataOfId("4REL3").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startRatio: p.rWB / 2 / 2, startAngle: 180 + 45, endAngle: 180 + 45 + 90, //startRatio: 0 / 31, endRatio: 11 / 31 }; }) ) .concat( dataOfId("4REL2").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.WBattlementsInner, text: "", opacity: p.backOpacity2, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31, endRatio: 27 / 31 }; }) ) .concat( dataOfId("4REL2").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31, endRatio: 27 / 31 }; }) ) .concat( dataOfId("4REL1").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.WBattlementsInner, text: "", opacity: p.backOpacity2, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 27 / 31, //endRatio: 31 / 31 - p.rWB / 2, endPadRatio: 0 }; }) ) .concat( dataOfId("4REL1").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 27 / 31, //endRatio: 31 / 31 - p.rWB / 2, endPadRatio: 0 }; }) ) })59:Te90,WBattlementsSubTitle = ({ r: p.battlementsTitle - p.gap - p.battlementsRingInner, innerR: p.battlementsRingInner, //r: p.battlementsTitle, //innerR: p.battlementsRingInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, fade: p.subFade, padAngle: 0, padSquare: 5, opacity: p.subOpacity, centerRadius: true, squareEnds: true, // padSquare: 0.0, //padRatio: 0.0015, color: colorSuffering, data: dataOfId("PSDI2") .map((d, i) => { return { // innerR: p.battlementsRingInner + p.battlementsGain, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: p.rWB, //startPadRatio: 0, endRatio: 4 / 31 - 0.0005 // - p.rWB }; }) .concat( dataOfId("PSDI1").map((d, i) => { return { // innerR: p.battlementsRingInner + p.battlementsGain, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 5 / 31 + 0.002, //+ p.rWB, endRatio: 11 / 31 - p.rWB }; }) ) .concat( dataOfId("PDIV1").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, //fade: p.itemFade2, opacity: p.SubOpacity, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 3 - 0.002 }; }) ) .concat( dataOfId("PDIV2").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 3 + 0.002, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 6 - 0.002 }; }) ) .concat( dataOfId("PDIV3").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 6 + 0.002, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 9 - 0.002 }; }) ) .concat( dataOfId("PDIV4").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 9 + 0.002, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 16 }; }) ) .concat( dataOfId("PDIV5").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 27 / 31 + p.rWB, endRatio: 31 / 31 - p.rWB / 1.5, endPadRatio: 0 }; }) ) })5a:Tfda,WBattlementsSubSubTitle = ({ r: p.battlementsTitle - 2 * p.gap - 2 * p.battlementsRingInner, innerR: p.battlementsRingInner, // r: p.battlementsTitle, // innerR: p.battlementsRingInner, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, fade: p.subFade, padAngle: 0, padSquare: 5, opacity: p.subOpacity, centerRadius: true, squareEnds: true, // padSquare: 0.0, //padRatio: 0.0015, color: colorSuffering, // data: dataOfId("PSDI2") // .map((d, i) => { // return { // //innerR: p.battlementsRingInner + p.battlementsGain, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: p.rWB, // //startPadRatio: 0, // endRatio: 4 / 31 - 0.0005 // - p.rWB // }; // }) // .concat( // dataOfId("PSDI1").map((d, i) => { // return { // //innerR: p.battlementsRingInner + p.battlementsGain, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: 5 / 31 + 0.002, //+ p.rWB, // endRatio: 11 / 31 - p.rWB // }; // }) // ) // .concat( data: dataOfId("PSDI3") .map((d, i) => { return !option.includes("subSub31") ? {} : { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, //fade: p.itemFade2, opacity: p.SubOpacity, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 9 - 0.002 }; }) // ) .concat( dataOfId("PSDI4").map((d, i) => { return !option.includes("subSub31") ? {} : { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 9 + 0.002, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 11 - 0.002 }; }) ) .concat( dataOfId("PSDI5").map((d, i) => { return { opacity: p.subOpacity - 0.1, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 180 + 45, endAngle: 180 + 45 + 90, startRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 11 + 0.002, endRatio: 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 16 }; }) ) // .concat( // dataOfId("PDIV4").map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: // 11 / 31 + // p.rWB + // ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 9 + // 0.002, // endRatio: // 11 / 31 + p.rWB + ((27 / 31 - p.rWB - 11 / 31 - p.rWB) / 16) * 16 // }; // }) // ) // .concat( // dataOfId("PDIV5").map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 180 + 45, // endAngle: 180 + 45 + 90, // startRatio: 27 / 31 + p.rWB, // endRatio: 31 / 31 - p.rWB / 1.5, // endPadRatio: 0 // }; // }) // ) })5b:Te2e,WBattlements = ({ r: p.battlements + p.battlementsNumbers + 3 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, //startRatio: 0.004, // data: // dataOfId("31PL") // .slice(27, 31) // .map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorSuffering, // startAngle: 180 + 45, // endAngle: 270 + 45, // div: 4, // n: i + 1, // startRatio: 27 / 31 // }; // }) // .concat( // dataOfId("31PL") // .slice(0, 4) // .map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorSuffering, // startAngle: 180 + 45, // endAngle: 270 + 45, // div: 4, // n: i + 1, // endRatio: 4 / 31 - p.rWB, // startRatio: p.rWB // }; // }) // ) // .concat( data: dataOfId("31PL") .slice(0, 11) .map((d, i) => { return { innerR: i == 4 ? p.battlementsInner - p.battlementsNumbers - 3 * p.gap : p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 11, n: i + 1, endRatio: 11 / 31 - p.rWB, startRatio: 0 / 31 + p.rWB, fade: i < 4 && option.includes("subcol31") ? p.itemFade2 : p.itemFade, opacity: i < 4 && option.includes("subcol31") ? p.itemOpacity2 : p.itemOpacity }; }) // ) .concat( dataOfId("31PL") .slice(11, 27) .map((d, i) => { return { innerR: i > 10 ? p.battlementsInner - p.battlementsNumbers - 3 * p.gap - 2 * p.battlementsRingInner - 2 * p.gap : p.battlementsInner - p.battlementsNumbers - 3 * p.gap - p.battlementsRingInner - p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 16, n: i + 1, endRatio: 27 / 31 - p.rWB, startRatio: 11 / 31 + p.rWB, fade: i > 10 && option.includes("subcol31") ? p.itemFade2 : p.itemFade, opacity: i > 10 && option.includes("subcol31") ? p.itemOpacity2 : p.itemOpacity }; }) ) .concat( dataOfId("31PL") .slice(27, 31) .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 4, n: i + 1, endRatio: 31 / 31 - p.rWB / 1.5, startRatio: 27 / 31 + p.rWB }; }) ) })5c:Tb0c,WBattlementsNumbers = ({ r: p.battlements + 2 * p.gap, innerR: p.battlementsNumbers, square: true, centerInnerR: true, padAngle: 0, innerSide: (p.battlements - p.gap) * 2, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, // data: dataOfId("31PL").map((d, i) => { // return { // text: String(i + 1), // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorSuffering, // startAngle: 180 + 45, // endAngle: 270 + 45, // div: 31, // n: i + 1 // }; // }) // data: dataOfId("31PL") // .slice(0, 4) // .map((d, i) => { // return { // text: String(i + 1), // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorSuffering, // startAngle: 180 + 45, // endAngle: 270 + 45, // div: 4, // n: i + 1, // endRatio: 4 / 31 - p.rWB, // startRatio: p.rWB // }; // }) // ) // .concat( data: dataOfId("31PL") .slice(0, 11) .map((d, i) => { return { text: String(i + 1), fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 11, n: i + 1, endRatio: 11 / 31 - p.rWB, startRatio: p.rWB, //4 / 31 + p.rWB, fade: i < 4 && option.includes("subcol31") ? p.itemFade2 : p.itemFade, opacity: i < 4 && option.includes("subcol31") ? p.itemOpacity2 : p.itemOpacity }; }) // ) .concat( dataOfId("31PL") .slice(11, 27) .map((d, i) => { return { text: String(i + 1 + 11), fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 16, n: i + 1, endRatio: 27 / 31 - p.rWB, startRatio: 11 / 31 + p.rWB, fade: i > 10 && option.includes("subcol31") ? p.itemFade2 : p.itemFade, opacity: i > 10 && option.includes("subcol31") ? p.itemOpacity2 : p.itemOpacity }; }) ) .concat( dataOfId("31PL") .slice(27, 31) .map((d, i) => { return { text: String(i + 1 + 27), fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + 45, endAngle: 270 + 45, div: 4, n: i + 1, endRatio: 31 / 31 - p.rWB / 1.5, startRatio: 27 / 31 + p.rWB }; }) ) })5d:Tc67,EBattlementsTitle = ({ r: p.battlementsTitle, innerR: p.battlementsTitleInner, innerSide: (p.battlements - p.gap) * 2, color: colorPath, square: true, centerInnerR: true, fade: 0, padAngle: 0, opacity: 1, centerRadius: true, squareEnds: true, padRatio: 0.0015, data: dataOfId("4FUN4") .map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsTitleInner + p.battlementsInner, text: "", //fade: p.subFade, opacity: p.backOpacity2, startAngle: 45, endAngle: 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 9 / 33 }; }) .concat( dataOfId("4FUN4").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45, endAngle: 45 + 90, startRatio: 0, startPadRatio: 0, endRatio: 9 / 33 }; }) ) .concat( dataOfId("4FUN3").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsTitleInner + p.battlementsInner, text: "", //fade: p.subFade, opacity: p.backOpacity2, startAngle: 45, endAngle: 45 + 90, startRatio: 9 / 33, endRatio: 17 / 33 }; }) ) .concat( dataOfId("4FUN3").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45, endAngle: 45 + 90, startRatio: 9 / 33, endRatio: 17 / 33 }; }) ) .concat( dataOfId("4FUN2").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsTitleInner + p.battlementsInner, text: "", //fade: p.subFade, opacity: p.backOpacity2, startAngle: 45, endAngle: 45 + 90, startRatio: 17 / 33, endRatio: 24 / 33 }; }) ) .concat( dataOfId("4FUN2").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45, endAngle: 45 + 90, startRatio: 17 / 33, endRatio: 24 / 33 }; }) ) .concat( dataOfId("4FUN1").map((d, i) => { return { r: p.battlements + p.gap, innerR: p.battlementsTitleInner + p.battlementsInner, text: "", //fade: p.subFade, opacity: p.backOpacity2, startAngle: 45, endAngle: 45 + 90, startRatio: 24 / 33, endRatio: 33 / 33 - p.rWB / 2, endPadRatio: 0 }; }) ) .concat( dataOfId("4FUN1").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 45, endAngle: 45 + 90, startRatio: 24 / 33, endRatio: 33 / 33 - p.rWB / 2, endPadRatio: 0 }; }) ) })5e:T896,EBattlementsNumbers = ({ // we want to divid the height by 2 ? looks better // 5 / 4 / 4 / 4 / mid / 3 / 4 / 5 / 4 // 5 9 13 17 3 7 12 16 // 17 16 r: p.battlements + 2 * p.gap, innerR: p.battlementsNumbers, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, //endsPadAngle: 0.2, padSquare: 5, // padRatio: 0, // endPadRatio: 0, // padRatio by default // startPadRatio: 0, // padRatio by default fade: p.itemFade2, opacity: p.itemOpacity2, opacityLimit: 0.8, centerRadius: true, squareEnds: true, radial: true, data: [...Array(4).keys()] .map((d, i) => { return { text: String(17 - (i + 1)), fontSize: 8, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 5, startRatio: +p.rEB, endRatio: 1 - 7 * p.rEB }; }) .concat( [...Array(4).keys()].map((d, i) => { return { text: String(13 - (i + 1)), fontSize: 8, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 13, startRatio: +4 * p.rEB, endRatio: 1 - 6 * p.rEB }; }) ) .concat( [...Array(4).keys()].map((d, i) => { return { text: String(9 - (i + 1)), fontSize: 8, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 20, startRatio: 6.5 * p.rEB, endRatio: 1 - 4 * p.rEB }; }) ) .concat( [...Array(4).keys()].map((d, i) => { return { text: String(5 - (i + 1)), fontSize: 8, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 29, startRatio: 10 * p.rEB, endRatio: 1 - 2 * p.rEB }; }) ) })5f:T818,EBattlementsNumbersTitle = ({ // we want to divid the height by 2 ? looks better // 5 / 4 / 4 / 4 / mid / 3 / 4 / 5 / 4 // 5 9 13 17 3 7 12 16 // 17 16 r: p.battlements + 2 * p.gap, innerR: p.battlementsNumbers, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, //endsPadAngle: 0.2, padSquare: 5, arrowEnd: true, // padRatio: 0, // endPadRatio: 0, // padRatio by default // startPadRatio: 0, // padRatio by default fade: 0, opacity: 1, centerRadius: true, squareEnds: true, color: colorPath, data: dataOfId("4TET4") .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, endRatio: 5 / 33, endPadRatio: 0.015, startRatio: +p.rEB }; }) .concat( dataOfId("4TET3").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 9 / 33, endRatio: 13 / 33, startPadRatio: 0.002 + p.rEB, endPadRatio: 0.015 }; }) ) .concat( dataOfId("4TET2").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 17 / 33, endRatio: 20 / 33, startPadRatio: 0.002 + p.rEB, endPadRatio: 0.015 }; }) ) .concat( dataOfId("4TET1").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 90 - 45, endAngle: 90 + 45, startRatio: 24 / 33, endRatio: 29 / 33, startPadRatio: 0.002 + p.rEB, endPadRatio: 0.015 }; }) ) })60:T18ce,EBattlements = ({ // we want to divid the height by 2 ? looks better ? // 5 / 4 / 4 / 4 / mid / 3 / 4 / 5 / 4 // 5 9 13 17 3 7 12 16 // 17 16 // 33 r: p.battlements + p.battlementsNumbers + 3 * p.gap, innerR: p.battlementsInner - p.battlementsNumbers - 3 * p.gap, innerSide: (p.battlements - p.gap) * 2, square: true, centerInnerR: true, padAngle: 0, padSquare: 5, fade: p.itemFade, opacity: p.itemOpacity, centerRadius: true, squareEnds: true, radial: true, data: dataOfId("13SAT") .slice(8, 13) .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1, startRatio: +p.rEB, endRatio: 1 - 7 * p.rEB }; }) .concat( dataOfId("16STE") .slice(12, 16) .reverse() .map((d, i) => { return { fade: p.itemFade2, opacity: p.itemOpacity2, opacityLimit: 0.8, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 5, startRatio: +p.rEB, endRatio: 1 - 7 * p.rEB }; }) ) .concat( dataOfId("8MIN") .slice(0, 4) .reverse() .map((d, i) => { return { innerR: (p.battlementsInner - p.battlementsNumbers - 4 * p.gap) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 9, startRatio: +4 * p.rEB, endRatio: 1 - 6 * p.rEB }; }) ) .concat( dataOfId("8MIN") .slice(4, 8) .reverse() .map((d, i) => { return { r: p.battlements + p.battlementsNumbers + p.gap + (p.battlementsInner - p.battlementsNumbers - 3 * p.gap) / 2 + 2.5 * p.gap, innerR: (p.battlementsInner - p.battlementsNumbers - 4 * p.gap) / 2, endsPadAngle: 4.45, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 9, startRatio: +4 * p.rEB, endRatio: 1 - 6 * p.rEB }; }) ) .concat( dataOfId("16STE") .slice(8, 12) .reverse() .map((d, i) => { return { fade: p.itemFade2, opacity: p.itemOpacity2, opacityLimit: 0.8, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 13, startRatio: +4 * p.rEB, endRatio: 1 - 6 * p.rEB }; }) ) .concat( dataOfId("6FEL") .slice(0, 3) .reverse() .map((d, i) => { return { innerR: (p.battlementsInner - p.battlementsNumbers - 4 * p.gap) / 2, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 17, startRatio: 6.5 * p.rEB, endRatio: 1 - 4 * p.rEB }; }) ) .concat( dataOfId("6FEL") .slice(3, 6) .reverse() .map((d, i) => { return { r: p.battlements + p.battlementsNumbers + p.gap + (p.battlementsInner - p.battlementsNumbers - 3 * p.gap) / 2 + 2.5 * p.gap, innerR: (p.battlementsInner - p.battlementsNumbers - 4 * p.gap) / 2, endsPadAngle: 4.5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 17, startRatio: 6.5 * p.rEB, endRatio: 1 - 4 * p.rEB }; }) ) .concat( dataOfId("16STE") .slice(4, 8) .reverse() .map((d, i) => { return { fade: p.itemFade2, opacity: p.itemOpacity2, opacityLimit: 0.8, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 20, startRatio: 6.5 * p.rEB, endRatio: 1 - 4 * p.rEB }; }) ) .concat( dataOfId("13SAT") .slice(1, 6) .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 24, startRatio: 10 * p.rEB, endRatio: 1 - 2 * p.rEB }; }) ) .concat( dataOfId("16STE") .slice(0, 4) .reverse() .map((d, i) => { return { fade: p.itemFade2, opacity: p.itemOpacity2, opacityLimit: 0.8, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, div: 33, n: i + 1 + 29, startRatio: 10 * p.rEB, endRatio: 1 - 2 * p.rEB }; }) ) })61:Tcd6,NWCornerTowerSubTitle = ({ cx: -p.cornerTowerx, cy: -p.cornerTowery, r: p.cornerTower + 1 * p.gap, // - p.strokeWidth, //innerSide: p.cornerTower * 2, // cannot use because we need the tilted angles innerR: p.battlementsTitleInner, square: true, centerInnerR: true, centerRadius: true, squareEnds: false, fade: 0, opacity: 1, padAngle: 1.5, color: colorSuffering, data: dataOfId("T4REL") .map((d, i) => { return { padAngle: 0, r: p.cornerTower, innerR: p.battlementsTitleInner + 2 * p.gap, opacity: p.backOpacity, text: "", startAngle: 270 - 45, endAngle: 270 + 45, arrowStart: true, arrowFactor: 0, startPadRatio: 0 }; }) // .concat( // dataOfId("T4REL").map((d, i) => { // return { // padAngle: 0, // r: p.cornerTower + 0.6, // innerR: p.battlementsTitleInner + 2 * p.gap - 1.2, // opacity: p.backOpacity, // text: "", // startAngle: 270 - 45, // endAngle: 270 + 45, // arrowStart: true, // endRatio: 0.5, // arrowFactor: 0, // startPadRatio: 0, // strokeWidth: 0 // }; // }) // ) .concat( dataOfId("T4REL").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 - 45, endAngle: 270 + 45, arrowStart: true, arrowFactor: -p.arrowFactor, startPadRatio: 0.06 }; }) ) .concat( dataOfId("T3SUFK").map((d) => { return { innerR: p.battlementsTitleInner + 1 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 360 - 45, endAngle: 360 + 45, arrowEnd: true, arrowFactor: 0, // arrowFactor: p.arrowFactor, endPadRatio: -0.027 // endPadRatio: 0.05 }; }) ) }) // cx: -p.cornerTowerx, // cy: -p.cornerTowery, // r: p.cornerTower + 1.3 * p.gap - p.strokeWidth, // //innerSide: p.cornerTower * 2, // cannot use because we need the tilted angles // innerR: p.battlementsTitleInner, // square: true, // centerInnerR: true, // centerRadius: true, // squareEnds: true, // fade: 0, // opacity: 1, // padAngle: 1, // color: colorSuffering, // data: dataOfId("T4REL") // .map((d, i) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 270 - 45, // endAngle: 270 + 45, // arrowStart: true, // arrowFactor: -p.arrowFactor, // startPadRatio: 0.05, // endRatio: 0.98 // }; // }) // .concat( // dataOfId("T3SUFK").map((d) => { // return { // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 360 - 45, // endAngle: 360 + 45, // arrowEnd: true, // arrowFactor: p.arrowFactor, // endPadRatio: 0.05, // startRatio: -0.19 // }; // }) // )62:T79b,SECornerTower = ({ cx: p.battlements + p.battlementsInner / 2 + p.battlementsTitleInner / 2 + p.gap, cy: p.battlements + p.battlementsInner / 2 + p.battlementsTitleInner / 2 + p.gap, r: (p.battlementsInner - p.battlementsTitleInner + p.gap) / 2 - 8, innerR: p.battlementsTitleInner + 8 - 1, square: true, squareEnds: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.6, opacity: p.itemOpacity, color: colorPath, data: dataOfId("4REX") .map((d, i) => { return { text: "", innerR: 0, r: (p.battlementsInner - p.battlementsTitleInner + p.gap) / 2 + 23 - 1.5, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "eeee", polyPad: 0, //strokeWidth: 1, fade: 0, polyOpacity: p.backOpacity }; }) .concat( dataOfId("4REX") // square has 4 side .map((d, i) => { return { text: "", innerR: 0, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "tttt", polyPad: p.gap * 1.5, fade: 0, opacity: 1, gradientID: "zxasdcv", gradientR: 145, gradientI: 40, invertGradient: true //strokeWidth: 0 }; }) ) .concat( dataOfId("4REX") // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, endPadRatio: -0.34, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) }; }) ) .concat( dataOfId("T4REX").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing }; }) ) })63:T82b,SWCornerTower = ({ cx: -( p.battlements + p.battlementsInner / 2 + p.battlementsTitleInner / 2 + p.gap ), cy: p.battlements + p.battlementsInner / 2 + p.battlementsTitleInner / 2 + p.gap, r: (p.battlementsInner - p.battlementsTitleInner + p.gap) / 2 - 8, innerR: p.battlementsTitleInner + 8 - 1, square: true, squareEnds: true, centerInnerR: true, centerRadius: true, fade: p.itemFade, padAngle: 1.6, opacity: p.itemOpacity, color: colorSuffering, data: dataOfId("4KAM") // square has 4 side .map((d, i) => { return { text: "", innerR: 0, r: (p.battlementsInner - p.battlementsTitleInner + p.gap) / 2 + 23 - 1.5, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "eeaee", polyPad: 0, //strokeWidth: 1, fade: 0, polyOpacity: p.backOpacity }; }) .concat( dataOfId("4KAM") // square has 4 side .map((d, i) => { return { text: "", innerR: 0, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "tattt", polyPad: p.gap * 1.5, //strokeWidth: 0, opacity: 1, fade: 0, gradientID: "zxcv", gradientR: 145, gradientI: 40, invertGradient: true }; }) ) .concat( [ dataOfId("4KAM")[1], dataOfId("4KAM")[0], dataOfId("4KAM")[2], dataOfId("4KAM")[3] ] // square has 4 side .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startPadRatio: -0.335, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1) }; }) ) .concat( dataOfId("T4KAM").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing }; }) ) })64:T971,NECornerTowerSubTitle = ({ cx: p.cornerTowerx, cy: -p.cornerTowery, r: p.cornerTower + 1 * p.gap, //innerSide: p.cornerTower * 2, // cannot use because we need the tilted angles innerR: p.battlementsTitleInner, square: true, centerInnerR: true, centerRadius: true, squareEnds: false, fade: 0, opacity: 1, padAngle: 1.5, color: colorPath, data: dataOfId("T4FUN") .map((d, i) => { return { padAngle: 0, r: p.cornerTower, innerR: p.battlementsTitleInner + 2 * p.gap, opacity: p.backOpacity, text: "", startAngle: 90 - 45, endAngle: 90 + 45, arrowEnd: true, arrowFactor: 0 //endPadRatio: 0.07 }; }) // .concat( // dataOfId("T4REL").map((d, i) => { // return { // padAngle: 0, // r: p.cornerTower + 0.6, // innerR: p.battlementsTitleInner + 2 * p.gap - 1.2, // opacity: p.backOpacity, // text: "", // startAngle: 90 - 45, // endAngle: 90 + 45, // arrowEnd: true, // endRatio: 1.0002, // startRatio: 0.2, // arrowFactor: 0, // //startPadRatio: 0, // strokeWidth: 0 // }; // }) // ) .concat( dataOfId("T4FUN").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 - 45, endAngle: 90 + 45, arrowEnd: true, arrowFactor: p.arrowFactor, endPadRatio: 0.06 }; }) ) .concat( dataOfId("T9LEVM").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 360 - 45, endAngle: 360 + 45, arrowStart: true, arrowFactor: -p.arrowFactor, arrowFactor: 0, startPadRatio: -0.027, innerR: p.battlementsTitleInner + 1 * p.gap // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // startAngle: 360 - 45, // endAngle: 360 + 45, // arrowEnd: true, // arrowFactor: 0, // // arrowFactor: p.arrowFactor, // endPadRatio: -0.02 }; }) ) })65:T18ca,CornerStones = ({ cx: p.cCornerStonesx, cy: p.cCornerStonesy, r: p.CornerStones - p.CornerStonesInner - 2.5, innerR: p.CornerStonesInner, square: true, centerRadius: true, centerInnerR: true, fade: p.itemFade, padAngle: 1.4, opacity: p.itemOpacity, data: dataOfId("4FMI") .map((d, i) => { return { r: p.CornerStones, innerR: 0, color: colorPath, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "4FUN", polyOpacity: p.backOpacity, polyPad: 0 }; }) .concat( [ dataOfId("4FMI")[2], dataOfId("4FMI")[0], dataOfId("4FMI")[1], dataOfId("4FMI")[3] ].map((d, i) => { return { fade: 0, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 45 + 90 * i, endAngle: 45 + 90 * (i + 1), polyId: "4FUNb", polyPad: 3.5, gradientID: "4FUNg", gradientR: 140, gradientI: 40, invertGradient: true }; }) ) .concat( dataOfId("T4FMI").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight, color: colorPath }; }) ) .concat( dataOfId("7FOE").map((d, i) => { // background return { cy: -p.cCornerStonesy + 7 - 1, cx: p.cCornerStonesx - 11, r: p.CornerStones + 2.5 * p.gap, innerR: 0, color: colorCessation, startAngle: 180 + (360 / 7) * i, endAngle: 180 + (360 / 7) * (i + 1), polyId: "7FOEb", polyOpacity: p.backOpacity, polyPad: 0 }; }) ) .concat( [ dataOfId("7FOE")[0], dataOfId("7FOE")[2], dataOfId("7FOE")[4], dataOfId("7FOE")[6], dataOfId("7FOE")[5], dataOfId("7FOE")[3], dataOfId("7FOE")[1] ].map((d, i) => { return { fade: 0, cy: -p.cCornerStonesy + 7 - 1, cx: p.cCornerStonesx - 11, r: p.CornerStones - p.CornerStonesInner + 4, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 180 + (360 / 7) * i, endAngle: 180 + (360 / 7) * (i + 1), polyId: "7FOE", polyPad: 2.5, gradientID: "7FOg", gradientR: 105, gradientY: 52, gradientI: 38, invertGradient: true }; }) ) .concat( dataOfId("T7FOE").map((d) => { return { cy: -p.cCornerStonesy + 7 - 1, cx: p.cCornerStonesx - 11, r: p.CornerStones - p.CornerStonesInner + 3, centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight, color: colorCessation }; }) ) .concat( dataOfId("6SEN").map((d, i) => { return { cy: -p.cCornerStonesy + 12 + 2, cx: -p.cCornerStonesx + 7 - 2, r: p.CornerStones + 1 * p.gap, innerR: 0, polyOpacity: p.backOpacity, color: colorSuffering, startAngle: 180 + (360 / 6) * i, endAngle: 180 + (360 / 6) * (i + 1), polyId: "6SENb", polyPad: 0 }; }) ) .concat( [ dataOfId("6SEN")[0], dataOfId("6SEN")[2], dataOfId("6SEN")[4], dataOfId("6SEN")[5], dataOfId("6SEN")[3], dataOfId("6SEN")[1] ].map((d, i) => { return { fade: 0, cy: -p.cCornerStonesy + 12 + 2, cx: -p.cCornerStonesx + 7 - 2, r: p.CornerStones - p.CornerStonesInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 180 + (360 / 6) * i, endAngle: 180 + (360 / 6) * (i + 1), polyId: "6SEN", polyPad: 3, gradientID: "6SEg", gradientR: 110, gradientY: 50, gradientI: 40, invertGradient: true }; }) ) .concat( dataOfId("T6SEN").map((d) => { return { cy: -p.cCornerStonesy + 12 + 2, cx: -p.cCornerStonesx + 7 - 2, r: p.CornerStones - p.CornerStonesInner, centerText: d.text, up: d.lineHeight, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath }; }) ) .concat( dataOfId("5HIN").map((d, i) => { return { cy: +p.cCornerStonesy - 5, cx: -p.cCornerStonesx + 15, r: p.CornerStones + 1 * p.gap, innerR: 0, polyOpacity: p.backOpacity, color: colorOrigin, startAngle: (360 / 5) * i, endAngle: (360 / 5) * (i + 1), polyId: "5HINb", polyPad: 0 }; }) ) .concat( [ dataOfId("5HIN")[4], dataOfId("5HIN")[2], dataOfId("5HIN")[0], dataOfId("5HIN")[1], dataOfId("5HIN")[3] ].map((d, i) => { return { fade: 0, cy: +p.cCornerStonesy - 5, cx: -p.cCornerStonesx + 15, r: p.CornerStones - p.CornerStonesInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: (360 / 5) * i, endAngle: (360 / 5) * (i + 1), polyId: "5HIN", polyPad: 3, gradientID: "5HIg", gradientR: 105, gradientY: 45, gradientI: 40, invertGradient: true }; }) ) .concat( dataOfId("T5HIN").map((d) => { return { cy: +p.cCornerStonesy - 5, cx: -p.cCornerStonesx + 15, r: p.CornerStones - p.CornerStonesInner, centerText: d.text, up: d.lineHeight, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath }; }) ) })66:Ta29,OuterWall = ({ r: p.outerWall, innerR: p.outerWallInner, square: true, centerInnerR: true, fade: p.itemFade, padAngle: 0.1, opacity: p.itemOpacity, centerRadius: true, padSquare: 0.6, data: dataOfId("9NUTL") .slice(0, 2) .reverse() .map((d, i) => { return { endRatio: 0.993, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 + 45, endAngle: 180 + 45, div: 4, n: i + 1 }; }) .concat( dataOfId("9NUTL") .slice(2, 6) .reverse() .map((d, i) => { return { flipLetters: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 45, endAngle: 90 + 45, div: 4, n: i + 1 }; }) ) .concat( dataOfId("9NUTL") .slice(6, 8) .reverse() .map((d, i) => { return { startRatio: 0.008, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: -45, endAngle: 45, div: 4, n: i + 3 }; }) ) .concat( dataOfId("8NUTI") .slice(0, 2) .map((d, i) => { return { startRatio: 0.008, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 90 + 45, endAngle: 180 + 45, div: 4, n: i + 3 }; }) ) .concat( dataOfId("8NUTI") .slice(2, 6) .map((d, i) => { return { text: d.text, flipLetters: false, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 45, endAngle: 180 + 45 + 90, div: 4, n: i + 1 }; }) ) .concat( dataOfId("8NUTI") .slice(6, 8) .map((d, i) => { return { endRatio: 0.993, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: -45, endAngle: 45, div: 4, n: i + 1 }; }) ) })67:Tada,OuterWallBackGround = ({ r: p.outerWall - p.gap, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap, opacity: p.backOpacity, square: true, centerInnerR: true, padAngle: 0, centerRadius: true, //strokeWidth: 0, data: [ // with stroke { text: "", color: colorCessation, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 1, padSquare: 0.5 }, { text: "", color: colorCessation, startAngle: 45, endAngle: 90 + 45 }, { text: "", color: colorCessation, startAngle: -45, endAngle: 45, div: 2, n: 2, padSquare: 0.5 }, // without stroke and a bit of inner padding to remove the diagonal { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorCessation, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 1, padSquare: 0.6 }, { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorCessation, startAngle: 45, endAngle: 90 + 45 }, { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorCessation, startAngle: -45, endAngle: 45, div: 2, n: 2, padSquare: 0.6 }, // left same same { text: "", color: colorOrigin, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 2, padSquare: 0.5 }, { text: "", color: colorOrigin, startAngle: 180 + 45, endAngle: 180 + 45 + 90 }, { text: "", color: colorOrigin, startAngle: -45, endAngle: 45, div: 2, n: 1, padSquare: 0.5 }, // no stroke { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorOrigin, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 2, padSquare: 0.6 }, { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorOrigin, startAngle: 180 + 45, endAngle: 180 + 45 + 90 }, { strokeWidth: 0, r: p.outerWall - p.gap + 0.6, innerR: p.outerWallTitleInner + p.outerWallInner + p.gap - 2, text: "", color: colorOrigin, startAngle: -45, endAngle: 45, div: 2, n: 1, padSquare: 0.6 } ] })68:T5cc,OuterWallTitle = ({ r: p.outerWallTitle, innerR: p.outerWallTitleInner, square: true, centerInnerR: true, flipLetters: false, padAngle: 0.02, centerRadius: true, data: [ { text: "", color: colorCessation, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 1, padSquare: 0.5 } ] .concat( dataOfId("T9NUTL").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 45, endAngle: 90 + 45 }; }) ) .concat([ { text: "", color: colorCessation, startAngle: -45, endAngle: 45, div: 2, n: 2, padSquare: 0.5 } ]) .concat([ { text: "", color: colorOrigin, startAngle: 90 + 45, endAngle: 180 + 45, div: 2, n: 2, padSquare: 0.5 } ]) .concat( dataOfId("T8NUTI").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 45, endAngle: 180 + 45 + 90 }; }) ) .concat([ { text: "", color: colorOrigin, startAngle: -45, endAngle: 45, div: 2, n: 1, padSquare: 0.5 } ]) })69:Tab3,InnerWall = ({ r: p.innerWall, innerR: p.innerWallInner, fade: p.itemFade, opacity: p.itemOpacity, padAngle: 0.25, endsPadAngle: 0.55, data: [ { endsPadAngle: 0.3, r: p.innerWall - (p.gap * 2) / 2, innerR: p.innerWallInner + p.innerWallTitleInner + p.gap * 2, //strokeWidth: 0, text: "", // background color: colorOrigin, startAngle: 180, endAngle: 360, opacity: p.backOpacity, padAngle: 0 }, { endsPadAngle: 0.3, r: p.innerWall - (p.gap * 2) / 2, innerR: p.innerWallInner + +p.innerWallTitleInner + p.gap * 2, // strokeWidth: 0, text: "", // background color: colorCessation, startAngle: 0, endAngle: 180, opacity: p.backOpacity, padAngle: 0 } ] .concat( dataOfId("12DO").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, // color: // d.id == "12DO2" || // d.id == "12DO3" || // d.id == "12DO4" || // d.id == "12DO5" || // d.id == "12DO5" || // d.id == "12DO6" || // d.id == "12DO7" || // d.id == "12DO11" || // d.id == "12DO12" // ? colorOrigin // : colorOrigin, // opacity: // d.id == "12DO4" || // d.id == "12DO5" || // d.id == "12DO8" || // d.id == "12DO9" || // d.id == "12DO10" || // d.id == "12DO1" // ? 1 // : 0.3, // fade: // d.id == "12DO4" || // d.id == "12DO5" || // d.id == "12DO8" || // d.id == "12DO9" || // d.id == "12DO10" || // d.id == "12DO1" // ? 0 // : 10, // strokeWidth: // d.id == "12DO4" || // d.id == "12DO5" || // d.id == "12DO8" || // d.id == "12DO9" || // d.id == "12DO10" || // d.id == "12DO1" // ? 1.2 // : undefined, // strokeColor: colorOrigin, startAngle: 180, endAngle: 360, div: 12, n: i + 1 }; }) ) .concat( dataOfId("12TDO") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0, endAngle: 180, div: 12, n: i + 1 }; }) ) })6a:T2817,LowerBaileySubTitle = ({ r: p.lowerBaileySubTitle, innerR: p.lowerBaileySubTitleInner, gPadAngle: 0.5, gPadRadius: p.lowerBaileySubTitle, padAngle: 0.5, fade: p.subFade, opacity: 1, color: colorSuffering, data: [ { text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 1 } ] .concat( dataOfId("T4EL").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 1 }; }) ) .concat( dataOfId("T3FE").map((d) => { return { text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 2 }; }) ) .concat( dataOfId("T3FE").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 2 }; }) ) .concat({ // perception r: p.lowerBailey + p.gap, text: dataOfId("N&F1")[0].text, fontSize: dataOfId("N&F1")[0].fontSize, letterSpacing: dataOfId("N&F1")[0].letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 3 }) .concat({ // Attention r: p.lowerBailey + p.gap, text: dataOfId("N&F4")[0].text, fontSize: dataOfId("N&F4")[0].fontSize, letterSpacing: dataOfId("N&F4")[0].letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 4 }) .concat({ // Contact background r: p.lowerBailey + p.gap + p.lowerBaileySubTitleInner + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner - p.lowerBaileySubTitleInner - p.gap, opacity: p.backOpacity2, text: "", startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 3 }) .concat({ // Contact text: dataOfId("N&F3")[0].text, fontSize: dataOfId("N&F3")[0].fontSize, letterSpacing: dataOfId("N&F3")[0].letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 3 }) .concat({ // Volition background r: p.lowerBailey + p.gap + p.lowerBaileySubTitleInner + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner - p.lowerBaileySubTitleInner - p.gap, opacity: p.backOpacity2, text: "", startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 4 }) .concat({ // Volition text: dataOfId("N&F2")[0].text, fontSize: dataOfId("N&F2")[0].fontSize, letterSpacing: dataOfId("N&F2")[0].letterSpacing, startAngle: 270, endAngle: 270 + (4 / 5) * 90, div: 4, n: 4 }) // 10 Fetters Abondonned .concat( dataOfId("4ROE") .slice(0, 1) .map((d) => { return { padAngle: 0, startGPadAngle: 0, endGPadAngle: 0.8, innerR: p.lowerBaileyRingInner, r: p.lowerBaileyTitle - 4 * (p.lowerBaileyRingInner + p.gap), text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 270, startAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 7, endAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 10 }; }) ) .concat( dataOfId("4ROE") .slice(1, 2) .map((d) => { return { gPadAngle: 0, endGPadAngle: 0.5, innerR: p.lowerBaileyRingInner, r: p.lowerBaileyTitle - 3 * (p.lowerBaileyRingInner + p.gap), text: "", color: colorCessation, //strokeWidth: 0, // opacity: 0.7, // fade: 20, // strokeFade: 20, // startAngle: 270, startAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 5, endAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 10, gradientID: "sakadagami", gradientR: 40, gradientX: 0, gradientY: 15 }; }) ) .concat( dataOfId("4ROE") .slice(1, 2) .map((d) => { return { gPadAngle: 0, endGPadAngle: 0.5, innerR: p.lowerBaileyRingInner, r: p.lowerBaileyTitle - 3 * (p.lowerBaileyRingInner + p.gap), text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 270, startAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 7, endAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 10 }; }) ) .concat( dataOfId("4ROE") .slice(2, 3) .map((d) => { return { gPadAngle: 0, endGPadAngle: 0.5, innerR: p.lowerBaileyRingInner, r: p.lowerBaileyTitle - 2 * (p.lowerBaileyRingInner + p.gap), text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 270, startAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 5, endAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 10 }; }) ) .concat( dataOfId("4ROE") .slice(3, 4) .map((d) => { return { gPadAngle: 0.5, //endGPadAngle: 0.5, innerR: p.lowerBaileyRingInner, r: p.lowerBaileyTitle - 1 * (p.lowerBaileyRingInner + p.gap), text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 270, startAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 0, endAngle: 0 + ((90 - (90 / 8) * 2 - p.padDonjon) / 10) * 10 }; }) ) // 3 Insights .concat( dataOfId("T3IN").map((d) => { return { endGPadAngle: 0.3, startGPadAngle: 0.8, padAngle: 0, text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 - 90 / 8 + 1 }; }) ) .concat( dataOfId("T3IN").map((d) => { return { padAngle: 0, endGPadAngle: 0.3, startGPadAngle: 0.8, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 - 90 / 8 + 1 }; }) ) // Effluants .concat( dataOfId("T4IGN").map((d) => { return { text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 3 }; }) ) .concat( dataOfId("T4IGN").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 3 }; }) ) .concat( dataOfId("T3BEC").map((d) => { return { text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 2 }; }) ) .concat( dataOfId("T3BEC").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 2 }; }) ) .concat( dataOfId("T5STR").map((d) => { return { text: "", r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, opacity: p.backOpacity2, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 1 }; }) ) .concat( dataOfId("T5STR").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 0, endAngle: 180 + (90 / 4) * 3, div: 3, n: 1 }; }) ) .concat( dataOfId("3DIV") .slice(1, 3) .reverse() .map((d, i) => { return { fade: option.includes("dark8FP") ? 0 : p.subFade, opacity: 1, innerR: p.higherBaileySectionInner, r: p.lowerBaileySubTitle + p.higherBaileySectionInner - p.gap, gPadAngle: 0.5, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90, endAngle: 180, div: 2, n: i + 1 }; }) ) })6b:T11e6,LowerBaileyTitle = ({ r: p.lowerBaileyTitle, innerR: p.lowerBaileyTitleInner, padAngle: 0.5, color: colorSuffering, data: dataOfId("TN&F") .map((d) => { return { opacity: p.backOpacity, r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap * 2, text: "", startAngle: 270, endAngle: 270 + (90 / 5) * 4 }; }) .concat( dataOfId("TN&F").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270, endAngle: 270 + (90 / 5) * 4 }; }) ) .concat( dataOfId("T6CO").map((d) => { return { text: "", r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap, opacity: p.backOpacity, startAngle: 270 + (90 / 5) * 4, endAngle: 360 }; }) ) .concat( dataOfId("T6CO").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, startAngle: 270 + (90 / 5) * 4, endAngle: 360 }; }) ) .concat({ text: "", r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap, opacity: p.backOpacity, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon }) .concat( dataOfId("T10FET").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon }; }) ) .concat({ text: "", r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap, opacity: p.backOpacity, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 }) .concat( dataOfId("T6HK").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 }; }) ) .concat({ text: "", r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap, opacity: p.backOpacity, color: colorOrigin, startAngle: 180, endAngle: 180 + (90 / 4) * 3 }) .concat( dataOfId("T3EFF").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180, endAngle: 180 + (90 / 4) * 3 }; }) ) .concat({ text: "", r: p.lowerBailey, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner + p.gap, opacity: p.backOpacity, color: colorOrigin, startAngle: 180 + (90 / 4) * 3, endAngle: 180 + (90 / 4) * 4 }) .concat( dataOfId("T4CLIN").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 3, endAngle: 180 + (90 / 4) * 4 }; }) ) .concat( dataOfId("T8FP").map((d) => { return { text: "", fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + 4 * p.gap + p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.lowerBaileyTitleInner, color: colorPath, startAngle: 90, endAngle: 180 }; }) ) .concat( dataOfId("T8FP").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90, endAngle: 180 }; }) ) })6c:T4f7f,LowerBailey = ({ r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner - p.gap, radial: true, fade: p.itemFade, opacity: p.itemOpacity, padAngle: 0.4, gPadAngle: 1.1, gPadRadius: p.lowerBaileySubTitle, data: dataOfId("4EL") .map((d, i) => { return { endGPadAngle: 0.3, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270, endAngle: 270 + 90 / 5, div: 4, n: i + 1 }; }) .concat( dataOfId("3FE").map((d, i) => { return { startGPadAngle: 0.9, endGPadAngle: 0.6, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + 90 / 5, endAngle: 270 + (2 * 90) / 5, div: 3, n: i + 1 }; }) ) .concat( dataOfId("CON").map((d, i) => { return { startGPadAngle: 0.6, endGPadAngle: 0.9, innerR: p.lowerBaileyInner - p.lowerBaileySubTitleInner - 3 * p.gap, r: p.lowerBailey + p.lowerBaileySubTitleInner + 3 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 2, endAngle: 270 + (90 / 5) * 3, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3FAB").map((d, i) => { return { startGPadAngle: 0.3, innerR: p.lowerBaileyInner - p.lowerBaileySubTitleInner - 3 * p.gap, r: p.lowerBailey + p.lowerBaileySubTitleInner + 3 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 3, endAngle: 270 + (90 / 5) * 4, div: 3, n: i + 1 }; }) ) // .concat( // dataOfId("6CO").map((d, i) => { // return { // innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner + p.gap, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorSuffering, // startAngle: 270 + (90 / 5) * 4, // endAngle: 270 + 90, // div: 6, // n: i + 1 // }; // }) // ) .concat( dataOfId("6CO1").map((d, i) => { return { gPadAngle: 0.6, innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("6CO2").map((d, i) => { return { gPadAngle: 0.6, r: p.lowerBailey + p.gap + p.consci + (p.consciGap * p.gap) / 2, innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("6CO3").map((d, i) => { return { gPadAngle: 0.6, r: p.lowerBailey + p.gap + 2 * (p.consci + (p.consciGap * p.gap) / 2), innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("6CO4").map((d, i) => { return { gPadAngle: 0.6, r: p.lowerBailey + p.gap + 3 * (p.consci + (p.consciGap * p.gap) / 2), innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("6CO5").map((d, i) => { return { gPadAngle: 0.6, r: p.lowerBailey + p.gap + 4 * (p.consci + (p.consciGap * p.gap) / 2), innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("6CO6").map((d, i) => { return { gPadAngle: 0.5, r: p.lowerBailey + p.gap + 5 * (p.consci + (p.consciGap * p.gap) / 2), innerR: p.consci, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + (90 / 5) * 4, endAngle: 270 + 90 }; }) ) .concat( dataOfId("10FET") .reverse() .map((d, i) => { return { gPadAngle: 0.6, innerR: i > 6 ? p.lowerBaileyInner + p.lowerBaileySubTitleInner - 4 * (p.lowerBaileyRingInner + p.gap) : i > 4 ? p.lowerBaileyInner + p.lowerBaileySubTitleInner - 3 * (p.lowerBaileyRingInner + p.gap) : p.lowerBaileyInner + p.lowerBaileySubTitleInner - 1 * (p.lowerBaileyRingInner + p.gap), text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon, div: 10, n: i + 1 }; }) ) .concat( dataOfId("6HK") .slice(0, 3) .reverse() .map((d, i) => { return { padAngle: 0.3, startGPadAngle: 0, endGPadAngle: 0.6, r: p.lowerBailey + p.gap, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - 90 / 8 + 1, endAngle: 90, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3IN") .reverse() .map((d, i) => { return { padAngle: 0.3, startGPadAngle: 1.1, endGPadAngle: 0.6, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 - 90 / 8 + 1, div: 3, n: i + 1 }; }) ) // .concat( // dataOfId("6HK") // .reverse() // .map((d, i) => { // return { // gPadAngle: i > 2 ? 0.6 : 1, // //endGPadAngle: i > 2 ? null : 2, // startGPadAngle: i > 2 ? 2 : null, // r: i > 2 ? p.lowerBailey + p.gap : p.lowerBailey + 2 * p.gap, // innerR: // i > 2 // ? p.lowerBaileyInner + p.lowerBaileySubTitleInner // : p.lowerBaileyInner - 2 * p.gap, // text: d.text, // fontSize: d.fontSize, // letterSpacing: d.letterSpacing, // color: colorCessation, // startAngle: 90 - (90 / 8) * 2, // endAngle: 90, // div: 6, // n: i + 1 // }; // }) // ) // startAngle: 90 - (90 / 8) * 2, // endAngle: 90 - 90 / 8 + 1.2 .concat( dataOfId("4IGN").map((d, i) => { return { startGPadAngle: 0.5, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 2, endAngle: 180 + (90 / 4) * 3, div: 4, n: i + 1 }; }) ) .concat( dataOfId("3BEC").map((d, i) => { return { gPadAngle: 0.8, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 90 / 4, endAngle: 180 + (90 / 4) * 2, div: 3, n: i + 1 }; }) ) .concat( dataOfId("5STR").map((d, i) => { return { endGPadAngle: 0.5, r: p.lowerBailey + 2 * p.gap, innerR: p.lowerBaileyInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180, endAngle: 180 + 90 / 4, div: 5, n: i + 1 }; }) ) .concat( dataOfId("4CLIN").map((d, i) => { return { gPadAngle: 0.5, innerR: p.lowerBaileyInner + p.lowerBaileySubTitleInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + (90 / 4) * 3, endAngle: 180 + (90 / 4) * 4, div: 4, n: i + 1 }; }) ) .concat( dataOfId("T4RS").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 3 }; }) ) .concat( dataOfId("T4RS").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 3 }; }) ) .concat( dataOfId("4RS") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 1.1, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 5, endAngle: 90 + (90 / 6) * 6, div: 4, n: i + 1 }; }) ) .concat( dataOfId("T3RA").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 2 }; }) ) .concat( dataOfId("T3RA").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 2 }; }) ) .concat( dataOfId("3RA") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.3, endGPadAngle: 0.9, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 4, endAngle: 90 + (90 / 6) * 5, div: 3, n: i + 1 }; }) ) .concat( dataOfId("T5RL").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 1 }; }) ) .concat( dataOfId("T5RL").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.1, endGPadAngle: 0.6, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 6, div: 3, n: 1 }; }) ) .concat( dataOfId("5RL") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.6, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 3, endAngle: 90 + (90 / 6) * 4, div: 5, n: i + 1 }; }) ) .concat( dataOfId("T4REF").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.1, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 3 }; }) ) .concat( dataOfId("T4REF").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.1, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 3 }; }) ) .concat( dataOfId("4REF") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.6, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 2, endAngle: 90 + (90 / 6) * 3, div: 4, n: i + 1 }; }) ) .concat( dataOfId("T4RM").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.1, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 2 }; }) ) .concat( dataOfId("T4RM").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.1, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 2 }; }) ) .concat( dataOfId("4RM") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.9, endGPadAngle: 0.3, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 1, endAngle: 90 + (90 / 6) * 2, div: 4, n: i + 1 }; }) ) .concat( dataOfId("T4RC").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.6, endGPadAngle: 0.2, fade: p.itemFade2, opacity: p.itemOpacity2, r: p.lowerBailey, innerR: p.lowerBaileyInner, text: "", color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 1 }; }) ) .concat( dataOfId("T4RC").map((d) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 0.55, endGPadAngle: 0, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.lowerBaileySubSub, innerR: p.lowerBaileySubSubTitleInner, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 3, div: 3, n: 1 }; }) ) .concat( dataOfId("4RC") .reverse() .map((d, i) => { return { gPadRadius: p.lowerBailey + 100, startGPadAngle: 1.1, endGPadAngle: 0.1, innerR: p.lowerBaileyInner8F, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90 + (90 / 6) * 0, endAngle: 90 + (90 / 6) * 1, div: 4, n: i + 1 }; }) ) })6d:T13d9,HigherBaileyTitle = ({ r: p.higherBaileyTitle, innerR: p.higherBaileyTitleInner, //padAngle: option.includes("backOption") ? 0 : 4, // 0.48, //endsPadAngle: option.includes("backOption") ? 0.8 : 0, padRadius: p.higherBaileyTitle + 100, padAngle: 0.7, data: [ { // background text: "", color: colorSuffering, fade: p.itemFade, opacity: p.backOpacity, startAngle: 270, endAngle: 270 + 90 / 1.5, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + p.gap } ] .concat( dataOfId("T5A").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270, endAngle: 270 + 90 / 1.5 }; }) ) .concat({ text: "", color: colorSuffering, fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + p.gap, startAngle: 270 + 90 / 1.5, endAngle: 360 }) .concat( dataOfId("T3CE").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + 90 / 1.5, endAngle: 360 }; }) ) .concat({ text: "", fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + p.gap, color: colorOrigin, startAngle: 180 + 90 / 2.5, endAngle: 270 }) .concat( dataOfId("T3CR").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 90 / 2.5, endAngle: 270 }; }) ) .concat({ text: "", fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + p.gap, color: colorOrigin, startAngle: 180, endAngle: 180 + 90 / 2.5 }) .concat( dataOfId("T3DEF").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180, endAngle: 180 + 90 / 2.5 }; }) ) .concat({ text: "", fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner + p.higherBaileyTitleInner + p.gap, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon }) .concat( dataOfId("T4SOE").map((d) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon }; }) ) .concat( dataOfId("3DIV1").map((d) => { return { padAngle: 1.7, fade: option.includes("dark8FP") ? 0 : p.subFade, r: p.higherBaileyTitle + p.higherBaileySectionInner, innerR: p.higherBaileySectionInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, startAngle: 90, endAngle: 180 }; }) ) .concat({ text: "", fade: p.itemFade, opacity: p.backOpacity, r: p.higherBailey, innerR: p.higherBaileyInner, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 }) .concat( dataOfId("T10FP").map((d) => { return { fade: option.includes("dark8FP") ? 0 : p.subFade, // r: p.higherBaileyTitle, // innerR: p.higherBaileyTitleInner, //fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.higherBailey + p.higherBaileyInner - p.higherBaileySubTitleInner + p.higherBaileySectionInner + p.gap, innerR: p.higherBaileySubTitleInner - p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 }; }) ) .concat( dataOfId("3DIV4").map((d) => { return { fade: option.includes("dark8FP") ? 0 : p.subFade, // r: p.higherBaileyTitle, // innerR: p.higherBaileyTitleInner, r: p.higherBaileyTitle + p.higherBaileySectionInner, innerR: p.higherBaileySectionInner, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 90 - (90 / 8) * 2, endAngle: 90 }; }) ) })6e:T18a4,HigherBailey = ({ r: p.higherBailey + p.gap, innerR: p.higherBaileyInner - p.gap, radial: true, fade: p.itemFade, opacity: p.itemOpacity, padAngle: 0.6, gPadAngle: 1.5, gPadRadius: p.higherBailey + p.higherBaileyInner / 2, data: dataOfId("5A") .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270, endAngle: 270 + 90 / 1.5, div: 5, n: i + 1 }; }) .concat( dataOfId("3CE").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorSuffering, startAngle: 270 + 90 / 1.5, endAngle: 360, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3DEF").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180, endAngle: 180 + 90 / 2.5, div: 3, n: i + 1 }; }) ) .concat( dataOfId("3CR").map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorOrigin, startAngle: 180 + 90 / 2.5, endAngle: 180 + 90, div: 3, n: i + 1 }; }) ) .concat( dataOfId("4SOE") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorCessation, startAngle: 0, endAngle: 90 - (90 / 8) * 2 - p.padDonjon, div: 4, n: i + 1 }; }) ) .concat( // background dataOfId("T3RV").map((d) => { return { startGPadAngle: 0.1, endGPadAngle: 1.3, fade: p.itemFade2, opacity: p.itemOpacity2, innerR: p.higherBaileyInner + p.higherBaileySubTitleInner - p.higherBaileySectionInner - p.gap, radial: false, text: "", color: colorPath, startAngle: 90 + 45, endAngle: 180 }; }) ) .concat( dataOfId("T3RV").map((d) => { return { startGPadAngle: 0, endGPadAngle: 1.2, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.higherBailey + p.higherBaileyInner - p.higherBaileySubTitleInner + p.higherBaileySectionInner + p.gap, innerR: p.higherBaileySubTitleInner - p.gap, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + 45, endAngle: 180 }; }) ) .concat( dataOfId("3RV") .slice(0, option.includes("3charInRightView") ? 4 : 3) .reverse() .map((d, i) => { return { startGPadAngle: 1.2, endGPadAngle: 2.25, r: p.higherBailey + 2 * p.gap, innerR: p.higherBaileyInner - p.higherBaileySubTitleInner + p.higherBaileySectionInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90 + 45, endAngle: 180, div: option.includes("3charInRightView") ? 4 : 3, n: i + 1 }; }) ) .concat( // BACKGROUND dataOfId("T3RI").map((d) => { return { startGPadAngle: 1.3, endGPadAngle: 0.1, fade: p.itemFade2, opacity: p.itemOpacity2, innerR: p.higherBaileyInner + p.higherBaileySubTitleInner - p.higherBaileySectionInner - p.gap, radial: false, text: "", color: colorPath, darkenFactor: 20, startAngle: 90, endAngle: 90 + 45 }; }) ) .concat( dataOfId("T3RI").map((d) => { return { startGPadAngle: 1.2, endGPadAngle: 0, fade: p.subFade, opacity: option.includes("dark8FP") ? 1 : p.subOpacity, r: p.higherBailey + p.higherBaileyInner - p.higherBaileySubTitleInner + p.higherBaileySectionInner + p.gap, innerR: p.higherBaileySubTitleInner - p.gap, radial: false, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90, endAngle: 90 + 45 }; }) ) .concat( dataOfId("3RI") .reverse() .map((d, i) => { return { startGPadAngle: 2.2, endGPadAngle: 1.2, r: p.higherBailey + 2 * p.gap, innerR: p.higherBaileyInner - p.higherBaileySubTitleInner + p.higherBaileySectionInner - 2 * p.gap, text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: colorPath, darkenFactor: 20, startAngle: 90, endAngle: 90 + 45, div: 3, n: i + 1 }; }) ) .concat( dataOfId("10FP") .reverse() .map((d, i) => { return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, innerR: p.higherBaileyInner - 2 * p.gap - p.lowerBaileyRingInner, color: colorCessation, darkenFactor: 20, startAngle: 90 - (90 / 8) * 2, endAngle: 90, div: 2, n: i + 1 }; }) ) })6f:T7f5,Donjon = ({ r: p.donjon, innerR: p.donjonInner, fade: p.itemFade, opacity: p.itemOpacity, square: true, padAngle: 1, centerRadius: false, centerInnerR: false, data: [1, 2, 3, 4] .map((d, i) => { const arrStartAngles = [0, 90, 180, 270]; const arrEndAngles = [90, 180, 270, 360]; return { text: "", r: p.donjon + p.donjonInner + 3.3, innerR: 0, color: colorFourNobleTruths, startAngle: arrStartAngles[i], endAngle: arrEndAngles[i], polyfade: p.itemFade, polyOpacity: 0.7, polyId: "4NT0", polyPad: 0 }; }) .concat( [1, 2, 3, 4].map((d, i) => { const arrStartAngles = [0, 90, 180, 270]; const arrEndAngles = [90, 180, 270, 360]; return { fade: 0, text: "", r: p.donjon - 3.5, innerR: 0, color: colorFourNobleTruths, startAngle: arrStartAngles[i], endAngle: arrEndAngles[i], polyId: "4NT", polyPad: 0, gradientID: "4N", gradientR: 97, gradientI: 38, invertGradient: true }; }) ) .concat( dataOfId("4NT").map((d, i) => { const arrStartAngles = [270, 180, 0, 90]; const arrEndAngles = [360, 270, 90, 180]; const arrDarkenFactor = [0, 0, 0, 20]; const arrColors = [ colorSuffering, colorOrigin, colorCessation, colorPath ]; return { text: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, color: arrColors[i], darkenFactor: arrDarkenFactor[i], startAngle: arrStartAngles[i], endAngle: arrEndAngles[i] }; }) ) .concat( dataOfId("T4NT").map((d) => { return { centerText: d.text, fontSize: d.fontSize, letterSpacing: d.letterSpacing, up: d.lineHeight }; }) ) })70:T5afc,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, // https://observablehq.com/@cittadhammo/the-dhamma-citadelneed 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: selectedFont, 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: null, gradientFY: null, 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, atBottom2 = e >= pi / 2 - 0.01 && e <= (3 * pi) / 2 + 0.01, 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) ^ (!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) ^ (!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.15) / 6 : (A0B0x * 1.85) / 6; // Bottom Line const heightLineY = d.radial ? A0B0y / 2 : twoLines == 0 ? A0B0y / (atBottom ? 1.8 : 2.2) : twoLines == 1 ? (A0B0y * (atBottom ? 4.2 : 3.9)) / 6 // first is bottom, second is top : (A0B0y * (atBottom ? 2.05 : 1.75)) / 6; // first is bottom, second is top 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); }71:T1603,// import { sliderBoxButtons } from "@chonghorizons/slider-with-number-input-box-and-quick-select-buttons" function sliderBoxButtons(config = {}) { let { form, action, min = 0, max = 100, sliderMax = 100, value = (max + min) / 2, step = "any", precision = 2, attributes = {}, title, description, disabled, getValue, format, display, submit, type } = typeof config === "number" ? { value: config } : config; precision = Math.pow(10, precision); const defaultValue = value; // set at the start/instantiation, not changed. // NOTE: Only min, max, step, and precision have been added to the inputs. If you want other input parameters, please fork and add them yourself. // precision only affect the inputs the slider. It's not enforced for the number entry // step is enforced for both, but not for the setValue method and double/half buttons. const wrapper = html`

`; form = html`

`; const range = form.querySelector("[type=range]"); const number = form.querySelector("[type=number]"); // console.log("asfsfsa5153096") // console.log(value); form.value = range.value = number.value = value; // console.log(range.oninput) range.oninput = function () { number.value = form.value = range.valueAsNumber; return number.value; }; console.log(range.oninput); number.oninput = function () { if (number.valueAsNumber > max) { // sets slider at the maximum, which visually sorta makes sense. range.value = sliderMax; form.value = number.value = max; return form.value; } if (number.valueAsNumber > sliderMax) { // sets slider at the maximum, which visually sorta makes sense. range.value = sliderMax; form.value = number.valueAsNumber; return form.value; } else { range.value = form.value = number.valueAsNumber; } }; // a lot of this stuff is copied from @jashkenas/inputs and @severo/inputs-setter Object.keys(attributes).forEach((key) => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); // The number box already works as the output, so output is redundant. // form.append( // html`` // ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); // console.log("40140"); const value = getValue ? getValue(form.input) : form.value; // never reached, since output isn't used // if (form.output) { // // console.log("sf40"); // const out = display ? display(value) : format ? format(value) : value; // if (out instanceof window.Element) { // while (form.output.hasChildNodes()) { // form.output.removeChild(form.output.lastChild); // } // form.output.append(out); // } else { // form.output.value = out; // } // } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; } form.setValue = function (newValue, { dispatch = true } = {}) { if (newValue > max) { // sets slider at the maximum, which visually sorta makes sense. range.value = sliderMax; form.value = number.value = max; } else if (newValue > sliderMax) { // sets slider at the maximum, which visually sorta makes sense. range.value = sliderMax; form.value = number.valueAsNumber = newValue; } else if (newValue < min) { form.value = range.value = number.value = min; } else { form.value = range.value = number.value = newValue; } // As setting the value property doesn't dispatch an event, I do it with a custom event if (dispatch) { form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } }; const halfB = form.querySelector("[name=halfB]"); // the button DOM objects. const doubleB = form.querySelector("[name=doubleB]"); //const resetB = form.querySelector("[name=resetB]"); // prevent accidental enter key issue halfB.onclick = (e) => { e.preventDefault(); form.setValue(number.valueAsNumber / 2); }; doubleB.onclick = (e) => { e.preventDefault(); form.setValue(number.valueAsNumber * 2); }; // resetB.onclick = (e) => { // e.preventDefault(); // form.setValue(defaultValue); // }; window.hochohalfB = halfB; console.log(halfB); // I don't understand exactly why this is done, but I copied it from the inputs function while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); // console.log(form); // console.log(form.output); return form; }72: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 }); }73:[{"id":"ec6bcbe6d8a69c030d3f1df8a3a7a0f00b68c8e9b370d60e77736074725deba04d9f8d0ed54f73ba795782562b6953d70d9d7fedd69baf9a48af7cded823deca","href":"https://static.observableusercontent.com/files/ec6bcbe6d8a69c030d3f1df8a3a7a0f00b68c8e9b370d60e77736074725deba04d9f8d0ed54f73ba795782562b6953d70d9d7fedd69baf9a48af7cded823deca","name":"d3.js","type":"application/javascript","lastModified":1684854075078.035,"size":588017},{"id":"fad8b4e09dba34603da081934e21ccb4ed3be9a05a46cd17bd6be51a94ba3805c78e4918b9effbd673adcf1d7ccf9be52e8840c73c1cb31aec4437e12fcd4cd0","href":"https://static.observableusercontent.com/files/fad8b4e09dba34603da081934e21ccb4ed3be9a05a46cd17bd6be51a94ba3805c78e4918b9effbd673adcf1d7ccf9be52e8840c73c1cb31aec4437e12fcd4cd0","name":"Capture d’écran 2023-12-12 à 08.47.49.png","type":"image/png","lastModified":1702367273122.405,"size":33726},{"id":"96dc7f6d63ffafdbd82ae0e4fe21dce75a22821363cdbfd7430b2d6559884c66594614ce90b01cd2a72f3d3a0c57e57f1b0f51e92956fe27aeb1544e05d51862","href":"https://static.observableusercontent.com/files/96dc7f6d63ffafdbd82ae0e4fe21dce75a22821363cdbfd7430b2d6559884c66594614ce90b01cd2a72f3d3a0c57e57f1b0f51e92956fe27aeb1544e05d51862","name":"Chart43-dark2.png","type":"image/png","lastModified":1669652555330.336,"size":9414607},{"id":"7df0193ccdb6de2e1d8efad4c99eff4d1f31f7c58be89b5cf0bd09059758699dd4f9adcac89d6d0070e087a7d200d12daa543baa64747771d3b1fead14aa2209","href":"https://static.observableusercontent.com/files/7df0193ccdb6de2e1d8efad4c99eff4d1f31f7c58be89b5cf0bd09059758699dd4f9adcac89d6d0070e087a7d200d12daa543baa64747771d3b1fead14aa2209","name":"Medieval-Castle-Terminology.webp","type":"image/webp","lastModified":1676535317219.31,"size":185444},{"id":"90aedc63dc1c58218eb48ea5dcf9e18c0de264d9121d6c7d9fdfc7b294a0a4c5e937f6d4dd719c271540201f86619347c16a9a3993cbfd1197bef1924b655b59","href":"https://static.observableusercontent.com/files/90aedc63dc1c58218eb48ea5dcf9e18c0de264d9121d6c7d9fdfc7b294a0a4c5e937f6d4dd719c271540201f86619347c16a9a3993cbfd1197bef1924b655b59","name":"Screenshot 2022-11-30 at 15.40.10.png","type":"image/png","lastModified":1669822830835.204,"size":752601},{"id":"0de3d5ef746b1d5f35043d3ad966f13be4446806a0cfeeee18316e349fb0a5f518b861e081f617f2f269cbdba185d55b36a9bfd6e6c396ab5e4d359af094b81c","href":"https://static.observableusercontent.com/files/0de3d5ef746b1d5f35043d3ad966f13be4446806a0cfeeee18316e349fb0a5f518b861e081f617f2f269cbdba185d55b36a9bfd6e6c396ab5e4d359af094b81c","name":"88x31.png","type":"image/png","lastModified":1697451204127.172,"size":997},{"id":"15219faa4667f7f0798e16c8d8f1aed3b8bbc1659ec6fb9ae699c1b265663c25e5c0a4b04a68a1af2fb3a8555c7b9344ba6a5943b1f4cd971811ae164ddf27ad","href":"https://static.observableusercontent.com/files/15219faa4667f7f0798e16c8d8f1aed3b8bbc1659ec6fb9ae699c1b265663c25e5c0a4b04a68a1af2fb3a8555c7b9344ba6a5943b1f4cd971811ae164ddf27ad","name":"cc-zero@1.svg","type":"image/svg+xml","lastModified":1701696674641.616,"size":13683}] 2f:{"id":"3915c29fed00300c","slug":"the-dhamma-citadel","title":"The Dhamma Citadel: Navigating the Four Noble Truths","thumbnail":"b88bb451ec29cc4cc4f4720ab8aed500ecf0874cfa1f6d544b54a98a1d72a9e2","access_level":"public","create_time":"$D2022-11-11T17:00:35.531Z","update_time":"$D2026-05-31T08:26:13.977Z","view_time":null,"first_public_time":"$D2022-11-11T17:00:35.531Z","fork":{"id":"8f9ce7328e262d03","slug":null,"title":"New DrawRing","owner":{"id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo"}},"stars":6,"starred":false,"owner":{"type":"team","id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":"starter_2024"},"version":10581,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null}],"members":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"89d701ee86470936","slug":"finished","title":"Final","owner":{"id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo"}},"type":"notebook","body":{"title":"The Dhamma Citadel: Navigating the Four Noble Truths","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10525,"value":"html`

\n \n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9407,"value":"x31 = FileAttachment(\"88x31.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":" Colors\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2479,"value":"viewof check = checkbox({\n options: [\n { value: \"4NT\", label: \"Donjon\" },\n { value: \"ring1\", label: \"Higher Bailey\" },\n { value: \"ring2\", label: \"Lower Bailey\" },\n { value: \"corner\", label: \"Corner Stones\" },\n { value: \"do\", label: \"Inner Wall\" },\n { value: \"nutriments\", label: \"Outer Wall\" },\n { value: \"centerRadius\", label: \"Battlements\" },\n { value: \"flanking\", label: \"Flanking Towers\" },\n { value: \"watch\", label: \"Watch Towers\" },\n { value: \"sentinel\", label: \"Sentinel Towers\" },\n { value: \"moat\", label: \"Moat\" },\n { value: \"rampartNames\", label: \"Ramparts\" },\n { value: \"background\", label: \"Grass\" },\n { value: \"bandw\", label: \"Black & White\" },\n { value: \"outlineOnly\", label: \"Outline Only\" }\n ],\n value: [\n \"4NT\",\n \"ring1\",\n \"ring2\",\n \"corner\",\n \"do\",\n \"nutriments\",\n \"centerRadius\",\n \"flanking\",\n \"watch\",\n \"sentinel\",\n \"moat\",\n \"rampartNames\",\n \"background\",\n false,\n false\n ],\n title: \"Display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2593,"value":"\n

${viewof PNGprecision}

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

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

(Use Factor 7 for A0 print)

${viewof aMultiInput}

${viewof zoomAt}

${viewof selectedLanguage}

${viewof selectedFont}

${viewof updateChart}

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9813,"value":"// must just before cell to fullscreen\nfullscreen = {\n const button = html`

${viewof colorFourNobleTruths}

${viewof colorSuffering}

${viewof colorOrigin}

${viewof colorCessation}

${viewof colorPath}