31:Td0a,track = "m 1574.378,978.28591 c -1.7606,-0.0236 -3.5307,-0.024 -5.282,-0.0348 -58.0621,-0.35734 -301.7392,2.71789 -410.5456,0.72975 -19.403,-0.35896 -32.0445,1.73042 -41.2054,5.37396 -9.1608,3.64354 -14.6044,8.95236 -18.8999,13.63797 -4.2955,4.68541 -7.4844,8.54231 -13.2211,11.49411 -5.7367,2.952 -14.3963,5.1731 -29.664,5.0924 -20.6441,-0.1153 -30.9476,-2.6824 -37.5523,-6.0093 -6.6049,-3.3269 -10.2295,-7.9651 -17.401,-13.27118 -7.17151,-5.3059 -17.45687,-10.49502 -36.26359,-14.01145 -18.80671,-3.51643 -46.31487,-5.54508 -89.00122,-4.88575 -19.81342,0.30602 -39.88566,0.57244 -59.8662,2.76293 -17.75387,1.94635 -36.42689,3.85698 -53.97353,9.81459 -22.64037,7.68739 -44.68743,18.52276 -65.17112,30.64216 -16.10388,9.5281 -32.71483,20.6011 -45.49001,34.9973 -16.24891,18.3104 -30.13981,40.0042 -40.70956,62.0591 -9.55031,19.9276 -15.55743,41.9987 -19.45665,63.4828 -3.62054,19.9488 -5.2571,41.1265 -3.2154,61.4713 2.11948,21.1198 8.34367,42.1334 15.53285,61.7712 6.57324,17.9553 15.00056,36.0888 26.11914,51.9321 11.47227,16.3473 25.11742,32.9378 41.922,44.8145 27.6532,19.5445 58.88462,35.1605 89.99936,48.6419 110.61539,47.9268 222.5622,102.8793 339.17813,135.5116 40.6797,11.3831 69.8689,17.5285 111.6787,14.5653 15.0819,-1.0689 34.387,-0.2689 50.4422,-2.1483 22.3496,-2.6159 44.6839,-7.439 66.2884,-13.6098 27.5543,-7.8704 53.8076,-19.1269 80.3351,-28.21 12.5846,-4.3089 37.6462,-15.2668 60.4331,-32.4766 22.7867,-17.2099 43.59,-40.9376 45.1749,-70.8594 0.5938,-11.2079 -5.2794,-20.7691 -13.7884,-28.125 -8.5091,-7.3559 -19.7764,-13.009 -31.6455,-17.5252 -23.7381,-9.0323 -49.8429,-13.4007 -61.1974,-14.4621 -12.5925,-1.1769 -21.362,-6.5661 -31.457,-12.4253 -10.0951,-5.8591 -21.5375,-12.0909 -37.7966,-12.6734 -44.0753,-1.5635 -88.8247,1.7302 -120.9466,-1.0993 -16.0609,-1.4149 -28.8491,-4.5012 -36.4964,-9.5785 -7.6475,-5.0771 -10.9428,-11.3358 -9.3773,-23.1412 0.4689,-3.5353 2.8842,-6.7573 8.4969,-10.0462 5.6129,-3.2889 14.1347,-6.1674 24.8375,-8.4294 21.406,-4.5241 51.4663,-6.6996 85.645,-7.4809 68.357,-1.5623 153.3177,2.2324 221.8326,1.8669 5.7568,-0.036 10.4426,-3.2294 16.974,-7.7143 6.5315,-4.4849 14.304,-10.6624 23.0372,-17.9448 17.4667,-14.5648 38.7152,-33.4996 60.3613,-51.359 21.6462,-17.8594 43.7484,-34.6642 62.358,-44.7772 9.3048,-5.0564 17.7237,-8.4042 24.4892,-9.532 6.7654,-1.1276 11.4567,-0.1946 14.9385,2.7081 7.1545,5.9643 9.815,11.905 9.8898,18.7774 0.075,6.8725 -2.8545,15.0088 -8.4612,23.9888 -11.2137,17.9597 -32.7986,38.7276 -56.8466,59.7907 -24.0482,21.0631 -50.5254,42.5457 -71.7385,62.8669 -21.2129,20.3211 -37.5991,39.1024 -40.2854,57.4742 -2.1114,14.4418 4.615,26.3043 15.4271,34.0105 10.8123,7.7063 25.5209,12.1306 41.3162,14.4783 31.5908,4.6956 67.2045,1.3109 85.5847,-7.576 19.1635,-9.2659 38.8987,-19.2257 55.9984,-32.6471 17.9529,-14.0913 33.8473,-31.4251 47.9558,-48.9727 8.9735,-11.161 14.9095,-24.2434 20.7054,-36.4446 7.3978,-15.5733 15.1275,-31.7309 19.8811,-48.8119 4.1019,-14.7392 5.7705,-30.284 6.261,-45.3299 0.6199,-19.0072 0.677,-38.8462 -2.8718,-57.962 -3.3285,-17.9296 -9.9722,-35.4699 -17.5584,-51.7549 -8.2397,-17.6882 -17.9791,-35.5797 -30.3289,-51.0657 -12.0807,-15.1483 -26.6314,-29.3969 -42.7471,-40.4583 -20.0687,-13.7748 -42.5449,-25.5566 -65.5073,-33.8852 -22.6074,-8.19975 -46.7757,-11.59464 -69.8984,-15.29903 -12.3881,-1.98463 -24.9018,-2.55383 -37.2262,-2.71908 z"32:[] 2f:{"title":"Daytona 24h Animated Race Graphic","cells":[{"id":58,"value":"md`# Daytona 24h Animated Race Graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof rotate = checkbox({\n options: [\"Show Isometric\"],\n value: \"Show Isometric\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`## Lap board (lap ${lapNumber})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`Classes: ${classes.map((d, i) => ` - ${d}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"html`${\n drivers.sort((a, b) => a.offset[lapNumber] - b.offset[lapNumber])\n .filter(d => !isNaN(d.offset[lapNumber]))\n .map((d, i) => {\n var deficit = d.offset[lapNumber] - drivers[0].offset[lapNumber];\n var time = (deficit < 90) ? \"-\" + d3.timeFormat('%M:%S')(new Date(0).setSeconds(deficit)) : (deficit / 90).toFixed(0) + \" laps\";\n return `\n ${i + 1}. No.${d.no} \n ${time}`})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"viewof lapSlider = slider({\n min: 0, \n max: 593, \n step: 1, \n value: lapNumber, \n title: \"Lap Number\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`Mock up of a multi-class racing graphic using the 2019 Daytona 24 hour race data.\nNotes - lap board is approximated when the car is > 90s behind the leader.\n* Data: http://results.imsa.com/\n* Circuit SVG: [Wikimedia](https://en.wikipedia.org/wiki/Daytona_International_Speedway#/media/File:Daytona_International_Speedway_-_Road_Course.svg)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"classes = [\"DPi\", \"LMP2\", \"GTLM\", \"GTD\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"color = [\"#000\", \"#999\", \"#ddd\", \"#fff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"document.querySelector('svg').setAttribute('class', `${rotate === 'Show Isometric' ? 'rotate': ''}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"drivers = Object.entries(rawLaps.data.reduce((prev, d) => {\n const id = d.cl + \"_\" + d.dn;\n prev[id] = prev[id] || {}\n prev[id].no = d.dn;\n prev[id].cl = d.cl;\n prev[id].name = d.dn + ' ' + d.cl;\n prev[id].laps = prev[id].laps || [];\n const lap = d.lt.split(':')\n prev[id].laps[d.ln - 1] = (+lap[0] * 60) + +lap[1]\n \n return prev;\n}, {})).map(d => d[1]).map(d => {\n var offset = [];\n\n d.laps.map((e, i) => {\n offset[i] = (i > 0) ? offset[i - 1] + e : e;\n })\n\n return {\n ...d,\n offset\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"rawLaps = d3.json('https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/racing/daytona_2.json?v=999')","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"graphic = { \n //\n const path = d3.select('.DPi path');\n \n d3.select('g')\n .selectAll('.dot')\n .data(drivers)\n .enter()\n .append('circle')\n .attr('class', d => `dot ${d.name}`)\n .attr('cx', 57.5)\n .attr('cy', 55)\n .attr('r', 10)\n\n const dots = Array.from(document.querySelectorAll('.dot'));\n \n dots.map((d, i) => {\n animate(d3.select(d), 0, i);\n });\n \n function animate(el, i, idx) {\n el\n .transition()\n .ease(d3.easeLinear)\n .duration(d => {\n return d.laps[i] * 250\n })\n .tween(\"pathTween\", (d) => {\n return pathTween(path)\n })\n .on('end', (d) => {\n if (i + 1 < d.laps.length) {\n if(idx === 0) {\n console.log(\"new lap\", i + 1)\n mutable lapNumber = i + 1;\n }\n animate(el, i + 1, idx);\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"mutable lapNumber = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"pathTween = (path) => {\n var length = path.node().getTotalLength(); // Get the length of the path\n var r = d3.interpolate(0, length); //Set up interpolation from 0 to the path length\n return function(t){\n var point = path.node().getPointAtLength(r(t)); // Get the next point along the path\n d3.select(this) // Select the circle\n .attr(\"cx\", point.x) // Set the cx\n .attr(\"cy\", point.y) // Set the cy\n }\n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"d3-scale-chromatic\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}