2d:null 2e:["$","title",null,{"children":"Exploring the Arc generator | Malik Koné | Observable"}] 33:[] 31:{"id":"bff362379cf5638f","slug":"exploring-the-arcs-generator-parameters","title":"Exploring the Arc generator","thumbnail":"d5fb53eecf387d23dc0bdf3d7eba2b59138b5ed17af36b06b35c243a57f297ec","access_level":"public","create_time":"$D2019-07-03T08:45:16.494Z","update_time":"$D2019-07-03T17:41:18.028Z","view_time":null,"first_public_time":"$D2019-07-03T10:41:19.708Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":257,"publish_version":257,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"dddb84019006509b","slug":"observe-to-explore-vice-versa","title":"Observe, Explore & vice versa","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Exploring the Arc generator","cells":[{"id":0,"value":"md`# Exploring the Arc generator\n- [d3-shape documentation](https://github.com/d3/d3-shape/blob/v1.3.4/README.md#arcs)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`

Params

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n const svg = d3.select(DOM.svg(dim.chartW, dim.chartH))\n // changing the viewBox so I don't have to translate the shape. 0,0 will be at the center\n .attr(\"viewBox\", [dim.view.g, dim.view.s, dim.chartW, dim.chartH]); \n\n // arc generator creation with different options\n const arc = d3.arc()\n .innerRadius(inner_radius*dim.radius)\n .outerRadius(outer_radius*dim.radius)\n .startAngle(start_angle * 2*Math.PI)\n .cornerRadius(corner_radius)\n .padAngle(pad_angle*2*Math.PI)\n .padRadius(pad_radius)\n .endAngle(end_angle * 2*Math.PI);\n //.centroid(centroid); check https://bl.ocks.org/mbostock/c274877f647361f3df7d good for labels\n \n //arc();// \"M0,-100A100,100,0,0,1,100,0L0,0Z\"\n \n // drawing it !\n svg.append('path')\n .attr('d', arc())\n .attr('fill', 'none')\n .attr('stroke-width', '1')\n .attr('stroke', 'black');\n \n return svg.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`##### canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"dim = {\n let W = width, \n H = 400,\n marge = ({s:10, d:10, i:30, g:30});\n let chartW = W - marge.g - marge.d,\n chartH = H - marge.s - marge.i;\n \n let view= ({s:-chartH/2, d: chartW/2, i:chartH/2, g:-chartW/2})\n \n let radius = d3.min([chartW, chartH])/ 2;\n return {W, H, marge, chartW, chartH, radius, view}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`#### views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof pad_radius= slider({\n title: \"Pad radius\", \n min: 0, \n max: 90, \n step: 1, \n value: 0, \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof pad_angle= slider({\n title: \"pad angle\", \n min: 0, \n max: 1, \n step: .01, \n format:\".0%\",\n value: 0, \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof centroid = slider({\n title: \"Centroid\", \n min: 1, \n max: 60, \n step: 1, \n value: 30, \n format: \"\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof corner_radius = slider({\n min: .0, \n max: 45, \n step: 1, \n value: 10, \n title: \"Corner radius\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof end_angle = slider({\n min: 0, \n max: 1, \n step: .01, \n value: 1, \n format: \".0%\",\n title: \"End angle\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof start_angle = slider({\n min: 0, \n max: 1, \n step: .01, \n value: .32, \n format: \".0%\",\n title: \"Start angle\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof outer_radius = slider({\n min: .01, \n max: 1, \n step: .01, \n value: 10, \n format: \".0%\",\n title: \"Outer radius\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof inner_radius = slider({\n min: 0, \n max: outer_radius, \n step: 0.01, \n format: \".0%\",\n title: \"Inner radius\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

${viewof inner_radius}	${viewof outer_radius}	${viewof pad_radius}
${viewof start_angle}	${viewof end_angle}	${viewof pad_angle}
${viewof centroid}	${viewof corner_radius}