UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
Intro to Cartographic Visualization in Vega-Lite: Visualizing NBA Team LocationsCreating Interactive Choropleths in Vega-LiteAn Analysis of King County Bus Stops in Vega-Lite
Dynamically Generating and Visualizing GeoJSON in Vega-Lite
{
const usMap = vl.markGeoshape({fill: '#E0E0E0', stroke: '#F8F8F8', strokewidth: 1})
.data(vl.topojson("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").feature('states'));
const circle = vl.markGeoshape({opacity: 0.5})
.data(vl.json(rewind(geoJsonCircle)));
return vl.layer(usMap, circle)
.project(vl.projection('albersUsa'))
.width(800).height(500)
.render();
}
// Generate the GeoJSON circle based on the slider values
// circleToPolygon takes [long, lat], radius in meters, number of edges
// Note: I looked at the code and it appears to assume that Earth is a perfect sphere
// so as the radius grows in size, the "accuracy" of the meters specification goes down
geoCircle = circleToPolygon([rangeLongitude, rangeLatitude], rangeRadius, { numberOfEdges: 32 })
// This is the https://github.com/gabzim/circle-to-polygon code that generates a GeoJSON circle
//
// I figured out how to import the node module using
// https://observablehq.com/@observablehq/module-require-debugger
circleToPolygon = require('https://bundle.run/circle-to-polygon@2.2.0')
// convert the GeoJSON circle polygon to full GeoJSON specification
// See: https://geojson.org/
geoJsonCircle = convertCircleToFullGeoJSONSpec(geoCircle)
// Takes in a GeoJSON polygon and wraps a full GeoJSON format around it
function convertCircleToFullGeoJSONSpec(geoJsonCircle){
return {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: geoJsonCircle
}
]
}
}
{
const circleAtMinneapolis = circleToPolygon([-93.265015, 44.977753], 20000, { numberOfEdges: 32 });
const geoJsonCircleAtMpls = convertCircleToFullGeoJSONSpec(circleAtMinneapolis)
const usMap = vl.markGeoshape({fill: '#E0E0E0', stroke: '#F8F8F8', strokewidth: 1})
.data(vl.topojson("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").feature('states'));
const circle = vl.markGeoshape()
.data(vl.json(rewind(geoJsonCircleAtMpls)));
return vl.layer(usMap, circle)
.project(vl.projection('albersUsa'))
.width(800).height(500)
.render();
}
vl.markGeoshape()
.data(vl.json(geoJsonCircle.features))
.project(vl.projection('mercator')) // set mercator projection
.render()
vl.markGeoshape()
.data(vl.json(rewind(geoJsonCircle)))
.project(vl.projection('mercator')) // set mercator projection
.render()
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.
