Charts built with D3
Published
Edited
Jul 29, 2020
1 fork
md`# Covid19 Dashboard`
dataset = (await fetch("https://api.covid19api.com/summary").then((response)=>response.json())).Countries
map = FileAttachment("world-map.json").json()
path = d3.geoPath().projection(d3.geoEqualEarth().scale(150).translate([450, 200]))
paint = d3.scaleSequential([0, d3.max(dataset, (d)=>d.TotalConfirmed)], d3.interpolateBlues)
chart = {
let svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`)
svg.append("g")
.classed("world", true)
.selectAll("path.countries")
.data(map.features)
.join("path")
.classed("country", true)
.attr("d", path)
.attr("fill", (d, i)=>{
try{
return paint(dataset.find((b)=>b.CountryCode === d.properties.code).TotalConfirmed)
}catch(error){
return paint(0)
}
})
.attr("stroke", "lightgray")
.on("mouseenter", function(d, i){
d3.select(this).attr("stroke", "red")
})
.on("mouseleave", function(d, i){
d3.select(this).attr("stroke", "lightgray")
})
return svg.node()
}
function legend({width, height, dataset, title}){
let svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
let scaleColors = d3.scaleSequential([0, 10], d3.interpolateBlues);
let scale = d3.scaleBand(d3.ticks(0, d3.max(dataset), 5), [0, width]);
let axis = (g) => g.call(d3.axisBottom(scale).tickFormat(d3.format(","))).attr("transform", "translate(0, 50)");
svg.append("text").classed("title", true).attr("y", 20).text(title)
svg.append("g")
.classed("boxes", true)
.selectAll("rect.box")
.data(d3.range(0, 10))
.join("rect")
.classed("box", true)
.attr("y", 30)
.attr("x", (d,i)=>{
return i * 60;
})
.attr("width", 60)
.attr("height", 20)
.attr("fill", (d, i)=>{
return scaleColors(d);
})
svg.append("g")
.call(axis)
return svg.node();
}
legend({width:600, height:70,dataset:dataset.map((d)=>d.TotalConfirmed), title:"Total confirmed cases."})
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.
