Information design enthousiast based in Amsterdam. Don't hesitate to get in touch
Public
Edited
May 2, 2022
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 700]);
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "black");
svg.append("g")
.selectAll("path")
.data(topojson.feature(vr, vr.objects.veiligheidsregio_2021).features)
.join("path")
.attr("fill", "black")
.attr("stroke", "white")
.attr("stroke-width", 1.7)
.attr("d", path)
svg.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 1.7)
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(vr, vr.objects.veiligheidsregio_2021, (a, b) => a !== b)))
const footer = svg.append("text")
.attr("y", 630)
.attr("x", width/2)
.style('fill', 'white')
.style("font-size", "30px")
// .style('font-family', '"Assistant", sans-serif')
.style('font-weight', '1000')
.style("text-anchor", "middle")
.text("Stormschade Eunice");
const Title = svg.append("text")
.attr("y", 650)
.attr("x", width/2)
.style('fill', 'white')
.style("font-size", "12px")
.style("text-anchor", "middle")
// .style('font-family', '"Assistant", sans-serif')
.text("Stormschademeldingen verzonden via het p2000 netwerk");
// const time = svg.append("text")
// .attr("y", 250)
// .attr("x", 250)
// .style('fill', 'white')
// .style("font-size", "34px")
// .text(date.toLocaleTimeString("nl-NL"))
const g = svg.append("g")
.attr("fill", "red")
.attr('stroke-width', 7)
.attr("stroke-opacity", 0.3)
.attr("stroke", "red");
;
const dot = g.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${d})`);
let previousDate = -Infinity;
return Object.assign(svg.node(), {
update(date) {
const t = d3.transition()
.duration(200)
.ease(d3.easeLinear);
dot // enter
.filter(d => d.date.getTime() == date.getTime())
.transition(t)
.attr("r", 3);
dot // exit
.filter(d => d.date.getTime() !== date.getTime())
.transition(t)
.delay(200)
.attr("r", 0)
// .remove()
previousDate = date;
}
});
}
d3.utcMinute.every(1).range(...d3.extent(data, d => d.date))
update = chart.update(date)
DOM.download(
chart,
"face.webm", // optional file name
"Click to Download" // optional button label
)
data = (await FileAttachment("18_feb-4.csv").csv())
.map(d => {
const p = projection([d.lengtegraad, d.breedtegraad]);
p.date = parseDate(d.date.substring(0,16));
return p;
})
.sort((a, b) => a.date - b.date).filter(d => d.date >=new Date("2022-02-18T13:30Z") && d.date <= new Date("2022-02-19T06:00Z"))
parseDate = d3.utcParse("%Y-%m-%dT%H:%M")
projection = d3.geoMercator()
.center([4.1, 52.7])
.scale([width / 0.23]);
vr = fetch("https://cartomap.github.io/nl/wgs84/veiligheidsregio_2021.topojson").then(response => response.json())
path = d3.geoPath(projection)
topojson = require("topojson-client@3")
import {Scrubber} from "@mbostock/scrubber"
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.
