2c:null 2d:["$","title",null,{"children":"Straight lines, Arrows, and Braces along a Circle | X.B. Workspace | Observable"}] 32:Ta64,{ const small_r = height / 3; const big_r = 1.2 * small_r; const svg = d3.select(DOM.svg(width, height)); const defs = svg.append("defs"); const arrowMarker = defs.append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, 4, 4]) .attr('refX', 2) .attr('refY', 2) .attr('markerWidth', 4) .attr('markerHeight', 4) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', `M 0 0 L 0 4 L 4 2 Z`) .attr('fill', 'black'); const smallCircle = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const smallArc = d3.arc() .innerRadius(0) .outerRadius(small_r) .startAngle(-Math.PI / 2) .endAngle(Math.PI / 2 * 3); smallCircle.append("g") .append("path") .attr("d", smallArc()) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1); const bigCircle = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const bigArc = d3.arc() .innerRadius(0) .outerRadius(big_r) .startAngle(-Math.PI / 2) .endAngle(Math.PI / 2 * 3); bigCircle.append("g") .append("path") .attr("d", bigArc()) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1); const lines = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); positionLine(lines, lineOptions.angle/180*Math.PI, lineOptions.r1, lineOptions.r2, lineOptions.haveArrow, lineOptions.arrowPosition); const arrows = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); positionArrow(arrows, arrowOptions.start_angle/180*Math.PI, arrowOptions.r, arrowOptions.angle/180*Math.PI, arrowOptions.haveArrow, arrowOptions.arrowPosition); const braces = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); positionBrace(braces, braceOptions.centerAngle/180*Math.PI, braceOptions.leftAngle/180*Math.PI, braceOptions.rightAngle/180*Math.PI, braceOptions.r1, braceOptions.r2, braceOptions.r3, braceOptions.dr, braceOptions.da/180*Math.PI); return svg.node(); }33:Tc95,function positionBrace(svg, centerAngle, leftAngle, rightAngle, r1, r2, r3, dr, da) { let x1 = -r1*Math.cos(centerAngle-leftAngle-2*da); let y1 = -r1*Math.sin(centerAngle-leftAngle-2*da); let x2 = -r2*Math.cos(centerAngle-leftAngle-2*da); let y2 = -r2*Math.sin(centerAngle-leftAngle-2*da); svg.append("path") .attr("d", `M ${x1} ${y1} L ${x2} ${y2}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let cx = -(r2+dr)*Math.cos(centerAngle-leftAngle-2*da); let cy = -(r2+dr)*Math.sin(centerAngle-leftAngle-2*da); let x3 = -(r2+dr)*Math.cos(centerAngle-leftAngle-da); let y3 = -(r2+dr)*Math.sin(centerAngle-leftAngle-da); let x4 = -(r2+dr)*Math.cos(centerAngle-da); let y4 = -(r2+dr)*Math.sin(centerAngle-da); svg.append("path") .attr("d", `M ${x2} ${y2} Q ${cx} ${cy} ${x3} ${y3}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let d_left = `M ${x3} ${y3} A ${(r2+dr)} ${(r2+dr)} 0 0 1 ${x4} ${y4}`; if (leftAngle > Math.PI) { d_left = `M ${x3} ${y3} A ${(r2+dr)} ${(r2+dr)} 0 1 1 ${x4} ${y4}`; } svg.append("path") .attr("d", d_left) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x5 = -(r2+2*dr)*Math.cos(centerAngle); let y5 = -(r2+2*dr)*Math.sin(centerAngle); let cx2 = -(r2+dr)*Math.cos(centerAngle); let cy2 = -(r2+dr)*Math.sin(centerAngle); svg.append("path") .attr("d", `M ${x4} ${y4} Q ${cx2} ${cy2} ${x5} ${y5}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x6 = -(r3)*Math.cos(centerAngle); let y6 = -(r3)*Math.sin(centerAngle); svg.append("path") .attr("d", `M ${x5} ${y5} L ${x6} ${y6}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x7 = -(r2+dr)*Math.cos(centerAngle+da); let y7 = -(r2+dr)*Math.sin(centerAngle+da); svg.append("path") .attr("d", `M ${x5} ${y5} Q ${cx2} ${cy2} ${x7} ${y7}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x8 = -(r2+dr)*Math.cos(centerAngle+rightAngle+da); let y8 = -(r2+dr)*Math.sin(centerAngle+rightAngle+da); let d_right = `M ${x7} ${y7} A ${(r2+dr)} ${(r2+dr)} 0 0 1 ${x8} ${y8}`; if (rightAngle > Math.PI) { d_right = `M ${x7} ${y7} A ${(r2+dr)} ${(r2+dr)} 0 1 1 ${x8} ${y8}`; } svg.append("path") .attr("d", d_right) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x9 = -r2*Math.cos(centerAngle+rightAngle+2*da); let y9 = -r2*Math.sin(centerAngle+rightAngle+2*da); let cx3 = -(r2+dr)*Math.cos(centerAngle+rightAngle+2*da); let cy3 = -(r2+dr)*Math.sin(centerAngle+rightAngle+2*da); svg.append("path") .attr("d", `M ${x8} ${y8} Q ${cx3} ${cy3} ${x9} ${y9}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") let x10 = -r1*Math.cos(centerAngle+rightAngle+2*da); let y10 = -r1*Math.sin(centerAngle+rightAngle+2*da); svg.append("path") .attr("d", `M ${x9} ${y9} L ${x10} ${y10}`) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") }34:T42c,function positionArrow(svg, start_angle, r, angle, haveArrow, position) { let d = `M ${-Math.cos(start_angle)*r} ${-r*Math.sin(start_angle)} A ${r} ${r} 0 0 1 ${-Math.cos(start_angle+angle)*r} ${-r*Math.sin(start_angle+angle)}`; if (angle>Math.PI) { d = `M ${-Math.cos(start_angle)*r} ${-r*Math.sin(start_angle)} A ${r} ${r} 0 1 1 ${-Math.cos(start_angle+angle)*r} ${-r*Math.sin(start_angle+angle)}`; } if (haveArrow) { if (position === "start") { svg.append("path") .attr("d", d) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") .attr("marker-start", "url(#arrow)") } if (position === "end") { svg.append("path") .attr("d", d) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") .attr("marker-end", "url(#arrow)") } } else { svg.append("path") .attr("d", d) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") } }35:[] 30:{"id":"337e9e88a703ac29","slug":"straight-lines-arrows-and-braces-along-a-circle","title":"Straight lines, Arrows, and Braces along a Circle","thumbnail":"7a52338c6c0f07e2357cec288494dafd823212cb95f252dffd2811c24a1c9de7","access_level":"public","create_time":"$D2026-03-19T02:53:59.635Z","update_time":"$D2026-03-19T05:28:33.862Z","view_time":null,"first_public_time":"$D2026-03-19T05:32:49.803Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"189a68e88fe366bd","login":"x-b-workspace","name":"X.B. Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a95188709ffcb422fcc635f47420feb25f69fd7305881a42b4a9907e87d2aaf0","tier":"starter_2024"},"version":152,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc82b550d8112553","login":"xiongbiao","name":"XiongBiao","avatar_url":"https://avatars-next.observableusercontent.com/caf2b8f3d51ea1f56efa20730077b94beb57622ab029080cdb84a9ad89ac467d","tier":null}],"members":[{"type":"individual","id":"fc82b550d8112553","login":"xiongbiao","name":"XiongBiao","avatar_url":"https://avatars-next.observableusercontent.com/caf2b8f3d51ea1f56efa20730077b94beb57622ab029080cdb84a9ad89ac467d","tier":null,"role":"editor"},{"type":"team","id":"189a68e88fe366bd","login":"x-b-workspace","name":"X.B. Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a95188709ffcb422fcc635f47420feb25f69fd7305881a42b4a9907e87d2aaf0","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Straight lines, Arrows, and Braces along a Circle","cells":[{"id":0,"value":"# Straight lines, Arrows, and Braces along a Circle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"

Line Options

\n ${viewof lineOptions}\n

Arrow Options

\n ${viewof arrowOptions}\n

Brace Options

\n ${viewof braceOptions}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function positionLine(svg, angle, r1, r2, haveArrow, arrowPosition) {\n let x1 = -r1*Math.cos(angle);\n let y1 = -r1*Math.sin(angle);\n let x2 = -r2*Math.cos(angle);\n let y2 = -r2*Math.sin(angle);\n if (haveArrow) {\n if (arrowPosition === \"start\") {\n svg.append(\"path\")\n .attr(\"d\", `M ${x1} ${y1} L ${x2} ${y2}`)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"1\")\n .attr(\"marker-start\", \"url(#arrow)\")\n }\n if (arrowPosition === \"end\") {\n svg.append(\"path\")\n .attr(\"d\", `M ${x1} ${y1} L ${x2} ${y2}`)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"1\")\n .attr(\"marker-end\", \"url(#arrow)\")\n }\n } else {\n svg.append(\"path\")\n .attr(\"d\", `M ${x1} ${y1} L ${x2} ${y2}`)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"1\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = 0.6*width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof lineOptions = Inputs.form({\n angle: Inputs.range([0, 360], { label: \"angle\", step: 1, value: 0 }),\n r1: Inputs.range([0, height], { label: \"r1\", step: 1, value: height / 3 }),\n r2: Inputs.range([0, height], { label: \"r2\", step: 1, value: height / 3 * 1.1 }),\n haveArrow: Inputs.toggle({ label: \"haveArrow\", value: true }),\n arrowPosition: Inputs.select([\"start\", \"end\"], { label: \"arrowPosition\", value: \"end\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof arrowOptions = Inputs.form({\n start_angle: Inputs.range([0, 360], { label: \"start_angle\", step: 1, value: 75 }),\n r: Inputs.range([0, height], { label: \"r1\", step: 1, value: height / 3 * 1.1 }),\n angle: Inputs.range([0, 360], { label: \"angle\", step: 1, value: 30 }),\n haveArrow: Inputs.toggle({ label: \"haveArrow\", value: true }),\n arrowPosition: Inputs.select([\"start\", \"end\"], { label: \"arrowPosition\", value: \"end\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof braceOptions = Inputs.form({\n centerAngle: Inputs.range([0, 360], { label: \"centerAngle\", step: 1, value: 45 }),\n leftAngle: Inputs.range([0, 360], { label: \"leftAngle\", step: 1, value: 15 }),\n rightAngle: Inputs.range([0, 360], { label: \"rightAngle\", step: 1, value: 15 }),\n r1: Inputs.range([0, height], { label: \"r1\", step: 1, value: height / 3 * 1.2 }),\n r2: Inputs.range([0, height], { label: \"r2\", step: 1, value: height / 3 * 1.25 }),\n r3: Inputs.range([0, height], { label: \"r3\", step: 1, value: height / 3 * 1.4 }),\n dr: Inputs.range([0, height], { label: \"dr\", step: 1, value: height / 3 * 0.02 }),\n da: Inputs.range([0, 360], { label: \"da\", step: 1, value: 1 }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"