31:T7ab,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.append("circle") .attr("stroke", "#ccc") .attr("fill", "none") .attr("r", r) .attr("transform", `translate(${center})`); const tick = svg.selectAll(".tick") .data([0, 30, 45, 60].map(n => d3.range(n, 360, 90)).flat().sort((a, b) => a - b)) .enter().append("g") .attr("class", "tick"); tick.append("polyline") .attr("points", d => [-3, 3].map(n => trans(center, -d, r + n))) .attr("stroke", "#ccc"); tick.append("text") .attr("dy", d => d === 0 || d === 180 ? 4 : d > 0 && d < 180 ? 0 : 8) .attr("text-anchor", d => d < 90 || d > 270 ? "start" : d > 90 && d < 270 ? "end" : "middle") .attr("transform", d => `translate(${trans(center, -d, r + 6)})`) .attr("font-family", "sans-serif") .attr("font-size", 10) .text(d => `${d}°`); svg.append("polyline") .attr("stroke", "#888") .attr("fill", "none") .attr("points", _ => { const xmult = angle <= 90 || angle >= 270 ? -1 : 1; const ymult = angle > 180 ? -1 : 1; const maxdist = 8; const xdist = min(abs(end[0] - center[0]), maxdist); const ydist = min(abs(end[1] - center[1]), maxdist); const dist = min(xdist, ydist); return [ [end[0] + dist * xmult, center[1]], [end[0] + dist * xmult, center[1] - dist * ymult], [end[0], center[1] - dist * ymult] ] }); svg.append("polyline") .attr("stroke-width", 2) .attr("stroke", "steelblue") .attr("points", [center, [end[0], center[1]]]); svg.append("polyline") .attr("stroke-width", 2) .attr("stroke", "tomato") .attr("points", [[end[0], center[1]], end]); svg.append("polyline") .attr("stroke-width", 2) .attr("stroke", "black") .attr("points", [[center, end]]); return svg.node(); }32:[] 2f:{"title":"Circles, Angles and Right Triangles","cells":[{"id":209,"value":"md`# Circles, Angles and Right Triangles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof angle = Inputs.range([0, 360], { value: 0, step: 1, label: \"Angle\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"{\n const equation = (left, numerator, denominator, value) => {\n return `

${left}

${numerator}

${denominator}

≈

${value}

`\n }\n\n return html`\n

\n \n ${equation(\"cos\", \"x\", \"r\", cos.toFixed(2))}\n ${equation(\"sin\", \"y\", \"r\", sin.toFixed(2))}\n ${equation(\"tan\", \"y\", \"x\", angle === 270 ? Infinity : tan.toFixed(2))}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"css = `\n.equations {\n font-family: sans-serif;\n font-size: 14px;\n margin-left: 77px;\n}\n\n.left, .equality, .fraction, .value {\n display: inline-block;\n vertical-align: middle;\n}\n\n.left {\n width: 32px;\n text-align: right;\n margin-right: 6px;\n}\n\n.equality {\n margin-right: 8px;\n}\n\n.fraction {\n margin-right: 8px;\n}\n.fraction .x {\n font-weight: bold;\n color: steelblue;\n}\n.fraction .y {\n font-weight: bold;\n color: tomato;\n}\n.fraction .r {\n font-weight: bold;\n}\n\n.numerator, .denominator {\n padding-left: 2px;\n padding-right: 2px;\n text-align: center;\n}\n.denominator {\n margin-top: -4px;\n}\n.vinculum {\n border: 1px solid black;\n margin-top: -1px;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`## Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"cos = x / r","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"sin = y / r","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"tan = y / x","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"x = end[0] - center[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"y = -(end[1] - center[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"center = [ r + 38, height / 2 ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"end = trans(center, -angle, r)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"r = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`## Math`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"min = Math.min","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"abs = Math.abs","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"trans = geometric.pointTranslate","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"geometric = require(\"geometric@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}