Public
Edited
Jan 27, 2023
map = {
const chartWidth = 300;
const chartHeight = 300;
const backgroundColor = "#EAF2FA";
const landColor = "#09A573";
const landStroke = "#FCF5E9";
const markerColor = "#E26F99";
const projection = d3
.geoMercator()
.scale([180])
.center(markers[0].geometry.coordinates)
.translate([chartWidth / 3, chartHeight / 3]);
const pathGenerator = d3.geoPath(projection);
const svg = d3
.create("svg")
.attr("title", "Map")
.attr("width", chartWidth)
.attr("height", chartHeight);
svg
.append("rect")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("fill", backgroundColor);
svg
.selectAll("path")
.data(au_and_nz.features)
.join("path")
.attr("d", pathGenerator)
.attr("fill", landColor)
.attr("stroke", landStroke)
.attr("stroke-width", 1);
svg
.selectAll("circle")
.data(markers)
.join("circle")
.attr("cx", (d) => projection(d.geometry.coordinates)[0])
.attr("cy", (d) => projection(d.geometry.coordinates)[1])
.attr("r", 4)
.attr("fill-opacity", 0.5)
.attr("fill", markerColor)
.attr("stroke", markerColor);
return svg.node();
}
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.
