Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
{
const c = `rgb(255, 255, 255, 0.5)`;
return html`<style>
form output {
font-weight: bold;
font-size: 14px;
}
.wrapper {
text-align: center;
}
.italy {
text-anchor: middle;
font-family: sans-serif;
font-size: 10px;
margin: 0 auto;
}
.subunit {
fill: #f4f4f4;
stroke: #999;
stroke-width: 0.5;
}
.place {
fill: rgba(0,0,0,0.8);
stroke: none;
}
.place-label, .legend-title {
font-weight: bold;
font-size: 13px;
fill: rgba(0,0,0,0.8);
}
.place-label {
text-shadow: ${c} 1px 0px 0px, ${c} 0.540302px 0.841471px 0px, ${c} -0.416147px 0.909297px 0px, ${c} -0.989992px 0.14112px 0px, ${c} -0.653644px -0.756802px 0px, ${c} 0.283662px -0.958924px 0px, ${c} 0.96017px -0.279415px 0px;
}
.bubble, .legend-bubble {
stroke-width: 0.8;
stroke: rgba(0,0,0,0.3)
}
.bubble:hover {
stroke: rgba(0,0,0,0.6);
stroke-width: 1.2;
cursor: crosshair;
}
.legend text {
fill: #000;
}
.legend-bubble {
stroke: rgba(0,0,0,0.4);
}
.legend-title {
text-anchor: start;
}
</style>`;
}
legendRadii = [10, 500, 2000, 10000]
map.update(index)
w = Math.min(width, 700)
h = Math.round(w * 1.2)
maxLegend = Math.round(maxCases / magnitude) * magnitude
magnitude = toMagnitude(maxCases)
function toMagnitude(n) {
var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
return Math.pow(10, order);
}
mutable index = 0
{
mutable index = dates.indexOf(day);
}
radius = d3
.scaleSqrt()
.domain([0, maxCases])
.range([0, maxRadius])
colorScale = d3
.scaleSqrt()
.domain([0, maxCases])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])
delay = 100
maxCases = d3.max(recentData.map(d => +d.totale_casi))
data = responses.map(r => d3.csvParse(r))
breakpoint = 500
maxRadius = w > breakpoint ? 30 : 18
recentData = data[data.length - 1]
responses = Promise.all(urls.map(u => fetch(u))).then(responses =>
Promise.all(responses.filter(r => r.ok).map(r => r.text()))
)
csvs = Promise.all(urls.map(u => fetch(u).then(u => u.text())))
urls = dateStrings.map(d => baseUrl.replace("DATE", d))
baseUrl = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province-DATE.csv"
startDate = new Date("2020-02-24T11:00:00Z")
endDate = new Date("2020-06-25T11:00:00Z")
dateStrings = dates.map(
d =>
d
.toISOString()
.replace(/-/g, '')
.split("T")[0]
)
dates = dateRange(startDate, endDate)
function dateRange(start, end) {
const duration = 1000 * 60 * 60 * 24;
const dates = [];
let ms = start * 1;
while (ms < end * 1) {
dates.push(new Date(ms));
ms += duration;
}
return dates;
}
allProvinces = topojson.feature(italy, italy.objects.subunits)
provinces = ({
...allProvinces,
// Nix Pantelleria
features: allProvinces.features.filter(
f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36
)
})
places = topojson.feature(italy, italy.objects.places)
sFormat = d3.format(".1s")
numFormat = d3.format(",")
path = d3.geoPath().projection(projection)
projection = d3
.geoAlbers()
.rotate([-12.8, 0])
.parallels([40, 50])
.fitExtent([[0, 0], [w, h]], provinces)
italy = FileAttachment("italy2@1.json").json()
import { Scrubber } from "@mbostock/scrubber"
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
