2d:null 2e:["$","title",null,{"children":"Visualizing a Year of GPS Data | Chris Camargo | Observable"}] 33: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()}

`; }34:[{"id":"f870726223a76c7d8336ce28ca3f6f2f5530bfe2a1919b6d31a5f9c2d03d83f8494a44023e29afc15e67478524dd02fa92fc7c72e90374fbc9eabb9fa973567c","href":"https://static.observableusercontent.com/files/f870726223a76c7d8336ce28ca3f6f2f5530bfe2a1919b6d31a5f9c2d03d83f8494a44023e29afc15e67478524dd02fa92fc7c72e90374fbc9eabb9fa973567c","name":"paths@7.json","type":"application/json","lastModified":1579043731291.712,"size":7312410}] 31:{"id":"e6dc6a47b22785ad","slug":"visualizing-a-year-of-gps-data","title":"Visualizing a Year of GPS Data","thumbnail":"97d41ec36a5ef838c57617511619495a2646a88c4ccf2e649f3b53bc6d5a5be9","access_level":"public","create_time":"$D2020-01-13T01:39:40.336Z","update_time":"$D2020-01-28T04:58:32.786Z","view_time":null,"first_public_time":"$D2020-01-15T19:12:47.067Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"48d233b7a3d2901d","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":"starter_2024"},"version":944,"publish_version":944,"role":null,"authored":false,"authors":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null}],"members":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"totalDistance = convertDistance(file.totalDistance)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"file = await FileAttachment('paths@7.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"style = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"mutable selectedPath = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"import { color, radio, slider, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3geo = require('d3-geo')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"