start = 75
base = htl.html`<svg id='circuit' viewBox="-20 -40 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M97.978 191.5C97.178 213.5 115.978 216 125.478 214.5H492H532.478H670.478C705.278 214.5 719.478 184.5 719.978 175.5C720.478 166.5 721.978 153.7 721.978 136.5C721.978 119.3 717.978 121.5 712.978 120.5C707.978 119.5 702.978 120 699.978 117C696.978 114 699.839 90.3516 700.478 68C700.978 50.5 704.478 46.5 689.478 40C681.478 37.5 668.313 32.7739 656.978 29C641.666 23.9027 627.107 17.7238 616.478 16C608.581 14.7194 589.978 15 581.978 39C577.144 53.5 585.978 67.5 599.478 74.5C613.978 79.5 614.202 77.9087 623.978 83C647.978 95.5 653.263 116.625 653.478 117C653.692 117.375 658.478 138 652.978 146C648.578 152.4 640.978 155 633.978 154C626.978 153 441.378 40.4 416.978 26C414.978 24.8197 405.378 18.1 396.978 14.5C386.478 10 372.478 11.5 363.978 14.5C357.178 16.9 350.811 23.1667 348.478 26C333.978 42.5 301.478 90.5 297.978 96.5C291.978 102 278.978 125 281.978 146C284.378 162.8 269.644 171.5 260.978 172C247.978 172 210.978 169 194.978 169C178.978 169 120.978 136.5 94.9775 115C74.1775 97.8 87.4775 80.5 101.478 78H194.978C236.978 78 249.425 46.5 251.478 33.5C255.03 11 233.144 2.66667 222.978 2H87.4775C62.1443 4.66667 9.77772 21.4 2.97772 67C-5.52228 124 43.4777 135.5 69.4777 146C95.4777 156.5 98.978 164 97.978 191.5Z" stroke="black" stroke-width="3"/>
<path d="M486.782 215.169L486.78 226.169H488.144H488.146H501.782V215.169H486.782ZM488.146 216.544H490.191V218.606H492.237V216.544H494.282V218.606H496.328V216.544H498.373V218.606H500.419V220.669H498.373V222.731H500.419V224.794H498.373V222.731H496.328V224.794H494.282V222.731H492.237V224.794H490.191V222.731H488.146V220.669H490.191V218.606H488.146V216.544ZM490.191 220.669V222.731H492.237V220.669H490.191ZM492.237 220.669H494.282V218.606H492.237V220.669ZM494.282 220.669V222.731H496.328V220.669H494.282ZM496.328 220.669H498.373V218.606H496.328V220.669Z" fill="black"/>
<path d="M720.5 131C721.5 144.833 713.5 169 708 178.5C702.5 188 695.5 197 682.5 197C674.946 197 538.28 197 415 197C368.562 197 324.023 197 289 197L236 211.5" stroke="#BBBBBB" stroke-width="3" stroke-dasharray="6 6"/>
</svg>
`
//
pit_svg = html`
<svg viewBox="-20 -40 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M487.251 214.5H124.281C114.873 216 96.2556 213.5 97.0479 191.5C98.0382 164 94.5718 156.5 68.8238 146C43.0757 135.5 -5.44938 124 2.96824 67C9.70234 21.4 61.5614 4.66667 86.6491 2H220.836C230.904 2.66667 252.578 11 249.06 33.5C247.027 46.5 234.7 78 193.107 78C154.485 78 116.853 78 100.513 78C86.6491 80.5 73.478 97.8 94.0765 115C119.824 136.5 177.262 169 193.107 169C208.952 169 245.594 172 258.468 172C267.05 171.5 281.641 162.8 279.264 146C276.293 125 289.167 102 295.109 96.5C298.575 90.5 330.76 42.5 345.12 26C347.43 23.1667 353.735 16.9 360.469 14.5C368.887 11.5 382.751 10 393.15 14.5C401.468 18.1 410.975 24.8197 412.956 26C437.119 40.4 620.921 153 627.853 154C634.785 155 642.311 152.4 646.669 146C652.115 138 647.376 117.375 647.164 117C646.952 116.625 641.717 95.5 617.95 83C608.269 77.9087 608.047 79.5 593.687 74.5C580.318 67.5 571.57 53.5 576.357 39C584.279 15 602.702 14.7194 610.522 16C621.049 17.7238 635.467 23.9027 650.63 29C661.856 32.7739 674.892 37.5 682.815 40C697.67 46.5 694.203 50.5 693.708 68C693.076 90.3516 690.242 114 693.213 117C696.184 120 701.136 119.5 706.087 120.5C709.911 121.272 713.144 120.136 714.419 127.5C713.156 149.333 705.067 193.4 682.815 195C660.563 196.6 493.637 196.333 412.956 196.5" stroke="none" stroke-width="3"/>
</svg>
`
res = html`
<svg viewBox="-20 -40 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M502 214.5H532.478C563.978 214.5 635.678 214.5 670.478 214.5C705.278 214.5 719.478 184.5 719.978 175.5C720.478 166.5 721.978 153.7 721.978 136.5C721.978 119.3 717.978 121.5 712.978 120.5C707.978 119.5 702.978 120 699.978 117C696.978 114 699.839 90.3516 700.478 68C700.978 50.5 704.478 46.5 689.478 40C681.478 37.5 668.313 32.7739 656.978 29C641.666 23.9027 627.107 17.7238 616.478 16C608.581 14.7194 589.978 15 581.978 39C577.144 53.5 585.978 67.5 599.478 74.5C613.978 79.5 614.202 77.9087 623.978 83C647.978 95.5 653.263 116.625 653.478 117C653.692 117.375 658.478 138 652.978 146C648.578 152.4 640.978 155 633.978 154C626.978 153 441.378 40.4 416.978 26C414.978 24.8197 405.378 18.1 396.978 14.5C386.478 10 372.478 11.5 363.978 14.5C357.178 16.9 350.811 23.1667 348.478 26C333.978 42.5 301.478 90.5 297.978 96.5C291.978 102 278.978 125 281.978 146C284.378 162.8 269.644 171.5 260.978 172C247.978 172 210.978 169 194.978 169C178.978 169 120.978 136.5 94.9775 115C74.1775 97.8 87.4775 80.5 101.478 78C117.977 78 155.978 78 194.978 78C236.978 78 249.425 46.5 251.478 33.5C255.03 11 233.144 2.66667 222.978 2H87.4775C62.1443 4.66667 9.77772 21.4 2.97772 67C-5.52228 124 43.4777 135.5 69.4777 146C95.4777 156.5 98.978 164 97.978 191.5C97.178 213.5 115.978 216 125.478 214.5H228.5L288.5 197.5L413.5 196.5" stroke="none" stroke-width="3"/>
</svg>
`
function set_start(circuit_, strt, pit) {
var pt1 = circuit_.slice(strt - pit);
var pt2 = circuit_.slice(0, strt);
pt1.push(...pt2);
return pt1;
}
circuit = set_start(path_to_point(base, POINT).reverse(), start, 1)
pitlane = set_start(path_to_point(pit_svg, POINT), POINT, 0)
resume_race = set_start(path_to_point(res, POINT).reverse(), POINT, 0)
DOM.download(serialize(circuit), "circuit", "Download circuit")
DOM.download(serialize(pitlane), "pitlane", "Download pitlane")
DOM.download(serialize(resume_race), "resume_race", "Download resume_race")
function serialize (data) {
let parser = new json2csv.Parser();
let csv = parser.parse(data);
return new Blob([csv], {type: "text/csv"})
}
json2csv = require("json2csv")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
