chart = {
const svg = d3
.create("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
const gs = svg
.selectAll("path")
.data(nodes, d => d.name)
.join("g")
.attr(
"transform",
(d, i) =>
`translate(${(i % n_col) * width}, ${Math.floor(i / n_col) *
width})`
);
const projection = mapProjection
.fitExtent(
[[5, 5], [width, height]],
topojson.feature(world, world.objects.land)
);
gs.append("path")
.attr("d", d => {
const path_d = d3.geoPath().projection(projection)(path_data);
return path_d;
})
.attr("fill", colorschemes[activeColorScheme]["land"])
.attr("stroke", colorschemes[activeColorScheme]["land"])
gs.append('text')
.text((d, i) => aggregationType === "Cities" ? (i+1) + '. ' + d.city :(i+1) + '. ' + d.name)
.attr("transform", `translate(${width/2}, ${height*1.1})`)
.style("text-anchor", "middle")
.style("font-size", "0.5em")
.style("font-family", "Akkurat Ll");
gs.append("g").attr("class", "paths")
.each(function (node, i) {
let chart = d3.select(this);
let edges = node["edges"];
chart.append("g")
.attr("id", "connections")
.selectAll("paths")
.data(edges)
.enter()
.append("path")
.attr("d", (d) => {
let source = d["sourceCoords"];
let target = d["targetCoords"];
let toDraw = {type: "LineString", coordinates: [source, target]};
let fullPath = mapPath(toDraw);
return fullPath;
})
.attr("stroke", d => sectorColor(d["distanceType"]))
.attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke-width", d => linkWidthFxn(d[d["distanceType"]]))
.attr("stroke-opacity", linkOpacity);
});
return svg.node();
}