Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Maps (Geographic)base codeMultiple LayersAdd Zoom and PanProjectionsChoroplethDotMapCentroids, Bounds, AbstractionsSparklines at centroidsUS States Grid MapWorld Grid MapMapBox GLMapBox GL - layersMapBox GL - dot locationsObservable Plot - Base World MapObservable Plot - Add GIS LayersObservable Plot - ProjectionsObservable Plot - ChoroplethObservable Plot - Dot mapUS map with Powerplant Pack CirclesRing plot on Map - Trust Gap?Fixed location Network GraphConnecting multiple visuals in one spacegeoContainsPolygons by [lon,lat] sets on Map (geo)
Leaflet
<div style="height: 500px;">
map = {
let map = L.map(map_container).setView([38.04, -78.49], 13);
let baselayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
return map;
}
L
cville_boundaries = {
let data = await fetch("https://opendata.arcgis.com/datasets/c371ad0b81024822bad1147ff6bb24c4_51.geojson");
return data.json();
}
cvilleLayer = L.geoJson(cville_boundaries).addTo(map);
//map.fitBounds(cvilleLayer.getBounds()) // this would auto-fit to the charlottesville boundary.
marker1 = L.circle([38.0388,-78.5040,], {radius: 100, color: "#0000ff", fillColor: "#ff00ff", fillOpacity: 0.5}).addTo(map)
locations = [[38.0293,-78.4767], [38.0388,-78.5040,], [38.00334833402652,-78.41223051355868]];
{
locations.forEach(latlon => {
let marker = L.circle(latlon, {radius: 100, color: "#0000ff", fillColor: "#ff00ff", fillOpacity: 0.5}).addTo(map)
})
}
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.
