Published
Edited
Jun 5, 2021
Insert cell
Insert cell
chart = {
var container = html`<svg></svg>`;

var path = d3.geo.path(),
force = d3.layout.force().size([width, height]);

var svg = d3.select(container)
.attr("width", width)
.attr("height", height);

var nodes = [],
links = [];

// console.log(catalonia.features)
catalonia.features.forEach(function(d, i) {
// if (d.id === 2 || d.id === 15 || d.id === 72) return; // lower 48
var centroid = path.centroid(d);
console.log(centroid);
if (centroid.some(isNaN)) return;
centroid.x = centroid[0];
centroid.y = centroid[1];
centroid.feature = d;
nodes.push(centroid);
});
console.log(nodes)

d3.geom.voronoi().links(nodes).forEach(function(link) {
var dx = link.source.x - link.target.x,
dy = link.source.y - link.target.y;
link.distance = Math.sqrt(dx * dx + dy * dy);
links.push(link);
});

force
.gravity(0)
.nodes(nodes)
.links(links)
.linkDistance(function(d) { return d.distance; })
.start();

var link = svg.selectAll("line")
.data(links)
.enter().append("line")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

var node = svg.selectAll("g")
.data(nodes)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
.call(force.drag)
.append("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", function(d) { return path(d.feature); });

force.on("tick", function(e) {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
return container
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
catalonia = FileAttachment("catalonia_mun.geojson").json()
Insert cell
Insert cell
Insert cell
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