31:T4cf,{ const grid = d3 .create("div") .attr('class', 'grid') .style('grid-template-columns', `repeat(${pathsPerRow}, 1fr)`); grid .selectAll("svg") .data(paths) .join('svg') .attr('class', 'svg') .attr('viewBox', `0 0 ${width} ${height}`) .on("mouseenter", (_, i) => { const { activityType, date, distance, place } = file.paths[i]; const dist = convertDistance(distance); mutable selectedPath = `${dist} ${distanceUnit} ${activityType} on ${date} in ${place}`; }) .on("mouseleave", () => { mutable selectedPath = ''; }) .append('path') .attr('class', 'path') .attr('d', d => d); return html`

${grid.node()}

`; }32:[{"id":"f870726223a76c7d8336ce28ca3f6f2f5530bfe2a1919b6d31a5f9c2d03d83f8494a44023e29afc15e67478524dd02fa92fc7c72e90374fbc9eabb9fa973567c","href":"https://static.observableusercontent.com/files/f870726223a76c7d8336ce28ca3f6f2f5530bfe2a1919b6d31a5f9c2d03d83f8494a44023e29afc15e67478524dd02fa92fc7c72e90374fbc9eabb9fa973567c","name":"paths@7.json","type":"application/json","lastModified":1579043731291.712,"size":7312410}] 2f:{"title":"Visualizing a Year of GPS Data","cells":[{"id":0,"value":"md`\n# Visualizing a Year of GPS Data\nThis is a visualization of my exported Strava GPS data from 2019. The data was cleaned and transformed using a custom script that I published on Github. The visualization and layout is based on a now defunct site called Made with Sisu. Try playing with some of the parameters below the visualization to see what it can do. This notebook is best viewed on a large high-resolution screen.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"md`${\n selectedPath === ''\n ? 'You can hover over each path to see a detailed description of that activity.'\n : selectedPath\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof year = text({\n description: \"Year of the activities.\",\n title: \"Year\",\n value: \"2019\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof athlete = text({\n description: \"Full name of the athlete.\",\n title: \"Athlete\",\n value: \"Chris Camargo\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"viewof distanceUnit = radio({\n title: 'Diatance',\n description: 'Unit of distance.',\n options: [\n { label: 'Miles', value: 'mi' },\n { label: 'Kilometers', value: 'km' }\n ],\n value: 'mi'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof pathColor = color({\n value: \"#FC6100\",\n title: \"Path Color\",\n description: \"Color of each path. Defaults to 'Strava Orange'.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof pathHoverColor = color({\n value: \"#fc3838\",\n title: \"Path Hover Color\",\n description: \"Hover color of each path.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof pathStrokeWidth = slider({\n min: 1,\n max: 35,\n step: 1,\n value: 28,\n title: \"Path Stroke Width\",\n description: \"Stroke width of each path. Integers from 1 to 35.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"viewof pathsPerRow = slider({\n min: 5,\n max: 15,\n step: 1,\n value: 10,\n title: \"Paths Per Row\",\n description: \"Number of paths per row. Integers from 5 to 15.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"paths = {\n const { paths } = file;\n return paths.map(path => {\n const geoToScreen = d3geo\n .geoMercator()\n .fitExtent([[0, 0], [width, height]], path);\n const {\n features: [{ geometry, properties }]\n } = path;\n const coordinates = geometry.coordinates.map(geoToScreen);\n return `M ${coordinates.join(' L ')}`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"totalDistance = convertDistance(file.totalDistance)","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"file = await FileAttachment('paths@7.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"function convertDistance(d) {\n if (distanceUnit === 'mi') {\n return (d / 1.609344).toFixed(2);\n }\n return d.toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"style = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"mutable selectedPath = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"import { color, radio, slider, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3geo = require('d3-geo')","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}