2d:null 2e:["$","title",null,{"children":"Compass Rose as legend with colors | Paul Edwards | Observable"}] 33:[] 31:{"id":"2a1258de57543257","slug":"compass-rose-as-legend-with-colors","title":"Compass Rose as legend with colors","thumbnail":"f854cdf46cc5c94899974a11d78a1b79b9b3dbd7e3b8ec82af53b1e399f9c648","access_level":"public","create_time":"$D2022-08-18T13:01:03.244Z","update_time":"$D2022-08-19T16:46:09.923Z","view_time":null,"first_public_time":"$D2022-08-19T16:47:35.017Z","has_unpublished_edits":null,"fork":{"id":"543771e20139d742","slug":"compass-rose","title":"Compass Rose","owner":{"id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel"}},"stars":1,"starred":false,"owner":{"type":"team","id":"fc855e7952f84902","login":"pjedwards","name":"Paul Edwards","avatar_url":"https://avatars-next.observableusercontent.com/3cf308146be34286737cb1062c47258d8cb5be876c0b490ad545fcde5330a4d5","tier":"starter_2024"},"version":622,"publish_version":622,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9a5824f2c6fe12e","login":"pjedwards","name":"Paul Edwards","avatar_url":"https://avatars-next.observableusercontent.com/3cf308146be34286737cb1062c47258d8cb5be876c0b490ad545fcde5330a4d5","tier":null}],"members":[{"type":"individual","id":"b9a5824f2c6fe12e","login":"pjedwards","name":"Paul Edwards","avatar_url":"https://avatars-next.observableusercontent.com/3cf308146be34286737cb1062c47258d8cb5be876c0b490ad545fcde5330a4d5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Compass Rose as legend with colors","cells":[{"id":0,"value":"# Compass Rose as legend with colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`See https://observablehq.com/@redblobgames/compass-rose . Create a map legend that is recognizable as a compass rose. The legend references a layer that displays features colored by direction within a range of degrees. Hence the rose is created dynamically based on the number of layers passed in. It assumes that all 360 degrees are accounted for, and that the first color in the array starts at 0 and moves clockwise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"colors = [\n '#e2d9e2',\n '#bfccd3',\n '#8eb1c5',\n '#6d90c0',\n '#606cb8',\n '#5e43a5',\n '#531e7c',\n '#391146',\n '#3b113b',\n '#64194b',\n '#8e2c50',\n '#ac4d51',\n '#c0755e',\n '#cb9f83',\n '#d8c5bb',\n '#e2d9e2'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"viewof size = Inputs.range([50, 700], {\n value: 300,\n step: 20,\n label: 'size'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"margin = size/14","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"radius = size/2 - margin - padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof numMajorTicks = Inputs.range([0, 45], {\n value: 6,\n step: 2,\n label: \"Major ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":337,"value":"function pie(radius, width, narrowness=1.0, colors) {\n return (_, i) => ``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"function tick(radius, length, color='black') {\n return ``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":320,"value":"angleMarker = function(radius, fontSize) { return (angle, _) => {\n if ([0, 45, 90, 135, 180, 225, 270, 315].includes(angle)) return ``;\n return `${angle}`;\n};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"