30:[] 2e:{"title":"SVG Visualization of a GPX file","cells":[{"id":0,"value":"md`\n# SVG Visualization of a GPX file\n\nThis notebook shows how to transform a [GPX](https://www.topografix.com/gpx.asp) file into a SVG drawing. Here's a walk I recorded with Strava on an iPhone:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = await fetch('https://gist.githubusercontent.com/danburzo/fcc6275b2eb3722ebea6cbf3b30b58a4/raw/f29c28f5c2be750679eee00c73961bd739976608/2.gpx').then(data => data.text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md `We can use the [@mapbox/togeojson](https://npmjs.com/package/@mapbox/togeojson) package to convert the GPX file to GeoJSON. \n\n_Note: I have used Tom MacWright's [Module require debugger](https://beta.observablehq.com/@tmcw/module-require-debugger) to load the package into Observable — thanks to Grant Custer for reminding me about it!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"togeojson = require('@mapbox/togeojson@0.16.0/togeojson.js').catch(() => window.toGeoJSON)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"json_data = togeojson.gpx((new DOMParser()).parseFromString(data, 'text/xml'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"md `\nWe then need to transform the geographical coordinates into screen coordinates. We're going to use the Mercator projection from [d3-geo](https://npmjs.com/package/d3-geo) to draw a ${width} × ${height} SVG map.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"viewof padding = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"d3geo = require('d3-geo')","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"geoToScreen = d3geo.geoMercator().fitExtent([[padding, padding], [width - padding * 2, height - padding * 2]], json_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`With our \\`geoToScreen\\` transform defined, we map the GeoJSON coordinates to screen coordinates:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"coordinates = json_data.features[0].geometry.coordinates.map(geoToScreen)","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`Given a path \\`d\\`, the \\`draw_svg\\` function creates the SVG map. Here's how it looks when we simply concatenate the point coordinates into a SVG path string.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"draw_svg = (d = '') => html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"svg_basic = draw_svg('M ' + coordinates.join(' L '))","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`Notice the sharp corners on the line. If we want to smooth it out, we can use a Catmull Rom curve, supplied by the [d3-shape](https://npmjs.com/package/d3-shape) package:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"d3shape = require('d3-shape')","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"curve_func = d3shape.line()\n .x(d => d[0])\n .y(d => d[1])\n .curve(d3shape.curveCatmullRom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"svg = draw_svg(curve_func(coordinates))","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"DOM.download(\n serialize(svg), 'map.svg', 'Download SVG'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`Alternatively, let's draw the segments in a gradient, based on the timestamps for each individual point in the GPX file. First, we extract the timestamps from the GeoJSON, and compute the start and end time of the walk.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"timestamps = json_data.features[0].properties.coordTimes.map(t => new Date(t).getTime())","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"time_extent = ({\n start: Math.min(...timestamps), \n end: Math.max(...timestamps)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`Afterwards, using a linear scale — provided by the [d3-scale](https://npmjs.com/package/d3-scale) package — we map each timestamp to the \\`[0,1]\\` interval:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3scale = require('d3-scale')","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"color_t = d3scale.scaleLinear()\n .domain([time_extent.start, time_extent.end])\n .range([0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`We create a color interpolator between ${start_color} and ${end_color} in the LCh color space using [culori](https://npmjs.com/package/culori):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof start_color = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof end_color = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"culori = require('culori')","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"interpolate = culori.interpolate([start_color, end_color], 'lch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"md`...and then map the timestamps to segment colors:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"segment_colors = coordinates.map(\n (pt, idx) => culori.formatHex(\n interpolate(\n color_t(timestamps[idx])\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"md`In the map below, I've also added the start and end times of the walk. The dates are formatted with [dayjs](https://npmjs.com/package/dayjs):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"dayjs = require('dayjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"colored_svg = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"DOM.download(\n serialize(colored_svg), 'map (colored).svg', 'Download SVG'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`#### Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}