Public
Edited
May 25, 2023
populationByPrefecture
Type Table, then Shift-Enter. Ctrl-space for more options.
addTooltips(
Plot.plot({
x: {label: "地级市"},
y: {
grid: true,
tickFormat: "s",
label: "↑ 人口数"
},
color: {scheme: "spectral", domain: genders, legend: true},
marks: [
Plot.barY(populationByPrefectureGender, {
x: "prefecture",
y: "population",
fill: "gender",
title: "population",
sort: {x: "y", reverse: true}
}),
Plot.ruleY([0])
]
})
)
chart = PieChart(populationByPrefecture, {
name: d => d["地区"],
value: d => d["合计"],
})
addTooltips(
Plot.plot({
projection: {
type: "albers",
rotate: [-110, 0],
domain: prefectures
},
marks: [
Plot.geo(prefectures, {
fill: p => prefectureToPopulation.get(p.properties.fullname),
title: p => `${p.properties.name} \n ${prefectureToPopulation.get(p.properties.fullname).toLocaleString()}`
})
],
margin: 20,
color: {
scheme: "reds", // Change color scheme
unknown: "#ddd", // Polygons with unknown values are gray
type: "linear", // Linear scale for color progression
legend: true, // Add the legend
tickFormat: "s",
label: "地区人口数", // Update legend label
}
})
)
addTooltips(
Plot.plot({
y: {
grid: true,
tickFormat: d => d + 1,
// nice: true,
label: "↑ 性别比(男:女)"
},
color: {scheme: "PiYg"},
marks: [
Plot.barY(populationByPrefecture, {
x: "地区",
y: d => d["性别比"] - 1,
fill: d => Math.sign(d["性别比"] - 1),
title: "性别比",
sort: {x: "y", reverse: true},
}),
Plot.ruleY([0])
]
})
)
populationByCounty
Type Table, then Shift-Enter. Ctrl-space for more options.
addTooltips(
Plot.plot({
projection: {
type: "albers",
rotate: [-110, 0],
domain: prefectures
},
marks: [
counties.map(county => Plot.geo(county, {
fill: p => countyToPopulation.get(p.properties.fullname),
title: p => {
let name = p.properties.fullname
return `${name} \n ${countyToPopulation.get(name).toLocaleString()}`
}
})),
Plot.geo(prefectures),
],
margin: 20,
color: {
scheme: "reds", // Change color scheme
unknown: "#ddd", // Polygons with unknown values are gray
type: "linear", // Linear scale for color progression
legend: true, // Add the legend
tickFormat: "s",
label: "地区人口数", // Update legend label
}
})
)
prefectureWorkbook = FileAttachment("地级.xlsx").xlsx()
populationByPrefecture = prefectureWorkbook.sheet(0, { headers: true })
prefectureToPopulation = new Map(populationByPrefecture.map(({地区, 合计}) => [地区, 合计]))
totalPopulation = populationByPrefecture.reduce((acc, cur) => acc + cur["合计"], 0)
genders = ["男", "女"]
populationByPrefectureGender = genders.flatMap(gender => populationByPrefecture.map(d => ({prefecture: d.地区, gender, population: d[gender]})))
countyWorkbook = FileAttachment("县级.xlsx").xlsx()
populationByCounty = countyWorkbook.sheet(0, { headers: true })
countyToPopulation = new Map(populationByCounty.map(d => [d.地区, d.合计]))
zhejiang = d3.json("https://geojson.cn/api/data/330000.topo.json")
prefectures = topojson.feature(zhejiang, zhejiang.objects.default)
hangzhou = FileAttachment("330100_2020.json").json()
ningbo = FileAttachment("330200.topo.json").json()
wenzhou = FileAttachment("330300.topo.json").json()
jiaxing = FileAttachment("330400.topo.json").json()
huzhou = FileAttachment("330500.topo.json").json()
shaoxing = FileAttachment("330600.topo.json").json()
jinhua = FileAttachment("330700.topo.json").json()
quzhou = FileAttachment("330800.topo.json").json()
zhoushan = FileAttachment("330900.topo.json").json()
taizhou = FileAttachment("331000.topo.json").json()
lishui = FileAttachment("331100.topo.json").json()
counties = [hangzhou, ningbo, wenzhou, jiaxing, huzhou, shaoxing, jinhua, quzhou, zhoushan, taizhou, lishui].map(prefecture => prefecture.type === "Topology" ? topojson.feature(prefecture, prefecture.objects.default) : prefecture)
import {PieChart} from "@d3/pie-chart"
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
