One step at a time.
Published
Edited
Apr 14, 2022
14 forks
2 stars
chart = {
// Prepare map features.
const provinces = topojson.feature(vietnam, vietnam.objects.vn_iso_province),
country = topojson.mesh(vietnam, vietnam.objects.vn_iso_province, (a, b) => a == b)
const tooltip = new Tooltip()
//Draw map.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, width])
svg.append("g")
.selectAll("path")
.data(provinces.features)
.join("path")
.attr("fill", "white")
.attr("stroke", "lightgray")
.attr("d", path(provinces))
.attr("cursor", "pointer")
.on("mousemove", function(e, d) {
const pointer = d3.pointer(e, svg.node())
tooltip.show(pointer, d)
d3.select(this)
.attr("fill", "lightgray")
})
.on("mouseout", function() {
tooltip.hide()
d3.select(this)
.attr("fill", "white")
})
svg.append("path")
.datum(country)
.attr("fill", "none")
.attr("stroke", "gray")
.attr("d", path(country))
svg.append(() => tooltip.node)
return svg.node();
}
d3geo = require("d3-geo-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.
