Public
Edited
Mar 14, 2023
Plot.plot({
y: {
grid: true,
inset: 6
},
marks: [
Plot.boxY(selectedData, {
x: (d) => `[${selectProvince}] ` + d.gender,
y: "birthYear",
stroke: "gender"
}),
Plot.boxY(data, {
x: (d) => "[ 全国 ] " + d.gender,
y: "birthYear",
stroke: "gender"
})
]
})
Plot.plot({
grid: { x: true, y: true },
color: {
legend: true
// scheme: "bupu",
// type: "symlog"
},
// facet: { data: data, x: "gender", marginRight: 90 },
marks: [
Plot.boxX(data, {
y: "province",
x: "birthYear",
stroke: "gender",
r: (d) => (d.gender === "男" ? 1 : 2)
}) //Plot.bin({ fill: "count" }, { x: "province", y: "ethnic" }))
]
})
Plot.plot({
grid: { x: true, y: true },
color: {
legend: true
// scheme: "bupu",
// type: "symlog"
},
marks: [
Plot.boxX(data, {
y: "ethnic",
x: "birthYear",
stroke: "gender",
r: (d) => (d.gender === "男" ? 1 : 2)
}) //Plot.bin({ fill: "count" }, { x: "province", y: "ethnic" }))
]
})
ethnics = {
const collection = new Array(...new Set(data.map((d) => d.ethnic)));
collection.reverse();
collection.push("--");
collection.reverse();
return collection;
}
provinces = {
const collection = new Array(...new Set(data.map((d) => d.province)));
collection.reverse();
collection.push("--");
collection.reverse();
return collection;
}
data = {
return dataWithBirthYear.map((d) => {
d.birthYear = d.birthYear < 1990 ? d.birthYear : undefined;
return d;
});
}
table-with-birthYear.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3")
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.
