2d:null 2e:["$","title",null,{"children":"Exploring d3-shape Symbols | Malik Koné | Observable"}] 33:[] 31:{"id":"4e8cfdcf568a2c9d","slug":"exploring-d3-shape-symbols","title":"Exploring d3-shape Symbols","thumbnail":"f30ae5ff7196a1d76d331acda275aaa3ecf538fc6221490f9fa36c301c846313","access_level":"public","create_time":"$D2019-07-03T16:39:47.437Z","update_time":"$D2019-10-12T10:07:07.810Z","view_time":null,"first_public_time":"$D2019-07-05T11:21:18.212Z","has_unpublished_edits":null,"fork":{"id":"2436ffc72b5e66ab","slug":"chart-base-template","title":"Chart base template","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":552,"publish_version":552,"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":0,"collection":{"id":"33332922de5e29a1","slug":"seeds","title":"Seeds","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Exploring d3-shape Symbols","cells":[{"id":0,"value":"md`# Exploring d3-shape Symbols\n- [d3-shape symbols docs...](https://github.com/d3/d3-shape/blob/v1.3.4/README.md#symbols)\n- [Fitting symboles](https://bl.ocks.org/mbostock/3dd515e692504c92ab65)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"html`

Notebook's params

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"mk_chart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mk_chart = function() {\n const [rootdiv, svg, g] = initChart();\n svg.attr(\"viewBox\", [dim.mid.nW, dim.mid.nH, dim.W, dim.H]);\n\n g.attr('tranform', `translate(${dim.mgs.g}, ${dim.mgs.s})`)\n .attr(\"class\", \"shape\")\n .append(\"path\")\n .attr(\"d\", shape_gen);\n\n const line = d3.line()\n .x((d) => rect_border.x(d[0]))\n .y((d) => rect_border.y(d[1]))\n .curve(d3.curveLinearClosed);\n\n // could use .append('rec'), but more freedome like this\n g.append('path')\n .datum(rect_border.data)\n .attr(\"class\", \"shape-border\")\n .attr('d', line);\n\n rootdiv.appendChild(svg.node());\n rootdiv.append(style)\n return rootdiv;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"shape_gen = (d) => d3.symbol()\n.type(shapes[shape_type])\n.size(size * dim.gW * dim.gH)();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"shapes = ({Circle: d3.symbolCircle, \n Cross: d3.symbolCross, \n Diamond: d3.symbolDiamond, \n Square: d3.symbolSquare, \n Star: d3.symbolStar, \n Triangle: d3.symbolTriangle, \n Wye: d3.symbolWye})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"rect_border = ({data: [[0,0], [1,0], [1, 1], [0,1]],\n x : d3.scaleLinear().range([dim.mid.ngW, dim.mid.gW]),\n y : d3.scaleLinear().range([dim.mid.ngH, dim.mid.gH])})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"dim = mk_dim(width, 400, {t: 30, r: 100, b: 25, l: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`#### Views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof size = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: \".0%\",\n description: \"Size (% of the black rectangle's area)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof shape_type = select({\n title: \"Shape type\",\n description: \"Select a type\",\n options: Object.keys(shapes),\n value: Object.keys(shapes)[0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {slider, select, text, number, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"import {initChart} from \"@maliky/chart-base-template\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"import {mk_dim} from \"@maliky/dims\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

${viewof shape_type}

${viewof size}