Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
color = d3.scaleSequentialLog()
.domain([1, maxTotalCases])
.interpolator(d3.interpolateGreens);
maxTotalCases = provinceFeatures.reduce((accumulator, d) => {
accumulator = (accumulator < +d.properties.count
&& d.properties.count !== 'NA') ?
+d.properties.count :
accumulator;
return accumulator;
}, 0)
projection = d3.geoMercator()
.center([105, 43])
.scale([820]);
pathGenerator = d3.geoPath().projection(projection);
provinceFeatures = provinces.features;
provinceFeatures[0].geometry.coordinates[0][0][0]
starMap = FileAttachment("starMap@3.csv").csv()
provinces = {
const provinces = topojson.feature(provinceJson, provinceJson.objects.china_province_basemap);
provinceID.forEach(d => {
d.count = starMap.filter(s => s.Province === d.ID).length
});
provinces.features.forEach(d => {
Object.assign(d.properties, provinceID.filter(a => a.ID === d.properties.GbProv)[0])
});
return provinces;
}
provinceJson = FileAttachment("china_province_basemap.json").json()
cityJson = FileAttachment('china_city_basemap@1.json').json()
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.
