viewof selected_country = country_picker()
country_picker = function () {
const W = width;
const H = (W * height) / width;
const svg = d3
.select(DOM.svg(W, H));
const g = svg.append("g");
const g_countries = g.append("g");
let x = 0;
let z = 1;
const projection = d3
.geoConicConformal()
.parallels([40, 68])
.rotate([-10 + x / z / 15, 0])
.center([8 - 10, 53.823])
.scale(width * 1.36 * z)
.translate([W / 2, H / 2]);
const path = d3.geoPath().projection(projection);
const selection_text = svg.append("text")
.attr("x", 0)
.attr("y", 0)
.attr('dy', "1em")
.text("Select a country");
g_countries
.selectAll("path")
.data(areas)
.join("path")
.attr("fill", "#eee")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.append("title")
.text(d => d.properties.name);
return Object.assign(svg.node(), {
value: null,
onclick: event => {
if (event.target.tagName == 'path') {
// Change countries colors
g_countries.selectAll("path").attr("fill", "#eee");
d3.select(event.target).attr('fill', 'gray');
// Update views' value
event.currentTarget.value = d3.select(event.target).datum().properties;
// Update legend
selection_text.text(event.currentTarget.value.name);
// Dispatch event
event.currentTarget.dispatchEvent(new CustomEvent("input"));
}
}
});
}
width = 400
areas = world.features
// select only countries in europe
.filter(
o =>
o.properties.continent == "Europe" ||
o.properties.name == "Morocco" ||
o.properties.name == "Algeria" ||
o.properties.name == "Libya" ||
o.properties.name == "Tunisia" ||
o.properties.name == "Turkey"
)
world = FileAttachment("ne_50m_admin_0_countries.geojson").json()
topojson = require("topojson-client@3")
d3 = require('d3@6')
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.
