30:T628,slide = { const svg = d3.select(DOM.svg(width, height)) .style("height", "auto") .style("max-width", "100%"); const ratio = height / width; var x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().range([0, height]); x.domain([-span, span]); y.domain([ratio * span, -ratio * span]); const Θ = 2 * Math.PI / polygonEdges; const outterPolygonPoints = getPolygonPoints(polygonEdges, (1 + polygonOutlinePadding / δ) * polygonRadius); const innerPolygonPoints = getPolygonPoints(polygonEdges, polygonRadius); drawPolygon(svg, "outterPolygon", outterPolygonPoints, polygonOutlineColor, x, y); drawPolygon(svg, "innerPolygon", innerPolygonPoints, polygonColor, x, y); drawPolygonTitle(svg); for (var i = 0; i < polygonEdges; i++) { const tabPoints = getTabPoints(polygonRadius, tabPadding, tabThickness, tabOffset, i); const tabLineOne = getTabLine(polygonRadius, tabPadding, tabThickness, tabOffset, i, 0); const tabLineTwo = getTabLine(polygonRadius, tabPadding, tabThickness, tabOffset, i, 1); const color = dataset[i].Color || scheme[i]; drawPolygon(svg, "tab" + i, tabPoints, color, x, y); drawPolyline(svg, "line" + i + "-one", tabLineOne, color, x, y); drawPolyline(svg, "line" + i + "-two", tabLineTwo, color, x, y); drawTabLabel(svg, inscribedRadius, tabPadding, tabThickness, tabOffset, i, dataset[i].Name); drawBladeTitle(svg, polygonRadius, i, dataset[i].Title); drawBladeSubtitle(svg, polygonRadius, i, getSentenceHalves(dataset[i].Subtitle)); } return svg.node(); }31:T4f3,dataset = [ { "Edge": 1, "Name": "EU", "Color": "#4c78a8", "Title": "Europe", "Subtitle": "Continent mostly located within the Northern and Eastern Hemisphere.", "Status": "Enabled" }, { "Edge": 2, "Name": "AF", "Color": "#f58518", "Title": "Africa", "Subtitle": "Earth's second-largest and second-most populous continent.", "Status": "Enabled" }, { "Edge": 3, "Name": "AS", "Color": "#e45756", "Title": "Asia", "Subtitle": "Earth's largest and most populous continent.", "Status": "Enabled" }, { "Edge": 4, "Name": "OC", "Color": "#72b7b2", "Title": "Oceania", "Subtitle": "Smallest of the seven continents in the traditional conception.", "Status": "Enabled" }, { "Edge": 5, "Name": "AN", "Color": "#54a24b", "Title": "Antarctica", "Subtitle": "Earth's southernmost and least populous continent.", "Status": "Enabled" }, { "Edge": 6, "Name": "SA", "Color": "#eeca3b", "Title": "South America", "Subtitle": "Continent mostly located within the Western and Southern Hemisphere.", "Status": "Enabled" }, { "Edge": 7, "Name": "NA", "Color": "#b279a2", "Title": "North America", "Subtitle": "Continent mostly located within the Northern and Western Hemisphere.", "Status": "Enabled" } ]32:T49c,function drawBladeSubtitle(graphics, radius, index, subtitle) { const Φ = index * Θ; const ρ = bladeTitleRho(radius); const x = ρ * Math.sin(Φ) + bladeTitleNudge(index); const y = -ρ * Math.cos(Φ); graphics.append("text") .attr("transform", `translate(${width / 2}, ${height / 2})`) .attr("x", x) .attr("y", y) .style("fill", bladeSubtitleColor) .style("font-family", bladeSubtitleFontFamily) .style("font-size", bladeSubtitleFontSize * baseFontSize + "px") .style('dominant-baseline', 'baseline') .style("text-align", bladeTitleAlign(index)) .style("text-anchor", bladeTitleAnchor(index)) .text(subtitle[0]); graphics.append("text") .attr("transform", `translate(${width / 2}, ${height / 2})`) .attr("x", x) .attr("y", y + bladeLineSpacing * bladeSubtitleFontSize * baseFontSize) .style("fill", bladeSubtitleColor) .style("font-family", bladeSubtitleFontFamily) .style("font-size", bladeSubtitleFontSize * baseFontSize + "px") .style('dominant-baseline', 'baseline') .style("text-align", bladeTitleAlign(index)) .style("text-anchor", bladeTitleAnchor(index)) .text(subtitle[1]); }33:[] 2e:{"title":"Polygonal Items","cells":[{"id":74,"value":"md`# Polygonal Items\n\nFirst presentation template for STOIC.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"span = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"fontProportionalFamily = \"Lato\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"baseFontSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"polygonRadius = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"polygonOutlinePadding = 0.75","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"polygonColor = \"#79706e\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"polygonOutlineColor = \"#f0f0f0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"polygonFontFamily = fontProportionalFamily","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"polygonFontSize = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"polygonLineSpacing = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"polygonTitle = \"Continents of the World\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"polygonTitleColor = \"#f2f2f2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"polygonTitlePadding = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"tabPadding = 0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"tabThickness = 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"tabOffset = 0.1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"tabRadiusRatio = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"tabFontFamily = fontProportionalFamily","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"tabFontSize = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"bladeLineSpacing = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"bladeTitleFontFamily = fontProportionalFamily","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"bladeTitleFontSize = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"bladeTitleColor = \"#333333\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"bladeTitleOffset = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"bladeSubtitleFontFamily = fontProportionalFamily","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"bladeSubtitleFontSize = 1.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"bladeSubtitleColor = \"#333333\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"scheme = [\"#4c78a8\", \"#f58518\", \"#e45756\", \"#72b7b2\", \"#54a24b\", \"#eeca3b\", \"#b279a2\", \"#ff9da6\", \"#9d755d\", \"#bab0ac\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"md`## Computed Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"Θ = 2 * Math.PI / polygonEdges;","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"δ = Math.cos(Θ / 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"inscribedRadius = width * polygonRadius * Math.cos(Θ / 2) / (100 * (1 + polygonTitlePadding));","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"function getWords(sentence) {\n const words = sentence.split(/\\s+/g);\n if (!words[words.length - 1]) words.pop();\n if (!words[0]) words.shift();\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"function getSentenceHalves(sentence) {\n const limit = sentence.length / 2;\n var words = getWords(sentence);\n var first = [];\n var length = 0;\n while (length < limit) {\n const word = words.shift();\n length += word.length + 1;\n first.push(word);\n }\n return [first.join(\" \"), words.join(\" \")];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"drawPolygon = function(graphics, id, data, color, x, y) {\n graphics.selectAll(id)\n .data([data])\n .enter().append(\"polygon\")\n .style(\"fill\", color)\n .attr(\"points\",function(d) {\n return d.map(function(d) {\n return [x(d.x), y(d.y)].join(\",\");\n }).join(\" \");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"drawPolyline = function(graphics, id, data, color, x, y) {\n graphics.selectAll(id)\n .data([data])\n .enter().append(\"polyline\")\n .style(\"stroke\", color)\n .attr(\"points\",function(d) {\n return d.map(function(d) {\n return [x(d.x), y(d.y)].join(\",\");\n }).join(\" \");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"translatePoints = function(points, radius, offset, index, theta) {\n return points.map(point => {\n return {\n \"x\": point.x + offset * radius * Math.sin(index * theta),\n \"y\": point.y + offset * radius * Math.cos(index * theta)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"adjustRotation = function(angle) {\n if (angle < 90) { return angle; }\n if (angle < 180) { return angle - 180; }\n if (angle <= 270) { return angle + 180; }\n return angle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`## Polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"polygonEdges = dataset.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"polygonLineHeight = polygonLineSpacing * polygonFontSize * baseFontSize;","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"polygonWords = getWords(polygonTitle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"polygonMeasureWidth = {\n const context = document.createElement(\"canvas\").getContext(\"2d\");\n return text => context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"mutable polygonTargetWidth = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"{\n var font = new FontFaceObserver(polygonFontFamily, { weight: 400 });\n font.load().then(function () {\n mutable polygonTargetWidth = Math.sqrt(polygonMeasureWidth(polygonTitle.trim()) * polygonLineHeight)\n }, function () {\n console.log('Font is not available');\n });\n return polygonTargetWidth\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"polygonLines = {\n let line;\n let lineWidth0 = Infinity;\n const lines = [];\n for (let i = 0, n = polygonWords.length; i < n; ++i) {\n let lineText1 = (line ? line.text + \" \" : \"\") + polygonWords[i];\n let lineWidth1 = polygonMeasureWidth(lineText1);\n if ((lineWidth0 + lineWidth1) / 2 < polygonTargetWidth) {\n line.width = lineWidth0 = lineWidth1;\n line.text = lineText1;\n } else {\n lineWidth0 = polygonMeasureWidth(polygonWords[i]);\n line = {width: lineWidth0, text: polygonWords[i]};\n lines.push(line);\n }\n }\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"polygonTextRadius = {\n let radius = 0;\n for (let i = 0, n = polygonLines.length; i < n; ++i) {\n const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * polygonLineHeight;\n const dx = polygonLines[i].width / 2;\n radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2));\n }\n return radius;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"function getPolygonPoints(edges, radius) {\n var Φ = - Θ / 2;\n var points = [];\n for (var i = 0; i < edges; i++) {\n Φ += Θ;\n points.push({\"x\": radius * Math.sin(Φ),\n \"y\": radius * Math.cos(Φ)});\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"function drawPolygonTitle(graphics) {\n graphics.append(\"text\")\n .attr(\"transform\", `translate(${width / 2}, ${height / 2}) scale(${inscribedRadius / polygonTextRadius})`)\n .selectAll(\"tspan\")\n .data(polygonLines)\n .enter().append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => (i - polygonLines.length / 2 + 0.8) * polygonLineHeight)\n .style(\"fill\", polygonTitleColor)\n .style(\"font-family\", polygonFontFamily)\n .style(\"font-size\", polygonFontSize * baseFontSize + \"px\")\n .style(\"text-anchor\", \"middle\")\n .text(d => d.text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"md`## Tabs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"function getTabPoints(radius, padding, thickness, offset, index) {\n const Φ = (index - 0.5) * Θ;\n const ρ1 = (1 + padding / δ) * radius;\n const ρ2 = (1 + (padding + thickness) / δ) * radius;\n const points = [\n {\"x\": ρ1 * Math.sin(Φ), \"y\": ρ1 * Math.cos(Φ)},\n {\"x\": ρ1 * Math.sin(Φ + Θ), \"y\": ρ1 * Math.cos(Φ + Θ)},\n {\"x\": ρ2 * Math.sin(Φ + Θ), \"y\": ρ2 * Math.cos(Φ + Θ)},\n {\"x\": ρ2 * Math.sin(Φ), \"y\": ρ2 * Math.cos(Φ)}\n ];\n return translatePoints(points, radius, offset, index, Θ);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"function getTabLine(radius, padding, thickness, offset, index, line) {\n const Φ = (index - 0.5) * Θ;\n const ρ1 = (1 + padding / δ) * radius;\n const ρ2 = tabRadiusRatio * radius;\n const points = [\n {\"x\": ρ1 * Math.sin(Φ + line * Θ), \"y\": ρ1 * Math.cos(Φ + line * Θ)},\n {\"x\": ρ2 * Math.sin(Φ + line * Θ), \"y\": ρ2 * Math.cos(Φ + line * Θ)}\n ];\n return translatePoints(points, radius, offset, index, Θ);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"function drawTabLabel(graphics, radius, padding, thickness, offset, index, label) {\n const Φ = index * Θ;\n const μ = (Φ * 180 / Math.PI < 90 || Φ * 180 / Math.PI > 270) ? 1.085 : 1.115;\n const ρ = μ * radius * (1 + (padding + offset + (thickness / 2)) / δ);\n const r = adjustRotation(Φ * 180 / Math.PI);\n const cx = ρ * Math.sin(Φ);\n const cy = -ρ * Math.cos(Φ);\n const rx = cx + width / 2;\n const ry = cy + height / 2;\n graphics.append(\"text\")\n .attr(\"transform\", `rotate(${r}, ${rx}, ${ry}) translate(${width / 2}, ${height / 2})`)\n .attr(\"x\", cx)\n .attr(\"y\", cy)\n .style(\"fill\", polygonTitleColor)\n .style(\"font-family\", tabFontFamily)\n .style(\"font-size\", tabFontSize * tabFontSize * baseFontSize + \"px\")\n .style(\"font-weight\", \"bold\")\n .style('dominant-baseline', 'middle')\n .style(\"text-anchor\", \"middle\")\n .text(label);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`## Blades`","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"function bladeTitleAlign(index) {\n if (index == 0 || index == polygonEdges / 2) { return \"center\"; }\n if (index > polygonEdges / 2) { return \"right\";}\n return \"left\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"function bladeTitleAnchor(index) {\n if (index == 0 || index == polygonEdges / 2) { return \"middle\"; }\n if (index > polygonEdges / 2) { return \"end\";}\n return \"start\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"function bladeTitleNudge(index) {\n const nudge = 2 * bladeLineSpacing * bladeTitleFontSize * baseFontSize;\n if (index == 0 || index == polygonEdges / 2) { return 0; }\n if (index > polygonEdges / 2) { return nudge;}\n return -nudge;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"function bladeTitleRho(radius) {\n return (1 + bladeTitleOffset * δ) * radius * span / polygonRadius;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"function drawBladeTitle(graphics, radius, index, title) {\n const Φ = index * Θ;\n const ρ = bladeTitleRho(radius);\n const x = ρ * Math.sin(Φ) + bladeTitleNudge(index);\n const y = -ρ * Math.cos(Φ);\n graphics.append(\"text\")\n .attr(\"transform\", `translate(${width / 2}, ${height / 2})`)\n .attr(\"x\", x)\n .attr(\"y\", y - bladeLineSpacing * bladeTitleFontSize * baseFontSize)\n .style(\"fill\", bladeTitleColor)\n .style(\"font-family\", bladeTitleFontFamily)\n .style(\"font-size\", bladeTitleFontSize * baseFontSize + \"px\")\n .style(\"font-weight\", \"bold\")\n .style('dominant-baseline', 'baseline')\n .style(\"text-align\", bladeTitleAlign(index))\n .style(\"text-anchor\", bladeTitleAnchor(index))\n .text(title);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"FontFaceObserver = require('https://bundle.run/fontfaceobserver@2.1.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}