MIT Ph.D. Candidate in HCI
Published
Edited
Dec 8, 2020
1 star
canvas.update(activeLocations) // this cell is what fires the transition!
activeLocations = {
const lowerName = name.toLocaleLowerCase();
return projectedLocations.map(v => {
return {
...v,
active:
lowerName.length === 0
? false
: v.name.toLocaleLowerCase().startsWith(lowerName)
};
});
}
projectedLocations = locations.value.map(v => {
return {
...v,
...projection([v.lon, v.lat])
};
})
projection = d3
.geoAlbersUsa()
.scale(width)
.translate([width / 2, height / 2])
height = 500
states = topojson.feature(us, us.objects.states).features
topojson.feature(us, us.objects.states)
us = FileAttachment("states-10m.json").json()
locations = {
// shortcut file attachment so this doesn't have to load on everyone's computer
// you can run the query yourself by uncommenting the code below
// and commenting out the file attachment
return FileAttachment("locations.json").json();
// const locations = [];
// let i = 0;
// for (const stateId of stateIds) {
// await queryDispatcher
// .query(
// `
// SELECT DISTINCT ?item ?name ?lat ?lon WHERE {
// hint:Query hint:optimizer "None". # subclass before getting items located in state
// ?item (wdt:P131+) wd:${stateId}; # items which are located in state
// (wdt:P31/(wdt:P279*)) wd:Q486972; # which are subclass of human settlement
// wdt:P625 ?coord; # get the coordinate location
// p:P625 ?coordinate. # get the coordinate location property statement
// ?coordinate psv:P625 ?coordinate_node. # get the coordinate location node
// ?coordinate_node wikibase:geoLatitude ?lat; # get the latitude
// wikibase:geoLongitude ?lon. # get the longitude
// SERVICE wikibase:label {
// bd:serviceParam wikibase:language "en".
// ?item rdfs:label ?name.
// }
// }
// ORDER BY (?name)
// `
// )
// .then(res =>
// res.map(r => {
// r.lat = +r.lat;
// r.lon = +r.lon;
// r.item = entityId(r.item);
// return r;
// })
// )
// .then(res => locations.push(...res));
// yield { progress: i++ / stateIds.length, value: locations };
// }
// return yield { value: locations };
}
import { queryDispatcher, entityId } from "@lukesmurray/wikidata-sparql-helpers"
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
