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
D3.js
Treemap with patterns and animationParticipación española en Eurovisión: un enfoque de género en torno a letristas y compositoresSpanish participation in Eurovision: a gender approach to composers30 Day Map Challenge 2021 (2 ~ Lines)Wonderful Wednesday April 2021. COPD APP dataOnly 6% of the Nobel Prize Winners are women
Canvas, P5.js and circle packing (collision and cluster force) on a map
Canvas, P5 and circle packing in a mapD3 Force layout - Dark Family treeZoom to map via transformPrototypes - New cases of CoronavirusGrouped dot bar chart with transitions
Also listed in…
Observable's Instagram Shares
P5.js
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