2e:null 2f:["$","title",null,{"children":"Radial axis ideas | Toph Tucker | Observable"}] 34:[] 32:{"id":"7ed5eecc1ba2c7d9","slug":"radial-axis-ideas","title":"Radial axis ideas","thumbnail":"357f88badb5b5eb3dd06e032cf64352595238d08daa154a7f6e7930bd80a4752","access_level":"public","create_time":"$D2021-06-14T18:18:01.589Z","update_time":"$D2021-06-14T20:13:43.324Z","view_time":null,"first_public_time":"$D2022-12-14T22:55:21.878Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":202,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d6d8f3dc44d16858","slug":"utilities","title":"Utilities","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Radial axis ideas","cells":[{"id":0,"value":"# Radial axis ideas\n\nRadial axes are tricky because… um… the scale is nonlinear and the marks are non-Cartesian? Or because typically each radius has a different origin, because… because it’s typically a secondary embedded scale, rather than mere polar coordinates? Sometimes about invariance under translation? I don’t know why they’re tricky, to be honest. So it seems the typical approach is to show three examples of whole marks (i.e. circles) scaled to different degrees. That’s space-hungry because you have to start over at zero every time you draw a new circle.\n\nHere’s a normal scaleSqrt axis:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"It’s nice and compact; it doesn’t have to repeat itself, to start over at zero — it just marks points along the way.\n\nWhat if we just extended and curved the ticks?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"{\n const uid = DOM.uid();\n const ticks = r.ticks(5);\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"The curvature gets very subtle very fast, especially when it’s clipped so short. Also, the zero-radius circle is invisible. Maybe we could contrive to show zero and an example circle?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"{\n const uid = DOM.uid();\n const ticks = r.ticks(5);\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"That feels weird. Maybe we could get ticks equally-spaced in the range instead of in the domain?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"{\n const uid = DOM.uid();\n const ticks = d3.ticks(...r.range(), 3);\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"{\n const uid = DOM.uid();\n const ticks = d3.ticks(...r.range(), 5);\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"That has issues too. What if we just let it be much taller?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"{\n const uid = DOM.uid();\n const ticks = r.ticks(5);\n const h = r.range()[1] + (height - margin.top);\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"Hm. Still probably not as good as just showing three full example circles.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`Radius scales for Plot are available at https://observablehq.com/d/c324a9a466e66329 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"r = d3.scaleSqrt().range([0, 150])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({ top: height / 2, left: 10, right: 10, bottom: 0 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"