Published
Edited
Jun 5, 2020
1 fork
1 star
md`# map zoomed in`
d3=require("d3@latest")
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, width / 2]);
svg.append("rect").attr("width", width).attr("height", width / 2).attr("fill", "#111");
projection.fitSize([width,width/2], germany);
const geoPath = d3.geoPath(projection)
svg
.append("path")
.attr("d", geoPath(d3.geoGraticule10()))
.attr("stroke", "#333")
.attr("fill", "none");
const countriesPath = geoPath(countries);
svg
.append("path")
.attr("d", countriesPath)
.attr("stroke", "#555")
.attr("fill", "#333");
for (const city of cities) {
const { lng, lat, population, name } = city;
const [x,y] = projection([lng, lat]);
svg.append("circle").attr("cx", x).attr("cy", y).attr("r", scale(population)).attr("fill", "#eee");
svg.append("text").attr("x", x).attr("y", y).text(name);
}
const projectedPosition = projection([6.81, 51.27 ]); // some place in germany
const [cx, cy] = projectedPosition;
svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 10).attr("fill-opacity", 0.4).attr("fill", "limegreen");
svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 5).attr("fill", "limegreen");
return svg.node();
}
html`<style>
text {
text-align: center;
text-anchor: middle;
alignment-baseline: central;
fill: white;
font-size: 6pt;
transform: translateY(6px);
}
</style>`
projection = d3.geoMercator()
germany = countries.features.find(f => f.properties.name == "Germany")
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.
