2c:null 2d:["$","title",null,{"children":"SVG circle segments | Håken Lid | Observable"}] 32:[] 30:{"id":"888ab43c5911c5b3","slug":"svg-circle","title":"SVG circle segments","thumbnail":"d91fc076d9092f07b5e356a01a8e17afde7105b3b9413192d2a77b5e5709dcc3","access_level":"public","create_time":"$D2019-05-24T14:23:48.493Z","update_time":"$D2019-06-05T19:18:22.422Z","view_time":null,"first_public_time":"$D2019-05-28T10:43:34.933Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"6d2a027a96475aac","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":"starter_2024","bio":"Full Stack Developer. Linux, Python, Django, React"},"version":498,"publish_version":498,"role":null,"authored":false,"authors":[{"type":"individual","id":"87daa21e79a008d4","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":null,"bio":"Full Stack Developer. Linux, Python, Django, React"}],"members":[{"type":"individual","id":"87daa21e79a008d4","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG circle segments","cells":[{"id":0,"value":"md`# SVG circle segments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof data = form(html`

segments\n

radius\n

width\n

margin\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"polarToCartesian = (x, y, r, degrees) => {\n const radians = degrees * Math.PI / 180.0;\n return [x + (r * Math.cos(radians)),\n y + (r * Math.sin(radians))]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"segmentPath = (x, y, r0, r1, d0, d1) => {\n // https://svgwg.org/specs/paths/#PathDataEllipticalArcCommands\n const arc = Math.abs(d0 - d1) > 180 ? 1 : 0\n const point = (radius, degree) =>\n polarToCartesian(x, y, radius, degree)\n .map(n => n.toPrecision(5))\n .join(',')\n return [\n `M${point(r0, d0)}`,\n `A${r0},${r0},0,${arc},1,${point(r0, d1)}`,\n `L${point(r1, d1)}`,\n `A${r1},${r1},0,${arc},0,${point(r1, d0)}`,\n 'Z',\n ].join('')\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"segment = (n) => {\n const center = svgSize/2\n const degrees = 360 / segments \n const start = degrees * n \n const end = (degrees * (n + 1 - margin) + (margin == 0 ? 1 : 0))\n const path = segmentPath(center, center, radius, radius-width, start, end)\n const fill = chroma.lch(80,150,start + degrees/2).alpha(1)\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"segmentCircle = (n=0) => {\n const degree = n * (360 / segments)\n const alpha = 1 / Math.log2(segments)\n const [cx, cy] = polarToCartesian(svgSize/2, svgSize/2, radius-width, degree).map(n=>n.toPrecision(4))\n const fill = chroma.lch(100,140,degree).alpha(alpha)\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"mutable segments = data.segments","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"radius = data.radius","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"width = Math.floor(data.width * data.radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"margin = data.margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"svgSize = Math.max(300, radius*2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"range = (n) => [...Array(n).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"