2c:null 2d:["$","title",null,{"children":"The SVG arc command | Kelley van Evert | Observable"}] 32:Tdb9,{ // manually specifying this dependency on the vue components // (so that if I edit them, this cell also re-evaluates) components; const instance = new Vue({ el: html`

M 0 0 A

`, data () { return { ...defaults() }; }, computed: { d () { return [ "M 0 0 A", this.rx, this.ry, this.x_rot, this.large, this.sweep, this.x, this.y ].join(" "); }, centerParams () { return (mutable cp = EndpointToCenterArcParams(0, 0, this.rx, this.ry, this.x_rot, this.large, this.sweep, this.x, this.y)); }, }, mounted () { d3.select(this.$el).on("dblclick", () => { console.log("dbl"); Object.entries(defaults()).forEach(([k,v]) => { this[k] = v; }); }); d3.select(this.$el).select("svg").call(d3.drag().on("drag", () => { // (actually I should scale this just a bit) this.t = [ this.t[0] + d3.event.dx, this.t[1] + d3.event.dy, ]; })); }, }); return instance.$el; }33:T731,/** Perform the endpoint to center arc parameter conversion as detailed in the SVG 1.1 spec. F.6.5 Conversion from endpoint to center parameterization @param r must be a ref in case it needs to be scaled up, as per the SVG spec */ function EndpointToCenterArcParams (ax, ay, rx, ry, x_rot, large, sweep, bx, by) { x_rot *= Math.PI/180; rx = Math.abs(rx); ry = Math.abs(ry); //(F.6.5.1) const dx2 = (ax - bx) / 2; const dy2 = (ay - by) / 2; const x1p = Math.cos(x_rot)*dx2 + Math.sin(x_rot)*dy2; const y1p = -Math.sin(x_rot)*dx2 + Math.cos(x_rot)*dy2; //(F.6.5.2) let rxs = rx * rx; let rys = ry * ry; const x1ps = x1p * x1p; const y1ps = y1p * y1p; // check if the radius is too small `pq < 0`, when `dq > rxs * rys` (see below) // cr is the ratio (dq : rxs * rys) const cr = x1ps/rxs + y1ps/rys; let s = 1; if (cr > 1) { //scale up rX,rY equally so cr == 1 s = Math.sqrt(cr); rx = s * rx; ry = s * ry; rxs = rx * rx; rys = ry * ry; } const dq = (rxs * y1ps + rys * x1ps); const pq = (rxs*rys - dq) / dq; let q = Math.sqrt( Math.max(0,pq) ); //use Max to account for float precision if (large == sweep) { q = -q; } const cxp = q * rx * y1p / ry; const cyp = - q * ry * x1p / rx; //(F.6.5.3) const cx = Math.cos(x_rot)*cxp - Math.sin(x_rot)*cyp + (ax + bx)/2; const cy = Math.sin(x_rot)*cxp + Math.cos(x_rot)*cyp + (ay + by)/2; //(F.6.5.5) let theta = svgAngle( 1,0, (x1p-cxp) / rx, (y1p - cyp)/ry ); //(F.6.5.6) let delta = svgAngle( (x1p - cxp)/rx, (y1p - cyp)/ry, (-x1p - cxp)/rx, (-y1p-cyp)/ry); delta = delta % (Math.PI * 2); if (!sweep) { delta -= 2 * Math.PI; } x_rot *= 180/Math.PI; theta *= 180/Math.PI; delta *= 180/Math.PI; return { s, rx, ry, x_rot, cx, cy, theta, delta }; }34:T4dc,toggle = Vue.component("toggle", { template: `

`, props: { w: Number, value: Number, varname: String, }, data () { let val = this.value != undefined ? this.value : 1; let charwidth = 0; if (this.w != undefined) { charwidth = Math.floor(this.w); } else { charwidth = 2; } return { val, charwidth }; }, computed: { height () { return (this.val * 100) + "%"; }, }, methods: { fmt (v) { let str = "" + v; return Array.from({ length: this.charwidth - str.length }) .map(i => " ") .join("") + str; }, }, mounted () { const toggleval = () => { this.val = 1 - this.val; this.$emit("input", this.val); }; d3.select(this.$el) .select(".body") .on("click", toggleval); }, })35:T7df,slider = Vue.component("slider", { template: `

`, props: { min: { type: Number, default: 0 }, max: { type: Number, default: 100 }, step: { type: Number, default: 0.0001 }, w: Number, value: Number, varname: String, }, data () { let val = this.quantize(this.value != undefined ? this.value : this.min + (this.max - this.min)/2); let charwidth = 0; if (this.w != undefined) { charwidth = Math.floor(this.w); } else { // guess width in characters console.log("guess"); for (let i = 0; i < 7; i++) { let str = "" + this.quantize(this.min + (i/10)*(this.max - this.min)); charwidth = Math.max(charwidth, str.length); } } return { val, charwidth }; }, computed: { height () { return (100 * (this.val-this.min)/(this.max-this.min)) + "%"; }, }, methods: { fmt (v) { let str = "" + this.quantize(v); return Array.from({ length: this.charwidth - str.length }) .map(i => " ") .join("") + str; }, quantize (v) { return Math.round(v / this.step) * this.step; }, }, mounted () { const setval = () => { const p = 1 - Math.max(0, Math.min(1, d3.event.y / 100)); this.val = this.quantize(this.min + p * (this.max - this.min)); this.$emit("input", this.val); }; d3.select(this.$el) .select(".body") .call(d3.drag().on("start", setval).on("drag", setval)); }, })36:T550,html`[Styling]`37:[] 30:{"id":"8c2250e59dc8ecc1","slug":"svg-arcs","title":"The SVG arc command","thumbnail":"9bb36c308f8f6fe67c7519871f73acbdde08bed1d5cc2da1b19bdd791073c2e4","access_level":"public","create_time":"$D2018-10-18T19:42:03.717Z","update_time":"$D2018-10-19T15:26:52.630Z","view_time":null,"first_public_time":"$D2018-10-18T22:35:15.092Z","has_unpublished_edits":null,"fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1239,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"292860b4abec108d","slug":"visualizations","title":"Visualizations","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"titling":"auto","title":"The SVG arc command","cells":[{"id":0,"value":"md`# The SVG arc command`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`_So you want to draw an arc, but like me, you find the SVG arc path command spec just incredibly unintuitive and befuzzling..._\n\n_Worry not! This notebook will help you understand its logic, by means of a beautiful and enlightening interactive tool :D_\n\n_Note that Jacob Rus also has [a notebook on SVG arcs](https://beta.observablehq.com/@jrus/svg-elliptical-arcs). Where Jacob is good as explaining the maths, I'm just trying to make the whole shebang visually intuitive._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`## The SVG specification logic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`As is more often the case, there are multiple ways to describe the same thing. In our case, we'll consider two **equivalent parametrizations** that can be used to describe an **arc**, i.e. a part of an ellipse.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"md`The one you might feel most at ease with is the **center parametrization**, and consists of:\n\\`\\`\\`javascript\n cx, cy // center of the ellipse\n rx, ry // radii of the ellipse\n x_rot // rotation of the ellipse (around the x axis)\n startAngle, endAngle // start and end angles of the arc\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"md`However, the way the SVG path syntax works, is that each command specifies a way to **get to some next point, from the current point**. For instance, the \\`M\\` command just moves the pen, and the \\`L\\` command draws a straight line. In line with this, the \\`A\\` (arc) command would have to specify some way of drawing a line segment *curving towards* some next point, and this is at odds with the center parametrization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"md`Hence, SVG specifies the \\`A\\` command in terms of the **endpoint parametrization**, consisting of:\n\\`\\`\\`javascript\n ax, ay // starting point (A)\n rx, ry // radii of the ellipse\n x_rot // rotation of the ellipse (around the x axis)\n large // flag; whether to draw the large part of the ellipse (instead of the small part)\n sweep // flag; whether to mirror over the line between (A) and (B)\n bx, by // starting point (B)\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"md`Converting these two parametrizations to each other is not trivial at all, so it's OK if it boggles your mind a bit :D The SVG specification contains [an appendix detailing the maths of it](https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes), for just this reason.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`For me at least, it took getting the above story straight to be able to deal with the \\`A\\` command conceptually. It helps you understand how to interpret the \\`large\\` and \\`sweep\\` flags, etc.\n\nYou can use the tool below, to draw an arc from the origin ${pt_icon(\"#07c\", \"A\")} \\`= (0,0)\\` to the point ${pt_icon(\"#c00\", \"B\")} \\`= (x,y)\\`. Play around with it to get the hang of the SVG arc command :D\n\n(Double-click to reset.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"mutable cp = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"md`## Dependencies / implementation details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"function svgAngle (ux, uy, vx, vy) {\n //(F.6.5.4)\n const dot = ux*vx + uy*vy;\n const len = Math.hypot(vx-ux, vy-uy);\n let angle = Math.acos(Math.max(-1, Math.min(1, dot / len)));\n if ((ux*vy - uy*vx) < 0) {\n angle = -angle;\n }\n return angle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"defaults = () => ({\n t: [110, 200],\n rx: 84, ry: 40,\n x_rot: 35, large: 0, sweep: 0,\n x: 200, y: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"// this cell just encodes the simultaneous dependency of the collection of vue components\ncomponents = { slider, toggle, ptc }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"ptc = Vue.component(\"pt\", {\n template: `\n \n {{ text }}\n \n `,\n props: [\"pos\", \"color\", \"text\"],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function pt_icon (color, text) {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function pt (pos, color, text) {\n return `\n \n ${text}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"