Public
Edited
Apr 22, 2024
Insert cell
Insert cell
Insert cell
Insert cell
locations = [
{name: "Charlottesville", lon: -78.4767, lat: 38.0293},
{name: "Wise", lon: -82.5757, lat: 36.9759},
{name: "Chincoteague", lon: -75.3788, lat: 37.9332},
{name: "Washington, D.C.", lon: -77.0369, lat: 38.9072},
{name: "Baltimore", lon: -76.6122, lat: 39.2904}
]
Insert cell
d3.geoContains(vaGeoJSON,[locations[0].lon,locations[0].lat]) // just to show the true/false return.
Insert cell
virginia = usstates.features.filter(d => d.properties.NAME == "Virginia") // extracted state feature from usstates
Insert cell
Insert cell
vaGeoJSON = subsetGeoJSON(virginia) // build a full geoJSON object from feature(s), required by d3.geoContains()
Insert cell
subsetGeoJSON = (features) => {
// build a complete geoJSON object from only passed in features.
let geoJSON = Object();
geoJSON.type = "FeatureCollection";
geoJSON.idField = "properties.NAME";
geoJSON.features = Array();

features.forEach(d => {
geoJSON.features.push(d);
});
return geoJSON;
}
Insert cell
Insert cell
Insert cell
map = d3.select(mapContainer)
Insert cell
{
let mapLayers = [];
mapLayers["virginia"] = drawMapLayer(map,"virginia",virginia,"properties.NAME");

let dots = d3.select(mapContainer).selectAll("circle")
.data(locations)
.join("circle")
.attr("r",5)
.attr("cx", d => projection([d.lon,d.lat])[0])
.attr("cy", d => projection([d.lon,d.lat])[1]);

let labels = d3.select(mapContainer).selectAll("text")
.data(locations)
.join("text")
.attr("x", d => projection([d.lon,d.lat])[0] + 10)
.attr("y", d => projection([d.lon,d.lat])[1])
.text(d => d3.geoContains(vaGeoJSON,[d.lon,d.lat])); // true or false text label
}
Insert cell
projection = d3.geoMercator().center([-79,38]).scale(5000)
Insert cell
import {getMapData, drawMapLayer} with {projection} from "@emfielduva/dvlib_maps"
Insert cell
usstates = getMapData("us_states20m")
Insert cell

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.
Learn more