Published
Edited
Feb 4, 2020
1 fork
Insert cell
md`# Corona virus 2019 (WIP). Data taken from : https://github.com/globalcitizen/2019-wuhan-coronavirus-data/blob/master/data-sources/dxy/data/20200128-081800-dxy-2019ncov-data.csv`
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson")
Insert cell
chineseProvinces = d3.json("https://raw.githubusercontent.com/deldersveld/topojson/master/countries/china/china-provinces.json")
Insert cell
data = [
{"province":"Hubei", "confirmed_cases":1423, "died":76},
{"province":"Henan", "confirmed_cases":168, "died":1},
{"province":"Guangdong", "confirmed_cases":151, "died":0},
{"province":"Zhejiang", "confirmed_cases":128, "died":0},
{"province":"Chongqing", "confirmed_cases":110, "died":0},
{"province":"Hunan", "confirmed_cases":100, "died":0},
{"province":"Beijing", "confirmed_cases":80, "died":1},
{"province":"Shandong", "confirmed_cases":75, "died":0},
{"province":"Jiangxi", "confirmed_cases":72, "died":0},
{"province":"Anhui", "confirmed_cases":70, "died":0},
{"province":"Sichuan", "confirmed_cases":69, "died":0},
{"province":"Shanghai", "confirmed_cases":66, "died":1},
{"province":"Fujian", "confirmed_cases":59, "died":0},
{"province":"Guangxi", "confirmed_cases":51, "died":0},
{"province":"Jiangsu", "confirmed_cases":47, "died":0},
{"province":"Shaanxi", "confirmed_cases":35, "died":0},
{"province":"Hainan", "confirmed_cases":33, "died":1},
{"province":"Liaoning", "confirmed_cases":27, "died":0},
{"province":"Yunnan", "confirmed_cases":26, "died":0},
{"province":"Tianjin", "confirmed_cases":23, "died":0},
{"province":"Heilongjiang", "confirmed_cases":21, "died":1},
{"province":"Hebei", "confirmed_cases":18, "died":1},
{"province":"Gansu", "confirmed_cases":14, "died":0},
{"province":"Shanxi", "confirmed_cases":13, "died":0},
{"province":"Nei Mongol", "confirmed_cases":11, "died":0},
{"province":"Hong Kong", "confirmed_cases":8, "died":0},
{"province":"Guizhou", "confirmed_cases":7, "died":0},
{"province":"Ningxia Hui", "confirmed_cases":7, "died":0},
{"province":"Jilin", "confirmed_cases":6, "died":0},
{"province":"Macau", "confirmed_cases":6, "died":0},
{"province":"Qinghai", "confirmed_cases":6, "died":0},
{"province":"Taiwan", "confirmed_cases":5, "died":0},
{"province":"Xinjiang Uygur", "confirmed_cases":5, "died":0},
];
Insert cell
provinces_features = topojson.feature(chineseProvinces, chineseProvinces.objects.CHN_adm1).features;
Insert cell
html`<style>
path{
stroke:black;
}
</style>`
Insert cell
{
const height = 500;
const width = 1000;
const svg = DOM.svg(width, height);
const svgRef = d3.select(svg);
const colours = ["#FFA07A", "#FA8072", "#E9967A", "#F08080","#CD5C5C", "#DC143C","#B22222", "#8B0000", "#FF0000"];

const colour = d3.scaleQuantile()
.domain([0, 200])
.range(colours);
const mercator = d3.geoMercator()
.center([100,40])
.scale(550)
const path = d3.geoPath()
.projection(mercator)
const tip = svgRef
.append("g");
tip
.append("rect")
.attr("width", 200)
.attr("height",75)
.attr("fill", "teal")
.attr("stroke-width", 3)
.attr("opacity", 0)
svgRef
.selectAll("path")
.data(provinces_features)
.enter()
.append("path")
.classed("county", true)
.attr("d", path)
.attr("fill", d => {
const province = data.find(province => {
return province.province === d.properties.NAME_1;
});
if(province === undefined) return "#D3D3D3";
else return colour(province.confirmed_cases);
})
.on("mouseenter", (d) => {
const province = data.find(province => {
return province.province === d.properties.NAME_1;
});
tip.select("rect")
.transition()
.delay(300)
.attr("opacity", 1);
tip
.append("text")
.attr("x", 100)
.attr("y", 30)
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", 24)
.classed("province", true)
.text(d.properties.NAME_1)
tip
.append("text")
.attr("x", 100)
.attr("y", 60)
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", 24)
.classed("value", true)
.text(province.confirmed_cases)
})
.on("mouseout", (e) => {
tip.select("rect")
.attr("opacity", 0);
tip.select("text.value")
.remove();
tip.select("text.province")
.remove();
})
.on("mousemove", (e) => {
tip
.attr('x', d3.event.pageX + 'px')
.attr('y', d3.event.pageY + 'px')
})
return svg;
}
Insert cell

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.
Learn more