Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div style="height:600px;"></div>
map = container.value = new mapboxgl.Map({
container,
center: [-78.476678, 38.029306], // Charlottesville downtown
zoom: 12,
style: "mapbox://styles/mapbox/streets-v11",
//scrollZoom: false
});
map.on('load', () => {
map.addSource('neighborhoods', {
'type': 'geojson',
'data': 'https://opendata.arcgis.com/datasets/c371ad0b81024822bad1147ff6bb24c4_51.geojson'
});
map.addLayer({
'id': 'neighborhoods',
'type': 'line',
'source': 'neighborhoods',
'layout': {},
'paint': {
'line-color': '#0000ff',
'line-width': 2
}
});
})
uscounties = FileAttachment("gz_2010_us_counties_00_20m.json").json()
map.on('load', () => {
map.addSource('uscounties', {
'type': 'geojson',
'data': uscounties
});
map.addLayer({
'id': 'uscounties',
'type': 'line',
'source': 'uscounties',
'layout': {},
'paint': {
'line-color': '#bbbbbb',
'line-width': 2
}
});
})
mapboxgl = {
const gl = await require("mapbox-gl@2.2.0");
if (!gl.accessToken) {
// https://www.mapbox.com/help/how-access-tokens-work/
// you will need to get your own access token to put here in place of mine.
gl.accessToken = "pk.eyJ1IjoiZW1maWVsZCIsImEiOiJja25lb3hwbWEwMjRwMnBud29zcXQ4MG9nIn0.Ou1f9fNGHHcNiquxzXdz_g";
const href = await require.resolve("mapbox-gl@2.2.0/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
