Published
Edited
Jul 1, 2019
2 forks
Insert cell
Insert cell
state
Insert cell
viewof state = {
const width = 960;
const height = 500;
let value = null;
const projection = d3.geoCylindricalStereographic();
const path = d3.geoPath().projection(projection);

const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");

const g = svg.append("g")
.attr("transform", "translate(0,40)");

svg.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("d", path)
.on("click", d => {
const node = svg.node();
node.value = value = value === d.id ? null : d.id;
// const countryCode = worl
node.dispatchEvent(new CustomEvent("input"));
outline.attr("d", value ? path(d) : null);
});

svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);

const outline = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");

return Object.assign(svg.node(), {value: null});
}
Insert cell
world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
Insert cell
world_data = d3.tsv("https://unpkg.com/world-atlas@1/world/110m.tsv")
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5", "d3-geo@1", "d3-geo-projection@2")
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