Published
Edited
Jun 29, 2020
4 forks
7 stars
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, 960, 700])
.style('background-color', '#fafafa');
svg.append('g')
.attr('transform', 'translate(20, 10)')
.append(() => legend({color,
title: 'Covid-19 Cases',
ticks: 4,
tickFormat: '.0s'}));
svg.append('g')
.selectAll('.cities')
.data(cityFeatures)
.join('path')
.attr('class', 'cities')
.attr('d', pathGenerator)
.attr('fill', d => {
let cases = d.properties.T_C_0621;
return cases === 'NA' || cases === undefined ?
'#636363' :
color(+cases);
})
.append('title')
.text(d => {
let cases = d.properties.T_C_0621;
return `${d.properties.City_EN} - ` +
(cases === undefined ? 'missing' : `${cases}`);
});
svg.append('g')
.selectAll('.provinces')
.data(provinceFeatures)
.join('path')
.attr('class', 'provinces')
.attr('d', pathGenerator)
.attr('fill', 'none')
.attr('stroke', 'white')
.attr('stroke-linejoin', 'round')
.attr('stroke-width', '0.7px');
return svg.node();
}
color = d3.scaleSequentialLog()
.domain([1, maxTotalCases])
.interpolator(d3.interpolateOranges);
maxTotalCases = cityFeatures.reduce((accumulator, d) => {
accumulator = (accumulator < +d.properties.T_C_0621
&& d.properties.T_C_0621 !== 'NA') ?
+d.properties.T_C_0621 :
accumulator;
return accumulator;
}, 0)
projection = d3.geoMercator()
.center([105, 43])
.scale([820]);
pathGenerator = d3.geoPath().projection(projection);
cityFeatures = cities.features;
provinceFeatures = topojson.feature(provinceJson, provinceJson.objects.china_province_basemap).features;
cities = d3.csv(csvDataUrl).then(csvData => {
const cities = topojson.feature(cityJson, cityJson.objects.china_city_basemap);
const rowByName = csvData.reduce((accumulator, d) => {
accumulator[d.City_EN] = d;
return accumulator;
}, {});
cities.features.forEach(d => {
Object.assign(d.properties, rowByName[d.properties.City_EN])
});
return cities;
})
provinceJson = FileAttachment('china_province_basemap@1.json').json()
cityJson = FileAttachment('china_city_basemap@1.json').json()
csvDataUrl = 'https://gist.githubusercontent.com/Z-Richard/a1085ade6a17ce2d263f6eef98fa6ee8/raw/6ee839ed0cbc960c9f590cd7c6a1aa02a814327b/confirmed-covid-cases-of-china-cities-0115-0621.csv'
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from '@d3/color-legend'
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.
