31:T691,July29th = { const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("background-color","#fff") .style("font", "10px sans-serif"); const roads = svg.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "none") .attr("d", (d) => { return path(d.data.roads) }) .style("stroke-width", .25) .style("stroke", "000"); const lands = svg.selectAll(".tile") .data(tiles) .enter().append("g") .selectAll(".building") .data(d => d.data.landuse.features) .enter().append("path") .attr("class", "building") .attr("d", (d) => { return path(d) }) .style("fill", "green") .style("stroke", "darkgreen") .style("fill-opacity", .05); const bubbles = svg.selectAll(".bubble") .data(July292018) .enter().append("circle") .attr("class", "bubble") .attr("transform", (d) => { let proj = projection([d.lon, d.lat]); return `translate(${proj[0]},${proj[1]})` }) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("stroke", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("fill-opacity", .15) .attr("r", d => speedScale(d.speed)) return svg.node() }32:T693,April23rd = { const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("background-color","#fff") .style("font", "10px sans-serif"); const roads = svg.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "none") .attr("d", (d) => { return path(d.data.roads) }) .style("stroke-width", .25) .style("stroke", "000"); const lands = svg.selectAll(".tile") .data(tiles) .enter().append("g") .selectAll(".building") .data(d => d.data.landuse.features) .enter().append("path") .attr("class", "building") .attr("d", (d) => { return path(d) }) .style("fill", "green") .style("stroke", "darkgreen") .style("fill-opacity", .05); const bubbles = svg.selectAll(".bubble") .data(April232016) .enter().append("circle") .attr("class", "bubble") .attr("transform", (d) => { let proj = projection([d.lon, d.lat]); return `translate(${proj[0]},${proj[1]})` }) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("stroke", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("fill-opacity", .15) .attr("r", d => speedScale(d.speed)) return svg.node() }33:T673,ManitousRevenge = { const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("background-color","#fff") .style("font", "10px sans-serif"); const roads = svg.selectAll(".tile") .data(Mtiles) .enter().append("path") .style("fill", "none") .attr("d", (d) => { return Mpath(d.data.roads) }) .style("stroke-width", .2) .style("stroke", "000"); const lands = svg.selectAll(".tile") .data(Mtiles) .enter().append("g") .selectAll(".building") .data(d => d.data.landuse.features) .enter().append("path") .attr("class", "building") .attr("d", (d) => { return Mpath(d) }) .style("fill", "green") .style("fill-opacity", .2); const bubbles = svg.selectAll(".bubble") .data(Manitou) .enter().append("circle") .attr("class", "bubble") .attr("transform", (d) => { let proj = Mprojection([d.lon, d.lat]); return `translate(${proj[0]},${proj[1]})` }) .style("fill", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("stroke", d => { if(d.hr > lactateThreshold) { return heartRed(d.hr) } else if(d.hr > aerobicThreshold) { return heartGreen(d.hr) } else { return heartBlue(d.hr) } }) .style("fill-opacity", .15) .attr("r", d => speedScale(d.speed)) return svg.node() }34:T609,loadChartData = (url) => { return new Promise((resolve, reject) => { d3.xml(url).then(data => { const results = []; data.querySelectorAll('trkpt').forEach(point => { results.push({ lat: point.getAttribute('lat'), lon: point.getAttribute('lon'), ele: +point.querySelector('ele').textContent * 3.28084, hr: +point.querySelector('hr').textContent, cad: +point.querySelector('cad').textContent, time: new Date(point.querySelector('time').textContent) }); }); return results; }).then(results => { const points = results.map((point, idx, results) => { let speed = 0; let distance = 0; if (idx > 0) { const prev = results[idx - 1]; try { distance = turf.distance( turf.point([+prev.lon, +prev.lat]), turf.point([+point.lon, +point.lat]), { units: 'miles' }); const elapsedTime = (point.time - prev.time)/1000/60/60; speed = distance/elapsedTime; point.distance = distance; point.speed = speed; } catch(error) { point.distance = distance; point.speed = speed; console.log(error); } } return {'cad': point.cad, 'distance': point.distance, 'ele': point.ele, 'hr': point.hr, 'lat': point.lat, 'lon': point.lon, 'speed': point.speed, 'time': point.time}; }) resolve(accumulateDistances(points)); }); }); }35:T60d,heartRateScale = () => { const width = 500, height = 20 const svg = d3.select(createSVG(width, height)); const n = [80, 100, 125, 135, 145, 150, 155, 160, 165], boxwidth = (width - 100)/n.length; svg.append("text") .attr("dy", 14) .style("font", "12px sans-serif") .text("Heart Rate Scale:") const boxes = svg.selectAll(".box") .data(n) .enter().append("g") .attr("class","box") .attr("transform", (d,i) => `translate(${boxwidth*i + 100},0)`); const heartRed = d3.scaleSequential(d3.interpolateReds) .domain([80, 180]); const heartBlue = d3.scaleSequential(d3.interpolateBlues) .domain([80, 180]); const heartGreen = d3.scaleSequential(d3.interpolateGreens) .domain([80, 180]); boxes.append("rect") .attr("width", boxwidth) .attr("height", height) .style("stroke", "#000") .style("fill", d => { if(d > lactateThreshold) { return heartRed(d) } else if(d > aerobicThreshold) { return heartGreen(d) } else { return heartBlue(d) } }); boxes.append("text") .attr("dx", 12) .attr("dy", 14) .style("fill", "#000") .style("font", "12px sans-serif") .text(d => d) .style("fill", d => { if(d > lactateThreshold) { return "#fff" } else if(d > aerobicThreshold) { return "#fff" } else { return "#000" } }); return svg.node(); }36:[] 2f:{"title":"Visualizing Running - Part V","cells":[{"id":0,"value":"md`# Visualizing Running - Part V`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`I love to run. I train for long distance races, and enjoy using data to track my training performance. I use a Garmin Fenix 3 watch with a heart rate monitor strap, so I can download that data and make custom visualizations. I enjoy trying to find new ways of looking at data, so I'm starting a series of running visualization prototypes. This is __Part V__. Here is [Part I](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i), [Part II](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii), [Part III](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii), and [Part IV](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iv).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"md`## 5th Visualization Proposal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2457,"value":"md`Reusing some [earlier work](https://beta.observablehq.com/@pstuffa/nyc-building-permits-api-prospect-heights/2) I did using Nextzen tiles, I wanted to create maps with the GPX data. I find most map visualizations of runs to be pretty uninteresting. Unless you're really curious which streets one ran down, visualizing your data as a map doesn't really tell you much. It can explain some trends in the data, like why your heart rate might go down when you're stuck at a traffic light, but most trends are easier to see in line charts, bar charts, etc. I generally shy away from them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2763,"value":"md`Garmin provides some map visualizations, which are only a bit useful in that they animated with a line chart simultaneously. This way you can see your key metrics, like heart rate, and how they might be explained by the genography. But I always thought there was a lot more they could do with the data. In this visualization proposal, I am trying to use additional metrics with a map animation that tell you more about the trends in the data.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2780,"value":"md`In the GPX data, I have (basically) second by second data. Instead of just animating a line, I can plot each second as a different object, which allows much more control. Here when I animate the data, the speed of the animation and the size of the circle are based on the running speed at that moment, and the color of the circle is my heart rate. I think it does a great job of showing trends while the run plays out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"md`### July 23rd, 2018 - 11 Miles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2745,"value":"md`A recent training run in Prospect Park from my apartment. Starts off slow, then picks up when I get to the park. Then you'll see I start to speed up when I get to the bottom of the first loop, then after I turn around, I slow down a lot and run at a much better heart rate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2443,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n button.addEventListener('click', restartFirst)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2728,"value":"md`### April 23rd, 2016 - 30 Miles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2735,"value":"md`An older training run for Manitous Revenge. I was able to sustain low heart rate the whole time, while going at a decent pace of a 10min mile. I would say this was a really solid run, albeit a bit boring.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2748,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n button.addEventListener('click', restartSecond)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2774,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2726,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2473,"value":"md`## Manitous Revenge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2764,"value":"md`A brutal 54 mile race I did in the catskills. You can see how in the 2nd half of the race, I really start slowing down, my heart rate generally much lower.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2488,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n button.addEventListener('click', restartManitou)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"heartRateScale()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2788,"value":"md`If you enjoyed this, you should my other posts on runnings visualiations. Here is [Part I](https://beta.observablehq.com/@pstuffa/visualizing-running-part-i), [Part II](https://beta.observablehq.com/@pstuffa/visualizing-running-part-ii), [Part III](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iii), and [Part IV](https://beta.observablehq.com/@pstuffa/visualizing-running-part-iv).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`## The Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"md`The Leadville data has been somewhat aggregated so it's not too large.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2496,"value":"ManitouFirst = loadChartData(\"https://gist.githubusercontent.com/pstuffa/2016119a508bde36952b352d4fad250e/raw/37fe4850d7a125d45860ffb43a236890902ff42f/activity_1241500200.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2498,"value":"ManitouSecond = loadChartData(\"https://gist.githubusercontent.com/pstuffa/2009b1751ab3b7a582ce7e36910c100a/raw/55f1771a0cf5cb2dbe5640254e879c7778d23762/activity_1241539713.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2494,"value":"Manitou = {\n \n let cumulative = ManitouFirst[ManitouFirst.length-1].accumulatedDistance;\n let cumulativeTime = ManitouFirst[ManitouFirst.length-1].accumulatedTime;\n \n ManitouSecond.forEach((d,i) => {\n d.accumulatedDistance = cumulative;\n cumulative += d.distance;\n d.accumulatedTime = (cumulativeTime + d.accumulatedTime);\n });\n \n const merged = ManitouFirst.concat(ManitouSecond);\n \n \n return merged\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"nestedLeadville = d3.nest()\n .key(d => d.lookup)\n .entries(LeadvilleTraining)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"LeadvilleTraining = d3.csv(\"https://gist.githubusercontent.com/pstuffa/7bc57cc0dde8ad77ee90effbb03f2b2a/raw/47904b75833aca0be2e0b931caf1436e4d6ac504/merged.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2724,"value":"April232016 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/bbf1e6233cc5035c75c6eeb469e35c10/raw/aa19c52ef628e2b434481e1afbdf5ec85f6b42e1/activity_1139277314.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"July222018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/4ab33e7db97261e72f06bf3e7dfc7aae/raw/099305a61ffc1b19b719bf5a36755f2c001f5f72/activity_2872096370.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"July232018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/93bc9a287bb5a30a54ed5bbd66e48cb9/raw/30ea504fa112379e9cd2bbc166bd77183e212f78/activity_2874405826.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"July252018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/82a93053a89045f6e0b55d49af5f61e2/raw/eeebcd17257cddb1016f1cb7f4fb7dc333d5b91f/activity_2879764928.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"July262018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/8a54c777195bfe94a5c6d489040155d5/raw/a3457eceb245d671dedf5906b26cf3e1868def39/2018-07-26.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"July292018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/b1fb0af89215ec3f1cd03f4704bfb1ae/raw/6e5ec1250f61ae241b5058dc053ed45e85f14362/activity_2891084953.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"July312018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/f54fb8343b0e37a31ce71d7c14f30c45/raw/9c8ab1fa0b91b340dad2666400f447b6a52d6c46/activity_2895135776.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"August022018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/838c7b9b2e932e35f670c97174ff7425/raw/5c6beeccf43e185128f13a006d453ec6f9dcbb56/activity_2901499446.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"August042018 = loadChartData(\"https://gist.githubusercontent.com/pstuffa/01cbc99a1545da74ae0201fb65e94a12/raw/baec40c9a611c9d9c6156fc1c512e47e70015a8a/activity_2905566834.gpx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2359,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof lactateThreshold = slider({\n min: 80, \n max: 180, \n step: 1, \n value: 155, \n title: \"Lactate Threshold\", \n description: \"Minimum heart rate to be to hit your lactate threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof aerobicThreshold = slider({\n min: 80, \n max: 180, \n step: 1, \n value: 140, \n title: \"Aerobic Threshold\", \n description: \"Minimum heart rate to be to hit your aerobic threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"restartManitou = () => {\n \n const svg = d3.select(ManitousRevenge)\n \n svg.selectAll(\".bubble\")\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n .transition()\n .duration(500)\n .delay((d,i) => (i * 5) - d.speed)\n .style(\"stroke-opacity\", 1)\n .style(\"fill-opacity\", .25)\n .transition()\n .delay((d,i) => i * 5)\n .duration(1000)\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2743,"value":"restartSecond = () => {\n \n const svg = d3.select(April23rd)\n \n svg.selectAll(\".bubble\")\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n .transition()\n .duration(500)\n .delay((d,i) => (i * 30) - d.speed)\n .style(\"stroke-opacity\", 1)\n .style(\"fill-opacity\", .25)\n .transition()\n .delay((d,i) => i * 3)\n .duration(1000)\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"restartFirst = () => {\n \n const svg = d3.select(July29th)\n \n svg.selectAll(\".bubble\")\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n .transition()\n .duration(500)\n .delay((d,i) => (i * 30) - d.speed)\n .style(\"stroke-opacity\", 1)\n .style(\"fill-opacity\", .25)\n .transition()\n .delay((d,i) => i * 5)\n .duration(1000)\n .style(\"fill-opacity\", 0)\n .style(\"stroke-opacity\", 0)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2439,"value":"speedScale = d3.scaleLinear()\n .domain([0, 20])\n .range([1, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2426,"value":"heartRed = d3.scaleSequential(d3.interpolateReds)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2428,"value":"heartBlue = d3.scaleSequential(d3.interpolateBlues)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"heartGreen = d3.scaleSequential(d3.interpolateGreens)\n .domain([80, 180])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"Mpath = d3.geoPath(Mprojection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2533,"value":"Mprojection = d3.geoMercator()\n .center([-74.190767, 42.175174])\n .scale((1 << 19) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2504,"value":"Mtile = d3.tile()\n .size([width, height])\n .scale(Mprojection.scale() * 2 * Math.PI)\n .translate(Mprojection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2538,"value":"Mtiles = Promise.all(Mtile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=qrH6iBWjQRyZAVKyDXpR7Q`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2374,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2357,"value":"projection = d3.geoMercator()\n .center([-73.9733691, 40.6676646])\n .scale((1 << 22) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n // .rotate([106, 39])\n .precision(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2346,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=qrH6iBWjQRyZAVKyDXpR7Q`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"calculateIQR = (data, field) => {\n \n const min = d3.min(data, d => +d[field]);\n const max = d3.max(data, d => +d[field]);\n const median = d3.median(data, d => +d[field]);\n const firstQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .25);\n const thirdQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .75);\n \n return {min: min, max: max, median: median, firstQuartile: firstQuartile, thirdQuartile: thirdQuartile}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"rollingAverage = (data, nPoints) => {\n \n data.forEach((row,index) => {\n row.rolSpeed = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.speed);\n row.rolCad = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.cad);\n row.rolHR = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.hr);\n row.rolEl = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.ele);\n })\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"accumulateDistances = (points) => {\n points[0].accumulatedDistance = 0;\n points[0].accumulatedTime = 0;\n let idx = 1;\n while (idx < points.length) {\n points[idx].accumulatedDistance = points[idx].distance + points[idx - 1].accumulatedDistance;\n points[idx].accumulatedTime = points[idx - 1].accumulatedTime + Math.abs(points[idx].time.getTime() - points[idx - 1].time.getTime());\n idx += 1;\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@1\", \"d3-time-format@1\", \"d3-array@1\", \"d3-format@1\", \"d3-transition@1\", \"d3-ease@1\", \"d3-collection@1\", \"d3-shape@1\", \"d3-scale-chromatic@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { createSVG, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import {slider, radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"sine = (radians) => { return Math.sin(radians) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"cosine = (radians) => { return Math.cos(radians) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}