Published
Edited
Nov 22, 2020
1 fork
Comments locked
d3 = require("d3@5")
import { slider, color, button, select } from "@jashkenas/inputs"
import { tdeath } from "@fil/ncov2019-data"
tdeath
deathsByCountry = groupBy(tdeath, 'country')
groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
silentPlot = {
//svg variables
let width = 800;
let height = 500;
let margin = 50;
//create SVG artboard
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr('id', 'mapArea');
//create svg background color
let bg = svg
.attr('id', 'backgroundRect')
.append('rect')
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr('fill', bgC)
.on('mouseover', function() {
d3.select('#directions')
.transition()
.duration(1000)
.attr('opacity', 0);
d3.select(this)
.transition()
.duration(12000)
.attr('fill', targetColor);
d3.selectAll('.deathCircles')
.data(vizData)
//wait before anything happens...
.transition()
.duration(initialDelay)
.attr('opacity', 0)
//fade in a little bit
.transition()
.delay((d, i) => Math.random() * 1000)
.attr('opacity', .2)
//fade out again
.transition()
.duration(2000)
.attr('opacity', 0)
//wait before the finale
.transition()
.delay(2000)
.attr('opacity', 0)
//fade in for real
.transition()
.duration((d, i) => Math.random() * 1000)
.delay((d, i) => Math.random() * 5000)
.attr('opacity', 1)
.attr('cy', d => deathScale(d.total));
})
.on('mouseout', function(d) {
d3.select('#directions')
.transition()
.duration(1000)
.attr('opacity', 1);
d3.select(this)
.transition()
.duration(1000)
.attr('fill', bgC);
d3.selectAll('.deathCircles')
.transition()
.duration(1000)
.attr('opacity', 0)
.transition()
.duration(0)
.attr('cy', margin);
});
let directions = svg
.append('text')
.attr('id', 'directions')
.attr('pointer-events', 'none')
.attr('x', width / 2)
.attr('y', height / 2)
.attr('fill', 'white')
.attr('font-family', 'courier')
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'center')
.text('pay your respects by pausing here');
let dateScale = d3
.scaleLinear()
.domain([0, vizData.length])
.range([margin, width - margin]);
let deathScale = d3
.scaleLinear()
.domain(d3.extent(vizData, d => d.total))
.range([height - margin, margin]);
let changeScale = d3
.scaleLinear()
.domain(d3.extent(vizData, d => d.cases))
.range([.5, 1]);
let opacityScale = d3
.scaleLinear()
.domain(d3.extent(vizData, d => d.cases))
.range([.05, 1]);
svg
.selectAll('.deathCircles')
.data(vizData)
.enter()
.append('circle')
.attr('cx', (d, i) => dateScale(i))
.attr('cy', margin)
//.attr('cy', d => deathScale(d.total))
.attr('r', 3)
.attr('opacity', 0)
.attr('class', 'deathCircles')
.attr('pointer-events', 'none')
.attr('fill', d => d3.interpolateBlues(changeScale(d.cases)));
//.attr('opacity', d => opacityScale(d.cases));
return svg.node();
}
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.
