Public
Edited
Feb 9, 2024
display = {
const width = 1500, height = 1500;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], map);
var geopaths = svg.append("g").attr("id", "paths");
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(map.features).enter().append("path").attr('class', 'outlines')
.attr("d", path1)
.style("fill", "none")
.style("fill-opacity", "1")
.style("stroke-width", '1')
.style("stroke", "black")
.style('stroke-opacity','1')
return svg.node();
}
municipalities = FileAttachment("Municipalities.geojson").json()
map = FileAttachment("Map.geojson").json()
provinces = FileAttachment("Provinces.geojson").json()
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.
