The avatar for @irenedelatorre
Irene de la Torre
Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
Published
Edited
Mar 7, 2021
1 fork
12 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projection = projections.geoNaturalEarth()
.scale(width / 2 / Math.PI)
.translate([width / 2, height / 2])
.center([0, 0])
Insert cell
Insert cell
geoPath = d3.geoPath()
.projection(projection);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataSim = createGeoPoints(array);
Insert cell
Insert cell
function createGeoPoints(thisData) {
const newArray = [];
for (var i = 0; i < thisData.length; i++) {
newArray.push({
cluster: thisData[i].cluster,
center: thisData[i].center,
country: thisData[i].country,
lon_lat: thisData[i].lon_lat,
});
}
simulation_geo
.nodes(newArray);
for (let i = 0; i < 300; ++i) simulation_geo.tick();
return newArray;

}
Insert cell
Insert cell
simulation_geo = d3.forceSimulation()
.force('collide', forceCluster_Collision)
.force("x", forceX)
.force("y", forceY)
.stop();
Insert cell
Insert cell
Insert cell
Insert cell
forceCluster_Collision = forceClusterCollision()
.radius(d => radius + padding / 3)
.strength(0.8)
.clusterPadding(padding)
Insert cell
Insert cell
forceX = d3.forceX(d => projection(d.lon_lat)[0]).strength(0.7)
Insert cell
forceY = d3.forceY(d => projection(d.lon_lat)[1]).strength(0.7)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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