I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
ride_info = {
if (ride_selector != 'overview') {
let ride_info = old_bike_rides.filter(o => o.name == ride_selector)[0];
let trkpts = decodeLine(ride_info.polyline);
return {
trkpts: trkpts,
elevation_chart: ride_info.elevation_chart,
title: ride_info.title,
comment: ride_info.comment
};
}
}
function create_gpx_path(trkpts) {
let polyline = L.polyline(trkpts, { color: 'blue' });
let start_marker = L.marker(trkpts[0], {
icon: L.divIcon({ className: 'markerIconShape startIconColor' })
});
let end_marker = L.marker(trkpts.slice(-1)[0], {
icon: L.divIcon({ className: 'markerIconShape endIconColor' })
});
let gpx_path = L.layerGroup([
polyline,
start_marker,
end_marker
]);
return gpx_path;
}
function decodeLine(encoded) {
var len = encoded.length;
var index = 0;
var array = [];
var lat = 0;
var lng = 0;
while (index < len) {
var b;
var shift = 0;
var result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
} while (b >= 0x20);
var dlat = result & 1 ? ~(result >> 1) : result >> 1;
lat += dlat;
shift = 0;
result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
} while (b >= 0x20);
var dlng = result & 1 ? ~(result >> 1) : result >> 1;
lng += dlng;
array.push([lat * 1e-5, lng * 1e-5]);
}
return array;
}
markerR = L.icon({
iconUrl: await FileAttachment("markerR.png").url(),
iconSize: [20, 34],
iconAnchor: [20, 34],
})
markerM = L.icon({
iconUrl: await FileAttachment("markerM.png").url(),
iconSize: [20, 34],
iconAnchor: [20, 34]
})
old_bike_rides = FileAttachment("old_polylines@3.json").json()
style = html`
<style>
.markerIconShape {
border: 1px solid black;
height: 22px;
width: 22px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
.startIconColor {
background-color:#0f0;
}
.wptIconColor {
background-color:#ff0;
}
.endIconColor {
background-color:#f00;
}
.link {
color: blue;
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
</style>
`
import { mb_token } from "@mcmcclur/mapbox-token"
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(
(L._style = html`<link href=${href} rel=stylesheet>`)
);
}
return L;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
