allCities = {
worldMap.select("#cities").remove()
worldMap.select("#names").remove()
const simulation = d3
.forceSimulation(computedPopns)
.force(
"x",
d3.forceX((d) => mapProjection([d.Longitude, d.Latitude])[0])
)
.force(
"y",
d3.forceY((d) => mapProjection([d.Longitude, d.Latitude])[1])
)
.force(
"collide",
d3.forceCollide(d => {
if (show === 'GDP') {
if (d[gdp[0]] < d[gdp[1]]) {
return gdpScale(d[gdp[0]])+repulsionFactor;
} else {
return gdpScale(d[gdp[1]])+repulsionFactor;
}
} else {
if (d[popn[0]] < d[popn[1]]) {
return popnScale(d[popn[0]])+repulsionFactor;
} else {
return popnScale(d[popn[1]])+repulsionFactor;
}
}
}).strength(1)
);
const nodeG = worldMap.append("g")
.attr("id", "cities")
.selectAll("g")
.data(computedPopns)
.join("g")
.call(drag(simulation));
// nodeG.append('circle')
// .attr("r", d => radiusScale(d[d["plotOrder"][2]]));
// nodeG.append("g")
// .each(function(node) {
// for (let i in node["plotOrder"]) {
// let year = node["plotOrder"][i];
// d3.select(this).append("g")
// .append("circle")
// .attr("r", d => radiusScale(d[year]))
// .attr("fill", yearScale(year));
// }
// })
if (show==="Comparison"){
nodeG.append('circle')
.attr("r", radius)//(d) => radiusScale(d[d["plotOrder"][0]])
.attr("fill", "none");
nodeG.append("g")
.each(function(node, i) {
let symbol = d3.select(this).append("g");
let pPlotOrder = node['popnPlotOrder'];
let gPlotOrder = node['gdpPlotOrder'];
symbol.append("clipPath")
.attr("id", "left-clip_" + i)
.append("rect")
.attr("width", radius)
.attr("height", radius * 2)
.attr("x", -radius)
.attr("y", -radius);
for (let i = 0; i < pPlotOrder.length; i+=1) {
let prop = pPlotOrder[i];
symbol
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => popnScale(d[prop]))
.attr("clip-path", "url(#left-clip_" + i + ")")
.style("fill", (d) => pColor[prop]);
}
symbol.append("clipPath")
.attr("id", "right-clip_" + i)
.append("rect")
.attr("width", radius)
.attr("height", radius * 2)
.attr("x", 0)
.attr("y", -radius);
for (let i = 0; i < gPlotOrder.length; i+=1) {
let prop = gPlotOrder[i];
symbol
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => gdpScale(d[prop]))
.attr("clip-path", "url(#right-clip_" + i + ")")
.style("fill", gColor[prop]);
}
})
} else {
let nodeProp;
let nodeScale;
let nodeColor;
if (show==="GDP") {
nodeProp = 'gdpPlotOrder';
nodeScale = gdpScale;
nodeColor = gColor;
} else {
nodeProp = 'popnPlotOrder';
nodeScale = popnScale;
nodeColor = pColor;
}
nodeG.append("g")
.each(function(node, i) {
let symbol = d3.select(this).append("g");
// let pPlotOrder = node['popnPlotOrder'];
if (showType === "Both") {
let plotOrder = node[nodeProp];
for (let i = 0; i < plotOrder.length; i+=1) {
let prop = plotOrder[i];
symbol
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => nodeScale(d[prop]))
.attr("clip-path", "url(#right-clip_" + i + ")")
.style("fill", nodeColor[prop]);
}
} else {
if (show === "GDP") {
let prop = showType === 2019 ? "gdp_urban_2019" : "gdp_urban_2050_a";
symbol
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => nodeScale(d[prop]))
.attr("clip-path", "url(#right-clip_" + i + ")")
.attr("stroke", "white")
.attr("stroke-width", "0.5px")
.style("fill", nodeColor[prop]);
} else {
let prop = showType === 2019 ? "urban_2019" : "urban_2050_a";
symbol
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => nodeScale(d[prop]))
.attr("clip-path", "url(#right-clip_" + i + ")")
.attr("stroke", "white")
.attr("stroke-width", "0.5px")
.style("fill", nodeColor[prop]);
}
}
})
}
simulation.on("tick", () => {
nodeG.attr("transform", d => `translate(${d.x}, ${d.y})`)});
invalidation.then(() => simulation.stop());
// worldMap.append("g")
// .attr("id", "names")
// .selectAll("text")
// .data(topCities)
// .join("text")
// .attr("transform", d => `translate(${mapProjection([d["Longitude"], d["Latitude"]])})`)
// .attr("font-size", "0.4em")
// .attr("font-family", "Akkurat LL")
// .attr("fill", "white")
// .attr("stroke", "#063249")
// .attr("stroke-width", "0.1px")
// .attr("paint-order", "stroke")
// .text(d => d["Urban Agglomeration"]);
return worldMap.node();
}