25:["$","title",null,{"children":"path line Saudi Arabian | Danilo Fiumi | Observable"}] 49:Tcdf,base = htl.html` `4a:T80f,// pit_svg = html` `4b:T81f,res = html` `4c:T85b,chart = { var svg = d3.select("#circuit"); var path = svg .append("path") .data([circuit]) .attr("d", d3.line()) .attr("style", "stroke:none"); var pit = svg .append("path") .data([pitlane]) .attr("d", d3.line()) .attr("style", "stroke:none"); var resume = svg .append("path") .data([resume_race]) .attr("d", d3.line()) .attr("style", "stroke:none"); var circle0 = svg .append("circle") .attr("r", 13) .style("fill", "none") .style("stroke", "black") .style("stroke-width", "3px") .attr("transform", "translate(" + circuit[0] + ")"); var circle = svg .append("circle") .attr("r", 5) .style("fill", "blue") .attr("transform", "translate(" + circuit[0] + ")"); var circle1 = svg .append("circle") .attr("r", 5) .style("fill", "red") .attr("transform", "translate(" + circuit[1] + ")"); var circle2 = svg .append("circle") .attr("r", 5) .style("fill", "green") .attr("transform", "translate(" + circuit[circuit.length - 2] + ")"); var pilota = svg .append("circle") .attr("r", 15) .style("fill", "pink") .attr("transform", "translate(" + circuit[0] + ")") .transition() .duration(10000) .ease(d3.easeLinear) .attrTween("transform", translateAlong(path.node())) .transition() .duration(10000) .ease(d3.easeLinear) .attrTween("transform", translateAlong(path.node())) .transition() .duration(10000) .ease(d3.easeLinear) .attrTween("transform", translateAlong(pit.node())) .transition() .delay(1000) .duration(10000) .ease(d3.easeLinear) .attrTween("transform", translateAlong(resume.node())) .transition() .duration(10000) .ease(d3.easeLinear) .attrTween("transform", translateAlong(path.node())); function translateAlong(path) { var l = path.getTotalLength(); return function (d, i, a) { return function (t) { var p = path.getPointAtLength((Math.round(t * 1000) / 1000) * l); return "translate(" + p.x + "," + p.y + ")"; }; }; } return svg.node(); }4d:[] 29:{"id":"6511c0d08ca86a89","slug":null,"title":"path line Saudi Arabian","thumbnail":"1cbce0bd8f20359bf0942aa8f9e2b5e5cd493ff23ee8f5760c5da06c977a095c","access_level":"public","create_time":"$D2022-05-09T17:23:59.694Z","update_time":"$D2022-05-09T18:53:44.602Z","view_time":null,"first_public_time":"$D2024-02-08T00:38:59.465Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c2083b0498b4e358","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"path line Saudi Arabian","cells":[{"id":0,"value":"# path line Saudi Arabian","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"POINT = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"start = 81","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"\n//\n\nfunction path_to_point(elem, numSamples) {\n var path = elem.querySelector(\"path\");\n var pathLength = path.getTotalLength();\n \n var step = Math.ceil(pathLength / numSamples);\n \n let points = [];\n for (let i = 0; i < numSamples; i++) { \n let point = path.getPointAtLength(i * step);\n points.push([point.x, point.y]);\n }\n return points;\n }\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function set_start(circuit_, strt, pit) {\n var pt1 = circuit_.slice(strt - pit);\n var pt2 = circuit_.slice(0, strt);\n\n pt1.push(...pt2);\n\n return pt1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"circuit = set_start(path_to_point(base, POINT).reverse(), start, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"pitlane = set_start(path_to_point(pit_svg, POINT), POINT, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"resume_race = set_start(path_to_point(res, POINT).reverse(), POINT, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"DOM.download(serialize(circuit), \"circuit\", \"Download circuit\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"DOM.download(serialize(pitlane), \"pitlane\", \"Download pitlane\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"DOM.download(serialize(resume_race), \"resume_race\", \"Download resume_race\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\n function serialize (data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"\n json2csv = require(\"json2csv\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 820","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null