Senior Art Editor at Nature News in London.
pointers = [
{
name: "Fayetteville",
coordinates: [35.085, -78.977222]
}
]
locator = {
// top level SVG
const svg = d3
.create("svg")
.attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`)
.attr("width", mapWidth)
.attr("font-family", "sans-serif")
.attr("font-size", 8);
svg
.append("circle")
.attr("r", mapWidth / 2)
.attr("cx", mapHeight / 2)
.attr("cy", mapWidth / 2)
.attr("fill", "none")
.attr("stroke", "#000000")
.attr("stroke-width", 1);
// <g> grouping element
const g = svg.append("g");
// A group for the counties
const landGroup = g.append("g").attr("class", "base");
// the base county layer
landGroup
.append("path")
.datum(land)
.attr("fill", "#ececec")
.attr("stroke", "none")
.attr("d", path);
// A group for the counties
const countriesGroup = g.append("g").attr("class", "countries");
// the base county layer
countriesGroup
.append("path")
.datum(countries)
.attr("fill", "#ececec")
.attr("stroke", "#000")
.attr("stroke-width", 1)
.attr("d", path);
// Add a new group for the pointers
const pointersGroup = svg.append("g");
pointersGroup
.selectAll("circle")
.data(pointers)
.enter()
.append("circle")
.attr("r", 3)
.attr("fill", "red")
.attr("cx", (d) => projection([d.coordinates[1], d.coordinates[0]])[0])
.attr("cy", (d) => projection([d.coordinates[1], d.coordinates[0]])[1]);
return svg.node();
}
land = {
const attachement = FileAttachment("land-50m.json");
const json = await attachement.json();
return topojson.feature(json, json.objects.land);
}
import { world } from "@jashkenas/latitude-longitude-world-map-plotter"
countries = topojson.feature(world, world.objects.countries)
projection = d3
.geoOrthographic()
.rotate([lon, lat])
.fitWidth(mapWidth, { type: "Sphere" })
.precision(0.1)
path = d3.geoPath().projection(projection)
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.
