Public
Edited
May 3, 2024
Insert cell
Insert cell
Insert cell
pathGen = d3.geoPath().projection(projection)
Insert cell
locations = [ // just the lon,lats in an array of arrays
[[-78.5,38.0],[-78.45,38.0],[-78.45,38.05],[-78.5,38.05]],
[[-78.5,38.05],[-78.45,38.05],[-78.45,38.1],[-78.5,38.1]],
[[-78.5,38.1],[-78.45,38.1],[-78.45,38.15],[-78.5,38.15]],
[[-78.45,38.0],[-78.4,38.0],[-78.4,38.05],[-78.45,38.05]],
[[-78.45,38.05],[-78.4,38.05],[-78.4,38.1],[-78.45,38.1]],
[[-78.45,38.1],[-78.4,38.1],[-78.4,38.15],[-78.45,38.15]],
[[-78.4,38.0],[-78.35,38.0],[-78.35,38.05],[-78.4,38.05]],
[[-78.4,38.05],[-78.35,38.05],[-78.35,38.1],[-78.4,38.1]],
[[-78.4,38.1],[-78.35,38.1],[-78.35,38.15],[-78.4,38.15]]
];
Insert cell
locations2 = [ // same but with other data values for each object
{name:"one", value:8, points:[[-78.5,38.0],[-78.45,38.0],[-78.45,38.05],[-78.5,38.05]]},
{name:"two", value:3, points:[[-78.5,38.05],[-78.45,38.05],[-78.45,38.1],[-78.5,38.1]]},
{name:"three", value:5, points:[[-78.5,38.1],[-78.45,38.1],[-78.45,38.15],[-78.5,38.15]]},
{name:"four", value:1, points:[[-78.45,38.0],[-78.4,38.0],[-78.4,38.05],[-78.45,38.05]]},
{name:"five", value:6, points:[[-78.45,38.05],[-78.4,38.05],[-78.4,38.1],[-78.45,38.1]]},
{name:"six", value:2, points:[[-78.45,38.1],[-78.4,38.1],[-78.4,38.15],[-78.45,38.15]]},
{name:"seven", value:10, points:[[-78.4,38.0],[-78.35,38.0],[-78.35,38.05],[-78.4,38.05]]},
{name:"eight", value:7, points:[[-78.4,38.05],[-78.35,38.05],[-78.35,38.1],[-78.4,38.1]]},
{name:"nine", value:9, points:[[-78.4,38.1],[-78.35,38.1],[-78.35,38.15],[-78.4,38.15]]}
];
Insert cell
Insert cell
pathFromLonLat = (points,close) => {
let path = "";
points.forEach((d,i) => {
if (i == 0) {
path += "M" + projection(d);
} else {
path += "L" + projection(d);
}
})

if (typeof(close) === "undefined" || close === true) {path += "Z"}; // assume close the polygon unless told not to.
return path;
}
Insert cell
pathsFromLocs = map.select("#pathLayer").selectAll("path")
.data(locations2)
.join("path")
.attr("d", d => pathFromLonLat(d.points))
.style("fill", d => scaleColor(d.value));
Insert cell
scaleColor = d3.scaleLinear().domain([0,10]).range(["blue","red"])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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