Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
map = d3.select() // a dummy object so the code runs. This needs to be overridden in the include with statement.
projection = d3.geoMercator(); // this is just here to make the code work. it will be set in calling files.
pathGenerator = d3.geoPath().projection(projection);
latlongs = ({
"charlottesville": {"lat":38.029306, "lon":-78.476678, note:"Charlottesville, VA"},
"centerofus_contiguous": {"lat":39.82865075672342, "lon":-98.58032727801971, note:"near Belle Fourche, SD"},
"centerofus_geographic": {"lat":44.967243, "lon":-103.771556, note:"near Lebanon, KS"}
})
basemaps = ({
"world110m": {"geojson": FileAttachment("world-110m.geo.json"), "id":"id"},
"world50m": {"geojson":FileAttachment("world-50m.geo.json"), "id":"properties.iso_a3"},
"us_states20m": {"geojson":FileAttachment("gz_2010_us_states_00_20m.json"), "id":"properties.NAME"},
"us_states5m": {"geojson":FileAttachment("gz_2010_us_states_00_5m.json"), "id":"properties.NAME"},
"us_states500k": {"geojson":FileAttachment("gz_2010_us_states_00_500k.json"), "id":"properties.NAME"},
"us_counties20m": {"geojson":FileAttachment("gz_2010_us_counties_00_20m.json"), "id":"properties.NAME"},
"us_counties5m": {"geojson":FileAttachment("gz_2010_us_counties_00_5m.json"), "id":"properties.NAME"},
"us_counties500k": {"geojson":FileAttachment("gz_2010_us_counties_00_500k.json"), "id":"properties.NAME"},
"us_congress20m": {"geojson":FileAttachment("gz_2010_us_congressional_11_20m.json"), "id":""},
"us_congress5m": {"geojson":FileAttachment("gz_2010_us_congressional_11_5m.json"), "id":""}
})
async function getMapData(geoFile) {
let mapData;
if (typeof(geoFile)=="string") {
if (geoFile.startsWith("http")) {mapData = d3.json(geoFile);}
else if (geoFile in basemaps) {
mapData = await basemaps[geoFile].geojson.json();
mapData.idField = basemaps[geoFile].id;
}
} else if (typeof(geoFile) == "object") {
// pass an existing object in, like from a FileAttachment.json()
mapData = geoFile;
} else {
console.log("Problem with geoFile input: " + geoFile)
}
return mapData;
}
usStateCodes = [
{"FIPS":"01","ABBR":"AL","NAME":"Alabama","GNISID":"01779775"},
{"FIPS":"02","ABBR":"AK","NAME":"Alaska","GNISID":"01785533"},
{"FIPS":"04","ABBR":"AZ","NAME":"Arizona","GNISID":"01779777"},
{"FIPS":"05","ABBR":"AR","NAME":"Arkansas","GNISID":"00068085"},
{"FIPS":"06","ABBR":"CA","NAME":"California","GNISID":"01779778"},
{"FIPS":"08","ABBR":"CO","NAME":"Colorado","GNISID":"01779779"},
{"FIPS":"09","ABBR":"CT","NAME":"Connecticut","GNISID":"01779780"},
{"FIPS":10,"ABBR":"DE","NAME":"Delaware","GNISID":"01779781"},
{"FIPS":11,"ABBR":"DC","NAME":"District of Columbia","GNISID":"01702382"},
{"FIPS":12,"ABBR":"FL","NAME":"Florida","GNISID":"00294478"},
{"FIPS":13,"ABBR":"GA","NAME":"Georgia","GNISID":"01705317"},
{"FIPS":15,"ABBR":"HI","NAME":"Hawaii","GNISID":"01779782"},
{"FIPS":16,"ABBR":"ID","NAME":"Idaho","GNISID":"01779783"},
{"FIPS":17,"ABBR":"IL","NAME":"Illinois","GNISID":"01779784"},
{"FIPS":18,"ABBR":"IN","NAME":"Indiana","GNISID":"00448508"},
{"FIPS":19,"ABBR":"IA","NAME":"Iowa","GNISID":"01779785"},
{"FIPS":20,"ABBR":"KS","NAME":"Kansas","GNISID":"00481813"},
{"FIPS":21,"ABBR":"KY","NAME":"Kentucky","GNISID":"01779786"},
{"FIPS":22,"ABBR":"LA","NAME":"Louisiana","GNISID":"01629543"},
{"FIPS":23,"ABBR":"ME","NAME":"Maine","GNISID":"01779787"},
{"FIPS":24,"ABBR":"MD","NAME":"Maryland","GNISID":"01714934"},
{"FIPS":25,"ABBR":"MA","NAME":"Massachusetts","GNISID":"00606926"},
{"FIPS":26,"ABBR":"MI","NAME":"Michigan","GNISID":"01779789"},
{"FIPS":27,"ABBR":"MN","NAME":"Minnesota","GNISID":"00662849"},
{"FIPS":28,"ABBR":"MS","NAME":"Mississippi","GNISID":"01779790"},
{"FIPS":29,"ABBR":"MO","NAME":"Missouri","GNISID":"01779791"},
{"FIPS":30,"ABBR":"MT","NAME":"Montana","GNISID":"00767982"},
{"FIPS":31,"ABBR":"NE","NAME":"Nebraska","GNISID":"01779792"},
{"FIPS":32,"ABBR":"NV","NAME":"Nevada","GNISID":"01779793"},
{"FIPS":33,"ABBR":"NH","NAME":"New Hampshire","GNISID":"01779794"},
{"FIPS":34,"ABBR":"NJ","NAME":"New Jersey","GNISID":"01779795"},
{"FIPS":35,"ABBR":"NM","NAME":"New Mexico","GNISID":"00897535"},
{"FIPS":36,"ABBR":"NY","NAME":"New York","GNISID":"01779796"},
{"FIPS":37,"ABBR":"NC","NAME":"North Carolina","GNISID":"01027616"},
{"FIPS":38,"ABBR":"ND","NAME":"North Dakota","GNISID":"01779797"},
{"FIPS":39,"ABBR":"OH","NAME":"Ohio","GNISID":"01085497"},
{"FIPS":40,"ABBR":"OK","NAME":"Oklahoma","GNISID":"01102857"},
{"FIPS":41,"ABBR":"OR","NAME":"Oregon","GNISID":"01155107"},
{"FIPS":42,"ABBR":"PA","NAME":"Pennsylvania","GNISID":"01779798"},
{"FIPS":44,"ABBR":"RI","NAME":"Rhode Island","GNISID":"01219835"},
{"FIPS":45,"ABBR":"SC","NAME":"South Carolina","GNISID":"01779799"},
{"FIPS":46,"ABBR":"SD","NAME":"South Dakota","GNISID":"01785534"},
{"FIPS":47,"ABBR":"TN","NAME":"Tennessee","GNISID":"01325873"},
{"FIPS":48,"ABBR":"TX","NAME":"Texas","GNISID":"01779801"},
{"FIPS":49,"ABBR":"UT","NAME":"Utah","GNISID":"01455989"},
{"FIPS":50,"ABBR":"VT","NAME":"Vermont","GNISID":"01779802"},
{"FIPS":51,"ABBR":"VA","NAME":"Virginia","GNISID":"01779803"},
{"FIPS":53,"ABBR":"WA","NAME":"Washington","GNISID":"01779804"},
{"FIPS":54,"ABBR":"WV","NAME":"West Virginia","GNISID":"01779805"},
{"FIPS":55,"ABBR":"WI","NAME":"Wisconsin","GNISID":"01779806"},
{"FIPS":56,"ABBR":"WY","NAME":"Wyoming","GNISID":"01779807"},
{"FIPS":60,"ABBR":"AS","NAME":"American Samoa","GNISID":"01802701"},
{"FIPS":66,"ABBR":"GU","NAME":"Guam","GNISID":"01802705"},
{"FIPS":69,"ABBR":"MP","NAME":"Northern Mariana Islands","GNISID":"01779809"},
{"FIPS":72,"ABBR":"PR","NAME":"Puerto Rico","GNISID":"01779808"},
{"FIPS":74,"ABBR":"UM","NAME":"U.S. Minor Outlying Islands","GNISID":"01878752"},
{"FIPS":78,"ABBR":"VI","NAME":"U.S. Virgin Islands","GNISID":"01802710"},
{"FIPS":60,"ABBR":"AS","NAME":"American Samoa","GNISID":""},
{"FIPS":64,"ABBR":"FM","NAME":"Federated States of Micronesia","GNISID":""},
{"FIPS":66,"ABBR":"GU","NAME":"Guam","GNISID":""},
{"FIPS":68,"ABBR":"MH","NAME":"Marshall Islands","GNISID":""},
{"FIPS":69,"ABBR":"MP","NAME":"Commonwealth of the Northern Mariana Islands","GNISID":""},
{"FIPS":70,"ABBR":"PW","NAME":"Palau","GNISID":""},
{"FIPS":74,"ABBR":"UM","NAME":"U.S. Minor Outlying Islands","GNISID":""},
{"FIPS":81,"ABBR":"","NAME":"Baker Island","GNISID":""},
{"FIPS":84,"ABBR":"","NAME":"Howland Island","GNISID":""},
{"FIPS":86,"ABBR":"","NAME":"Jarvis Island","GNISID":""},
{"FIPS":67,"ABBR":"","NAME":"Johnston Atoll","GNISID":""},
{"FIPS":89,"ABBR":"","NAME":"Kingman Reef","GNISID":""},
{"FIPS":71,"ABBR":"","NAME":"Midway Islands","GNISID":""},
{"FIPS":76,"ABBR":"","NAME":"Navassa Island","GNISID":""},
{"FIPS":95,"ABBR":"","NAME":"Palmyra Atoll","GNISID":""},
{"FIPS":79,"ABBR":"","NAME":"Wake Island","GNISID":""}
]
function drawMapLayer(mapElem,layerID,data,idProp) {
// first check to see how we passed in the target mapElem.
// if it's an object already, we'll use that.
// if we instead gave it an id string, set the map element as a d3 object
if (typeof(mapElem)=="string") {
mapElem = d3.select("#"+mapElem);
}
// now get, or create, the layer <g> inside of the mapElem.
let layerElem = layerSVGGroup(mapElem,layerID);
// now draw the layer from feature geometry
let layer = layerElem.selectAll("path")
.data(data)
.join("path")
.attr("d", pathGenerator)
//.attr("id", d => d[idProp]);
.attr("id", d => getProperty(idProp,d));
return layer;
}
import {getProperty} from "@emfielduva/dvlib"
function layerSVGGroup (mapElem,layerID) {
// get, or create, the layer <g> inside of the mapElem.
let layerElem = mapElem.select("#"+layerID); // does it already exist? Use it.
// if it doesn't exist already, create (append) it.
if (layerElem.empty()) {layerElem = mapElem.append("g").attr("id",layerID)}
return layerElem;
}
gridMap = (mapElem,layerID,data,options) => {
if (typeof(options) === "undefined") {options = {}}
if (typeof(options.topleft) === "undefined") {options.topleft = [0,0]}
if (typeof(options.colField) === "undefined") {options.colField = "col"}
if (typeof(options.rowField) === "undefined") {options.rowField = "row"}
if (typeof(options.labelField) === "undefined") {options.labelField = "name"}
if (typeof(options.boxSize) === "undefined") {options.boxSize = 50}
if (typeof(options.boxRoundRad) === "undefined") {options.boxRoundRad = 0}
let layerElem = layerSVGGroup(mapElem,layerID);
layerElem.attr("transform","translate(" + options.topleft + ")");
let group = layerElem.selectAll("g").data(data).join("g");
group.attr("id",d => d.code);
group.append("rect")
.attr("x", d => d[options.colField] * options.boxSize)
.attr("y", d => d[options.rowField] * options.boxSize)
.attr("width",options.boxSize)
.attr("height",options.boxSize)
.attr("rx", options.boxRoundRad)
.classed("mapGrid",true);
group.append("text")
.attr("x", d => d[options.colField] * options.boxSize + options.boxSize/2)
.attr("y", d => d[options.rowField] * options.boxSize + options.boxSize/2)
.style("text-anchor","middle")
.text(d => d[options.labelField])
.classed("mapGridLabel",true);
return group;
}
mapLayerOnOff = (mapLayers,layer) => {
if (mapLayers[layer].style("visibility") == "visible") {
mapLayers[layer].style("visibility","hidden");
} else {
mapLayers[layer].style("visibility","visible");
}
}
zoom = d3.zoom().on("zoom", zoomed); // a core zoom function. Can override properties.
function zoomed({transform}) {map.selectAll("g").attr("transform", transform).attr("stroke-width", 1/transform.k);}
mapZoomTo = (scale,center) => {
projection.scale(scale);
if (typeof(center) !== 'undefined' && center[0] && center[1]) {projection.center(center)}
}
function zoomToBounds(event, d) {
const [[x0, y0], [x1, y1]] = pathGenerator.bounds(d);
event.stopPropagation();
let mapWidth; let mapHeight;
map.selectAll("path").transition().style("fill", null); // clear all paths in current "map" object
d3.select(this).transition().style("fill", "red");
if (typeof(mapWidth)==="undefined") {mapWidth = map.attr("width"); mapHeight = map.attr("height")};
map.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(mapWidth / 2, mapHeight / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / mapWidth, (y1 - y0) / mapHeight)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.pointer(event, map.node())
);
}
function zoomReset() {
let mapWidth = map.attr("width");
let mapHeight = map.attr("height");
map.selectAll("path").transition().style("fill", null);
map.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(map.node()).invert([mapWidth / 2, mapHeight / 2])
);
}
mapRotate = (lon,lat,roll) => {
if (typeof(roll) === "undefined") {roll = 0}
projection.rotate([-lon,-lat,roll]);
}
// get projected planar centroids of a geojson featureset.
// this uses the current pathGenerator which uses the current projection
// returns [x,y] coordinates in pixels
function centroids (featureSet, nameProp) {
let centroids = [];
featureSet.forEach(f => centroids.push({"name":getProperty(nameProp,f), "coord":pathGenerator.centroid(f)}));
return centroids;
}
// get Spherical lon,lat centroids of a geojson featureset.
// returns [lon,lat] coordinates
function geoCentroids (featureSet, nameProp) {
let geoCentroids = [];
featureSet.forEach(f => geoCentroids.push({"name":getProperty(nameProp,f), "coord":d3.geoCentroid(f)}));
return geoCentroids;
}
// getBounds of a geojson featureset
// returns [[x₀, y₀], [x₁, y₁]]
function bounds (featureSet, nameProp) {
let bounds = [];
featureSet.forEach(f => bounds.push({"name":getProperty(nameProp,f), "coord":pathGenerator.bounds(f)}));
return bounds;
}
// spherical bounding box
// returns [[left, bottom], [right, top]]
function geoBounds (featureSet, nameProp) {
let geoBounds = [];
featureSet.forEach(f => geoBounds.push({"name":getProperty(nameProp,f), "coord":d3.geoBounds(f)}));
return geoBounds;
}
import {rFromArea} from "@emfielduva/dvlib"
mapLocationsCircle = (mapElem,layerID,data,options) => {
// parse options and set defaults
if (typeof(options) === "undefined") {var options = {}}
if (typeof(options.className) === "undefined") {options.className = "location"}
if (typeof(options.lonField) === "undefined") {options.lonField = "lon"}
if (typeof(options.latField) === "undefined") {options.latField = "lat"}
if (typeof(options.rScale) === "undefined") {options.rScale = 1}
// now get, or create, the layer <g> inside of the mapElem.
let layerElem = layerSVGGroup(mapElem,layerID);
// draw
let locations = layerElem.selectAll("."+options.className)
.data(data)
.join("circle")
.attr("cx", d => projection([+d[options.lonField],+d[options.latField]])[0])
.attr("cy", d => projection([+d[options.lonField],+d[options.latField]])[1])
.attr("r", d => {
if (typeof(options.rField) === "undefined" && typeof(options.rScale) === "number") {
return options.rScale; // no rField, so just set to to the single number
} else if (typeof(options.rField) !== "undefined" && typeof(options.rScale) === "number") {
return d[options.rField] * options.rScale; // rScale is a number. Multiply.
} else if (typeof(options.rField) !== "undefined" && typeof(options.rScale) === "function") {
return options.rScale(d[options.rField]); // rScale is a scaling function, use it.
} else {
return 1; // all else fails, just size it to 1
}
})
.classed(options.className, true);
return locations;
}
mapLocationsCircle_MapBox = (mapElem,layerID,data,projection,options) => {
// parse options and set defaults
if (typeof(options) === "undefined") {var options = {}}
if (typeof(options.className) === "undefined") {options.className = "location"}
if (typeof(options.lonField) === "undefined") {options.lonField = "lon"}
if (typeof(options.latField) === "undefined") {options.latField = "lat"}
if (typeof(options.rScale) === "undefined") {options.rScale = 1}
// now get, or create, the layer <g> inside of the mapElem.
let layerElem = layerSVGGroup(mapElem,layerID);
// draw
let locations = layerElem.selectAll("."+options.className)
.data(data)
.join("circle")
.attr("cx", d => projection([+d[options.lonField],+d[options.latField]]).x) // uses .x rather than [0]
.attr("cy", d => projection([+d[options.lonField],+d[options.latField]]).y) // uses .y rather than [1]
.attr("r", d => {
if (typeof(options.rField) === "undefined" && typeof(options.rScale) === "number") {
return options.rScale; // no rField, so just set to to the single number
} else if (typeof(options.rField) !== "undefined" && typeof(options.rScale) === "number") {
return d[options.rField] * options.rScale; // rScale is a number. Multiply.
} else if (typeof(options.rField) !== "undefined" && typeof(options.rScale) === "function") {
return options.rScale(d[options.rField]); // rScale is a scaling function, use it.
} else {
return 1; // all else fails, just size it to 1
}
})
.classed(options.className, true);
return locations;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.