Public
Edited
May 26, 2023
populationByPrefecture
Type Table, then Shift-Enter. Ctrl-space for more options.
addTooltips(
Plot.plot({
y: {
grid: true,
tickFormat: "s"
},
color: {scheme: "spectral", domain: genders, legend: true},
marks: [
Plot.barY(populationByPrefectureGender, {
x: "district",
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: "Population", // Update legend label
}
})
)
addTooltips(
Plot.plot({
y: {
grid: true,
tickFormat: d => d + 1,
label: "↑ Male/Female Ratio"
},
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: "Population", // Update legend label
}
})
)
import {addTooltips} from "@mkfreeman/plot-tooltip"
import {PieChart} from "@d3/pie-chart"
workbook = FileAttachment("人口普查.xlsx").xlsx()
populationByPrefecture = workbook.sheet("地级", { headers: true })
genders = ["男", "女"]
populationByPrefectureGender = genders.flatMap(gender => populationByPrefecture.map(d => ({district: d.地区, gender, population: d[gender]})))
prefectureToPopulation = new Map(populationByPrefecture.map(({地区, 合计}) => [地区, 合计]))
populationByCounty = workbook.sheet("县级", { headers: true })
countyToPopulation = new Map(populationByCounty.map(d => [d.地区, d.合计]))
shandong = d3.json("https://geojson.cn/api/data/370000.topo.json")
prefectures = topojson.feature(shandong, shandong.objects.default)
济南 = FileAttachment("370100.topo.json").json()
青岛 = FileAttachment("370200.topo.json").json()
淄博 = FileAttachment("370300.topo.json").json()
枣庄 = FileAttachment("370400.topo.json").json()
东营 = FileAttachment("370500.topo.json").json()
烟台 = FileAttachment("370600.topo.json").json()
潍坊 = FileAttachment("370700.topo.json").json()
济宁 = FileAttachment("370800.topo.json").json()
泰安 = FileAttachment("370900.topo.json").json()
威海 = FileAttachment("371000.topo.json").json()
日照 = FileAttachment("371100.topo.json").json()
临沂 = FileAttachment("371300.topo.json").json()
德州 = FileAttachment("371400.topo.json").json()
聊城 = FileAttachment("371500.topo.json").json()
滨州 = FileAttachment("371600.topo.json").json()
菏泽 = FileAttachment("371700.topo.json").json()
counties = [济南, 青岛, 淄博, 枣庄, 东营, 烟台, 潍坊, 济宁, 泰安, 威海, 日照, 临沂, 德州, 聊城, 滨州, 菏泽].map(prefecture => topojson.feature(prefecture, prefecture.objects.default))
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.
