Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div style="height:600px;">
<svg id="svgContainer"></svg>
</div>
map = {
let map = container.value = new mapboxgl.Map({
container,
center: [-78.476678, 38.029306],
zoom: 12,
style: "mapbox://styles/mapbox/streets-v11",
});
let projection = d => map.project(new mapboxgl.LngLat(d[0],d[1]));
let mapSVG = d3.select(container).select("#svgContainer")
.attr("width","100%")
.attr("height","100%")
.style("position","absolute")
.style("z-index",2)
.style("pointer-events", "none");
let dotsOnMap = () => {
mapSVG.selectAll(".dot")
.data(locations)
.join("circle")
.attr("cx", d => projection(d).x)
.attr("cy", d => projection(d).y)
.attr("r", 20)
.classed("dot", true);
}
map.on('load', () => {
// if you need to do something when the map first loads
});
map.on('move', () => {
// things that happen when you drag, pan, zoom the map.
update(); // calls the redraw function below.
});
// option settings for this map layer
let hometown_options = {
className: "dot",
rField: "duration",
rScale: 0.5
}
let update = () => {
dotsOnMap();
//mapLocationsCircle_MapBox(mapSVG,"hometowns",hometowns,projection,hometown_options);
// and other things....
}
update();
invalidation.then(() => map.remove());
}
locations = [[-78.4767,38.0293], [-78.5040,38.0388], [-78.41223051355868,38.00334833402652]];
<style>
.dot {fill: #00f; stroke: black; opacity: 0.5;}
</style>
import {getMapData, mapLocationsCircle_MapBox} from "@emfielduva/dvlib_maps"
mapboxgl = {
const gl = await require("mapbox-gl@2.2.0");
if (!gl.accessToken) {
// https://www.mapbox.com/help/how-access-tokens-work/
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.
