pressureSlopes = {
let nodes = dataP[movement]
worldMap.select("#piecharts").remove()
worldMap.select("#land")
let adjSize = size *2;
const simulation = d3
.forceSimulation(nodes)
.force(
"x",
d3.forceX((d) => mapProjection([parseFloat(d[baseX]), parseFloat(d[baseY])])[0])
)
.force(
"y",
d3.forceY((d) => mapProjection([parseFloat(d[baseX]), parseFloat(d[baseY])])[1])
)
.force(
"collide",
d3.forceCollide(boxSize+2).strength(repulsionFactor)
)
const nodeG = worldMap.append("g")
.attr("id", "piecharts")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation))
nodeG.append("g")
.each(function(node) {
d3.select(this).append('g')
.append("rect")
.attr("stroke-width", 0.4)
.attr("stroke", "#8F5601")
.attr('fill', '#FFFCF6')
.attr("width", boxSize * 2)
.attr("height", boxSize * 2);
let linePoints = processDataEq(node);
d3.select(this).append('path')
.datum(linePoints)
.attr("stroke", d => colorScaleP(d[2]))
.attr("stroke-width", stroke/1.7)
.attr("stroke-opacity", 1)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineP);
})
simulation.on("tick", () => {
nodeG.attr("transform", d => `translate(${d.x}, ${d.y})`)
textG.attr("transform", d => `translate(${d.x}, ${d.y})`)
});
invalidation.then(() => simulation.stop());
const textG = worldMap.append("g")
.attr("id", "text-charts")
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation));
return worldMap.node();
}