2d:null 2e:["$","title",null,{"children":"Exploring Simple paths | Malik Koné | Observable"}] 33:[] 31:{"id":"681510799dff7067","slug":"paths-execices","title":"Exploring Simple paths","thumbnail":"ad8909dc3484b636bc05f5d06349b870e5c73d67675c31cb5578380aebd59a2e","access_level":"public","create_time":"$D2019-04-16T16:40:16.292Z","update_time":"$D2019-09-20T08:53:34.490Z","view_time":null,"first_public_time":"$D2019-07-01T13:32:42.088Z","has_unpublished_edits":null,"fork":false,"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":748,"publish_version":748,"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":"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 Simple paths","cells":[{"id":0,"value":"md`# Exploring Simple paths\n### Drawing a simple path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html`

Without d3

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"{\n var div = html`

`,\n svg = d3.select(DOM.svg(width, 200)),\n height = 200,\n heading=html`

The same with d3`;\n\n svg.attr(\"viewBox\", [0, 0, 100, 50])\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append('path')\n .attr('d', \"M 0 0 L 40 20 H 50 V 10 H 60 V 30 L 100 30\")\n .attr('fill', 'none')\n .attr('stroke-width', '4')\n .attr('stroke', 'black');\n\n svg.append('path')\n .attr('d', \"M 0 0 L 40 20 H 50 V 10 H 60 V 30 L 100 30\")\n .attr('fill', 'none')\n .attr('stroke-width', '1')\n .attr('stroke', 'pink');\n\n div.appendChild(heading);\n div.appendChild(svg.node());\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"{\n const heading=html`

With d3 again but using enter()`,\n div = html`
`,\n path = \"M 0 0 L 40 20 H 50 V 10 H 60 V 30 L 100 30\",\n svg = d3.select(DOM.svg(width, 200)),\n height = 200;\n\n const data = [{sw: 4, s:'black', path:path}, {sw: 1, s:'pink', path:path}];\n\n svg.attr(\"viewBox\", [0, 0, 100, 50])\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll('path').data(data)\n .enter().append('path')\n .attr('d', d=>d.path)\n .attr('fill', 'none')\n .attr('stroke-width', d=>d.sw)\n .attr('stroke', d=>d.s);\n\n div.appendChild(heading);\n div.appendChild(svg.node());\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"{\n const heading=html`
A small trick to add animation`,\n div = html`
`,\n path = \"M 0 0 L 40 20 H 50 V 10 H 60 V 30 L 100 30\",\n svg = d3.select(DOM.svg(width, 200)),\n height = 200;\n\n const data = [{sw: 4, s:'black', path:path, da: null}, {sw: 1, s:'pink', path:path, da:`${l[0]} ${l[1]} ${l[2]} ${l[3]}`}];\n\n svg.attr(\"viewBox\", [0, 0, 100, 50])\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll('path').data(data)\n .enter().append('path')\n .attr('d', d=>d.path)\n .attr('fill', 'none')\n .attr('stroke-width', d=>d.sw)\n .attr('stroke', d=>d.s)\n .attr('pathLength', n/2)\n //.transition().duration(5000000).ease(d3.easeLinear)\n .attr(\"stroke-dasharray\", d=> d.da );\n // .attr(\"stroke-dasharray\", '0 10 190 0' );\n\n div.appendChild(heading);\n div.appendChild(svg.node());\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"html`
Animation Speed
\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"dim = {\n let W = width, \n H = 200,\n marge = ({s:10, d:40, i:60, g:10});\n let chartW = W - marge.g - marge.d,\n chartH = H - marge.s - marge.i;\n\n // intra \n const M = 10,\n Wg = chartW/2 - M/2,\n Wd = chartW/2 - M/2;\n const intra = {Wg, Wd, M}\n\n return {W, H, marge, chartW, chartH, intra}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"md`Utils for animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"tick = {\n let i = 0;\n while(true) {\n yield Promises.tick(speed, i++);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"l = {\n return dashG(100)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"function* dashG(n) {\n let i = 0;\n while(true) {\n if (tick % (2n)){\n i = tick % (2n);\n }else{\n i = 0;\n }\n yield (i < n)? [i, n-i, 0, 0]: [0, i-n, i, 0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"md`##### Views for animation`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"viewof n = slider({\n title:\"nb ligne segments\",\n min: 0, \n max: 500, \n step: 1, \n value: 200,\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"viewof speed = slider({\n title:\"Speed\",\n min: 1, \n max: 200, \n step: 1, \n value: 50,\n description: \"The smaller the faster\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"get_data = {\n /* Génère le data */\n\n function succes(data){\n console.log(\"succes\");\n return data.map(convertir);\n }\n\n function echec(d){\n console.log(\"failure\");\n }\n\n function convertir(d){\n return { \n date: new Date(+d.year, (+d.month -1)),\n average: parseFloat(d.average)\n };\n }\n\n return d3.csv('https://gist.githubusercontent.com/maliky/4488290390bbd23e3594662454b0b06e/raw/23a479f0e6a4f04bdfc0f94b9604d806b503573e/co2_mm_mlo_df.csv').then(succes, echec);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"import {slider,checkbox, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"
${viewof n} ${viewof speed}