Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
colorScheme = d3.interpolateMagma
Plot.plot({
x: { axis: false },
y: { axis: false },
color: {interpolate: colorScheme},
marks: [
Plot.dot(coordinates, {x: d => d[0], y: d => d[1], fill: d => d[2]})
]
})
mapboxgl = {
const gl = await require("mapbox-gl@v2.13.0");
if (!gl.accessToken) {
gl.accessToken = "pk.eyJ1IjoiZGlzc3RvY2tob2xtIiwiYSI6ImNsYXB4ZDBsODFjeGYzcHF2bDd5dmtuajQifQ.aqSUxGoF8DkpeJyEx3diOg";
const href = await require.resolve("mapbox-gl@v2.13.0/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
fieldStudyMap = {
// Create space for a map
let container = html`<div style='height:800px;' />`;
yield container;
// Creates map from Mapbox
let map = new mapboxgl.Map({
container,
// Coordinates taken from Google Maps of the Gömmaren area
center: [17.937, 59.256],
// Starting zoom
zoom: 13.5,
// Choose from different Mapbox styles like light, dark, or I chose outdoors version 12
style: "mapbox://styles/mapbox/outdoors-v12"
});
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
// Took the gpx file and changed it to a csv to delete all data except coordinates and elevation, then converted to a geojson to get the coordinates
'coordinates': coordinates
}
}
]
};
map.on('load', () => {
// 'line-gradient' can only be used with GeoJSON sources
// and the source must have the 'lineMetrics' option set to true
map.addSource('line', {
type: 'geojson',
lineMetrics: true,
data: geojson
});
// following this tutorial: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/
// the layer must be of type 'line'
map.addLayer({
type: 'line',
source: 'line',
id: 'line',
paint: {
'line-color': 'red',
'line-width': 5,
// 'line-gradient' must be specified using an expression
// with the special 'line-progress' property
'line-gradient': [
'interpolate',
['linear'],
['line-progress']
].concat(elevations)
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
});
});
}
elevations = mapboxElevations(coordinates, colorScheme)
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.
