Published
Edited
Apr 29, 2022
6 forks
56 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
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>`;
}
Insert cell
legendRadii = [10, 500, 2000, 10000]
Insert cell
map.update(index)
Insert cell
w = Math.min(width, 700)
Insert cell
h = Math.round(w * 1.2)
Insert cell
maxLegend = Math.round(maxCases / magnitude) * magnitude
Insert cell
magnitude = toMagnitude(maxCases)
Insert cell
function toMagnitude(n) {
var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
return Math.pow(10, order);
}
Insert cell
mutable index = 0
Insert cell
{
mutable index = dates.indexOf(day);
}
Insert cell
radius = d3
.scaleSqrt()
.domain([0, maxCases])
.range([0, maxRadius])
Insert cell
colorScale = d3
.scaleSqrt()
.domain([0, maxCases])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])
Insert cell
delay = 100
Insert cell
maxCases = d3.max(recentData.map(d => +d.totale_casi))
Insert cell
data = responses.map(r => d3.csvParse(r))
Insert cell
breakpoint = 500
Insert cell
maxRadius = w > breakpoint ? 30 : 18
Insert cell
recentData = data[data.length - 1]
Insert cell
responses = Promise.all(urls.map(u => fetch(u))).then(responses =>
Promise.all(responses.filter(r => r.ok).map(r => r.text()))
)
Insert cell
csvs = Promise.all(urls.map(u => fetch(u).then(u => u.text())))
Insert cell
urls = dateStrings.map(d => baseUrl.replace("DATE", d))
Insert cell
baseUrl = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province-DATE.csv"
Insert cell
startDate = new Date("2020-02-24T11:00:00Z")
Insert cell
endDate = new Date("2020-06-25T11:00:00Z")
Insert cell
dateStrings = dates.map(
d =>
d
.toISOString()
.replace(/-/g, '')
.split("T")[0]
)
Insert cell
dates = dateRange(startDate, endDate)
Insert cell
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;
}
Insert cell
allProvinces = topojson.feature(italy, italy.objects.subunits)
Insert cell
provinces = ({
...allProvinces,
// Nix Pantelleria
features: allProvinces.features.filter(
f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36
)
})
Insert cell
places = topojson.feature(italy, italy.objects.places)
Insert cell
sFormat = d3.format(".1s")
Insert cell
numFormat = d3.format(",")
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
projection = d3
.geoAlbers()
.rotate([-12.8, 0])
.parallels([40, 50])
.fitExtent([[0, 0], [w, h]], provinces)
Insert cell
italy = FileAttachment("italy2@1.json").json()
Insert cell
import { Scrubber } from "@mbostock/scrubber"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more