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
May 12, 2020
3 forks
Importers
13 stars
4
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 womenCanvas, P5.js and circle packing (collision and cluster force) on a mapCanvas, P5 and circle packing in a mapD3 Force layout - Dark Family tree
Zoom to map via transform
Prototypes - New cases of CoronavirusGrouped dot bar chart with transitions
Also listed in…
Coronavirus
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function clicked(region) {
const plot = d3.select(map).select('.plot');
const thisRegion = mapRegions.filter(d => d.region === region)[0];
const x0 = thisRegion.bounds[0][0];
const y0 = thisRegion.bounds[0][1];
const x1 = thisRegion.bounds[1][0];
const y1 = thisRegion.bounds[1][1];
const xy0 = myProjection([x0, y0]);
const xy1 = myProjection([x1, y1]);
const xy = myProjection([(x0 + x1) / 2, (y0 + y1) / 2]);
const separation_x = xy1[0] - xy0[0];
const separation_y = xy0[1] - xy1[1];
const scale = Math.max(1, Math.min(4, 0.9 / Math.max(separation_x / width, separation_y / height)));

const transform = `translate(${width_a / 2},${height / 2})scale(${scale})translate(${-xy[0]},${-xy[1]})`;

plot
.attr("transform", transform);
plot.selectAll(".country")
.style("stroke-width", 0.5 / scale);
plot.selectAll(".disputed")
.style('stroke-dasharray', 2 / scale)
.style("stroke-width", 1.5 / scale);
plot.selectAll(".bubbles")
.style("stroke-width", 0.5 / scale)
.attr("r", d => 2 * scaleRadiusWorld(d["03-12-20"]) / scale) // this brings the radius at twice the size that the bubbles have in world view
}
Insert cell
Insert cell
md`## Constructor`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
scaleMaxRadiusWorld = d3.scaleLinear().domain([320, 480, 600, 700]).range([4, 6, 7.5, 9]);
Insert cell
scaleMinRadiusWorld = d3.scaleLinear().domain([320, 480, 600, 700]).range([0.5, 0.5, 1, 1]);
Insert cell
maxRWorld = scaleMaxRadiusWorld(width);
Insert cell
minRWorld = scaleMinRadiusWorld(width);
Insert cell
scaleRadiusWorld = d3.scaleSqrt()
.domain(value_domain)
.range([minRWorld, maxRWorld]);
Insert cell
Insert cell
Insert cell
scaleStrokeColour = d3.scaleOrdinal()
.domain(['No confirmed cases', 'Confirmed cases'])
.range(['#777777', '#4ba7bc']);
Insert cell
scaleFillColour = d3.scaleOrdinal()
.domain(['No confirmed cases', 'Confirmed cases'])
.range(['#e4e4e4', '#a1ccd9']);
Insert cell
Insert cell
Insert cell
Insert cell
scaleScaleMap = d3.scaleLinear().domain(devices_breaks).range([50, 90, 150])
Insert cell
scaleMap = scaleScaleMap(width_a);
Insert cell
myProjection = projections.geoRobinson()
.center([0, 0])
.scale(scaleMap)
.translate([width_a / 2, height / 2])
Insert cell
geoPath = d3.geoPath()
.projection(myProjection);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function checkVirus(file, type) {
(file.features).forEach(d => {
let nameCountry = d.properties['For data p'];
let virus = 'No confirmed cases';

for (let i = 0; i < csv.length; i++) {
if (csv[i]['Country/Region'] === nameCountry) {
virus = 'Confirmed cases'
}
}
d.properties.virus = virus;
})
}
Insert cell
checkVirus(countries, 'map');
Insert cell
checkVirus(disputed_lines_white, 'lines')
Insert cell
checkVirus(disputed_lines_black, 'lines')
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

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