30:[] 2e:{"title":"SVG circle segments","cells":[{"id":0,"value":"md`# SVG circle segments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof data = form(html`

segments\n

radius\n

width\n

margin\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":99,"value":"mutable segments = data.segments","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"radius = data.radius","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"width = Math.floor(data.width * data.radius)","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"margin = data.margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"svgSize = Math.max(300, radius*2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"range = (n) => [...Array(n).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}