md`# Choropleth Map of China`
// viewof height = slider({min: "150", max: 700, step:10, title: "height:"})
height = 600
md`## Utils`
// projection = d3.geoTransverseMercator().rotate([-110,0]).fitExtent([[65, 80], [width, height]], china_p);
// projection = d3.geoAzimuthalEqualArea()
// .rotate([-110, -40])
// .scale(height)
projection = d3.geoMercator()
.center([110, 40])
.scale([height]);
path = d3.geoPath(projection)
data = Object.assign(new Map(d3.csvParse(await FileAttachment("total@3.csv").text(), ({place, total}) => [place, +total])))
census_data = d3.csvParse(await FileAttachment("total@3.csv").text()).filter(d => d.place!=="全国")
china_p = topojson.feature(china_geo, china_geo.objects.China_adm)
md`## Library`
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-geo-projection@2")
import {legend} from "@mydu/color-legend"
import {slider, radio, text, select, color} from '@jashkenas/inputs'
scaleCluster = require("d3-scale-cluster")
md`## Reference
https://observablehq.com/@neocartocnrs/cheat-sheet-topojson
https://observablehq.com/@d3/color-legend
https://observablehq.com/@d3/quantile-quantize-and-threshold-scales
`
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.
