map_with_labels = {
const chartWidth = 1920;
const chartHeight = 1080;
const backgroundColor = "#EAF2FA";
const landColor = "#09A573";
const landStroke = "#FCF5E9";
const markerColor = "#E26F99";
const labelOnWaterColor = "#504C57";
const labelOnLandColor = "#FAF9FB";
const projection = d3.geoEquirectangular()
.scale([1200])
.center(markers[0].geometry.coordinates)
.translate([chartWidth / 5, 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.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', landColor)
.attr('stroke', landStroke)
.attr('stroke-width', 1);
svg.selectAll("g.countryLabels text")
.data(au.features)
.join("text")
.attr("fill", d => d.properties.name === "New Zealand" ? labelOnWaterColor : labelOnLandColor)
.attr("transform", d => `translate(${pathGenerator.centroid(d)})`)
.attr("dx", "0em")
.attr("dy", d => d.properties.name === "New Zealand" ? "2.2em" : "0em")
.attr("text-anchor", "middle")
.style("font", "400 16px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif")
.text(d => d.properties.name);
return svg.node();
}
data = {
let data = Object.assign({}, au_and_nz);
data.features = au.features.slice(0);
data.features.push(markers[0]);
return data;
}
au_and_nz = FileAttachment("Australia and New Zealand.geo.json").json()
au = FileAttachment("australia-with-states_782.geojson").json()
markers = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
122.2111576795578,
-17.928395068168417
]
}
}
];
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.
