2b:null 2c:["$","title",null,{"children":"Compass Rose | Amit Patel | Observable"}] 31:[] 2f:{"id":"543771e20139d742","slug":"compass-rose","title":"Compass Rose","thumbnail":"c11551b8033dbfcd372e84dd4018ddb80434c13fd6fd5beb5c438a3604f455ee","access_level":"public","create_time":"$D2021-12-11T04:33:11.552Z","update_time":"$D2021-12-17T01:39:14.277Z","view_time":null,"first_public_time":"$D2021-12-11T05:06:55.112Z","fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":334,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Compass Rose","cells":[{"id":0,"value":"# Compass Rose","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"md`See https://heredragonsabound.blogspot.com/2021/12/map-compasses-part-7-compass-points.html . I decided to use svg literals (declarative) instead of d3 (imperative), and I didn't implement the command language yet. I have some fun sliders. It might be cool to have show the generated command and make every number in it interactively adjustable. I kind of feel like [Apparatus](http://aprt.us/)/[Cuttle](https://cuttle.xyz/) would be able to generate things like these but I haven't tried.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"viewof cardinalWedge = Inputs.range([0, 0.5], {\n value: 0.2,\n step: 0.01,\n label: \"Wedge\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"viewof numDots = Inputs.range([0, 180], {\n value: 20,\n step: 4,\n label: \"Number of dots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"viewof numMajorTicks = Inputs.range([0, 45], {\n value: 18,\n step: 2,\n label: \"Major ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"viewof numMinorTicks = Inputs.range([0, 10], {\n value: 4,\n step: 1,\n label: \"Minor ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"viewof patternHeight = Inputs.range([1, 10], {\n value: 2,\n step: 1,\n label: \"Pattern spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"viewof patternPercentageFill = Inputs.range([0, 1], {\n value: 0.4,\n step: 0.01,\n label: \"Pattern percentage fill\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"patternDefs = ` \n \n \n \n \n \n \n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"function wedge(radius, width, narrowness=1.0) {\n return `\n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"function tick(radius, length, color) {\n return ``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"function directionMarker(radius, fontSize) { return (angle, _) => {\n let label = {0: 'N', 45: 'NE', 90: 'E', 135: 'SE', 180: 'S', 225: 'SW', 270: 'W', 315: 'NW'}[angle] ?? '??';\n return `${label}`;\n};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"angleMarker = function(radius, fontSize) { return (angle, _) => {\n if (angle === 0 || angle === 90 || angle === 180 || angle === 270) return ``;\n return `${angle}`;\n};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"function repeat(component, N, initialAngle=0) {\n // NOTE: if component is a function, it will be called with (angle, i)\n if (N <= 0) return \"\";\n let result = [];\n for (let i = 0; i < N; i++) {\n let angle = (360 / N) * i + initialAngle;\n let el = typeof component === 'function'? component(angle, i) : component;\n result.push(`${el}`);\n }\n return result.join(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"ordinalAngle = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"cardinalAngle = 45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"cardinalLength = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"