Public
Edited
Oct 8, 2024
3 forks
13 stars
g2({
type: "point",
data,
height: 120,
encode: { x: "height" },
style: { shape: "point", fillOpacity: 0.2 },
tooltip: { title: "name" }
})
g2({
type: "boxplot",
data,
coordinate: { transform: [{ type: "transpose" }] },
height: 120,
encode: { y: "height" }
})
g2({
type: "view",
width: 800,
data: data.filter((d) => d.height !== 0.8 && d.height !== null),
height: new Set(data.map((d) => d.sport)).size * 20,
coordinate: { transform: [{ type: "transpose" }] },
encode: {
x: "sport",
y: "height"
},
scale: { y: { nice: true } },
axis: { y: { title: "height" } },
children: [
{
type: "link",
encode: { y1: "height" },
transform: [{ type: "groupX", y: "min", y1: "max" }],
style: { strokeOpacity: 0.4, stroke: "black" },
tooltip: null
},
{
type: "point",
encode: { color: "gender" },
transform: [{ type: "sortX", by: "y", reducer: "median", reverse: true }],
style: { shape: "point", fillOpacity: 0.2 }
}
]
})
g2({
type: "interval",
width,
data,
encode: { x: "nation", color: "gender" },
transform: [
{ type: "groupX", y: "count" },
{ type: "stackY", orderBy: "series" },
{ type: "sortX", by: "y", reverse: true }
],
scale: { y: { nice: true } },
tooltip: { title: "nation" }
})
g2({
type: "interval",
data,
width,
height: 20 * new Set(data.map((d) => d.dis)).size,
coordinate: { transform: [{ type: "transpose" }] },
encode: {
x: "sport",
color: "gender",
y: (d) => (d.gender === "男" ? 1 : -1)
},
transform: [
{ type: "groupX", y: "sum" },
{
type: "sortX",
by: "y",
reverse: true,
reducer: (I, V) => d3.sum(I, (i) => Math.abs(V[i]))
}
],
scale: { y: { nice: true } },
axis: {
y: {
title: "← female · male →",
labelFormatter: (d) => `${Math.abs(+d)}`
}
},
tooltip: {
title: "sport",
items: [{ channel: "y", valueFormatter: Math.abs }]
},
})
g2({
type: "rect",
width: 800,
data: data.filter((d) => {
const year = new Date(d.birthday).getFullYear();
return year !== 1900 && year < 2020;
}),
encode: {
x: (d) => new Date(d.birthday).getFullYear(),
color: "gender"
},
transform: [
{ type: "binX", y: "count" },
{ type: "stackY", orderBy: "series" }
],
style: { inset: 0.5 },
axis: { x: { title: "birthyear", tickCount: 20 } },
tooltip: {
items: [
(d, i, data, column) => ({
name: "count",
value: column.y.value[i] - column.y1.value[i]
})
]
}
})
g2({
type: "view",
width: 800,
data: data.filter((d) => {
const year = new Date(d.birthday).getFullYear();
return year !== 1900 && year < 2020;
}),
interaction: {
tooltip: {
groupName: false,
sort: (d) => ["金牌", "银牌", "铜牌", "无牌", "获奖率"].indexOf(d.name)
}
},
children: [
{
type: "rect",
encode: {
x: (d) => new Date(d.birthday).getFullYear(),
color: (d) =>
d.gold !== 0
? "金牌"
: d.silver !== 0
? "银牌"
: d.bronze !== 0
? "铜牌"
: "无牌"
},
transform: [
{ type: "binX", y: "count" },
{ type: "stackY", orderBy: "value" }
],
scale: {
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
style: { inset: 0.5 },
axis: { x: { title: "birthyear", tickCount: 20 } },
tooltip: {
items: [
(d, i, data, column) => ({
name: column.color.value[i],
value: column.y.value[i] - column.y1.value[i]
})
]
}
},
{
type: "line",
encode: {
x: (d) => new Date(d.birthday).getFullYear(),
y: (d) => !!(d.gold + d.silver + d.bronze),
shape: "smooth"
},
transform: [
{
type: "binX",
y: (I, V) => I.filter((i) => V[i]).length / I.length
},
{ type: "sortX", ordinal: false }
],
style: { stroke: "#000" },
scale: { y: { independent: true, nice: true } },
axis: {
y: {
position: "right",
labelFormatter: ".0%",
grid: false,
title: "rate"
}
},
tooltip: {
title: null,
items: [{ channel: "y", valueFormatter: ".0%", name: "获奖率" }]
}
}
]
})
g2({
type: "view",
width: 800,
coordinate: { transform: [{ type: "transpose" }] },
children: [
{
type: "point",
data: data
.filter((d) => d.noc === "CHN")
.map((d) => ({
...d,
medal:
d.gold !== 0
? "金牌"
: d.silver !== 0
? "银牌"
: d.bronze !== 0
? "铜牌"
: "无牌"
})),
encode: {
x: "age",
y: (d) => (d.gender === "男" ? 1 : -1),
color: "medal",
shape: "point"
},
scale: {
x: { nice: true },
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
axis: {
y: {
title: "← female · male →",
labelFormatter: (d) => `${Math.abs(+d)}`
}
},
transform: [
{
type: "stackY",
y1: "y",
orderBy: (d) => {
const medals = ["金牌", "银牌", "铜牌", "无牌"].reverse();
const index = medals.indexOf(d.medal);
return d.gender === "男" ? index : -index;
}
}
],
tooltip: {
title: "name",
items: [
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "age" }
]
}
},
{ type: "lineY", data: [0], style: { stroke: "black" } }
]
})
g2({
type: "cell",
width: 1100,
height: 1000,
data,
encode: {
x: "sport",
y: "nation",
color: (d) => d.gold + d.silver + d.bronze
},
transform: [
{ type: "group", color: "sum" },
{ type: "sortY", by: "color", reverse: true },
{ type: "sortX", by: "color", reverse: true }
],
scale: { color: { relations: [[0, "#eee"]], palette: "puRd" } },
style: { inset: 0.5 }
})
g2({
paddingRight: 16,
type: "view",
encode: {
x: 1,
y: (d) => (d.gold + d.silver + d.bronze === 0 ? 0 : 1),
series: "nation"
},
transform: [{ type: "group", channels: "series", x: "sum", y: "sum" }],
scale: {
x: { nice: true },
y: { nice: true }
},
axis: {
x: { title: "number of participants" },
y: { title: "number of winners" }
},
children: [
{
type: "link",
data: [2 / 3, 1 / 3],
encode: {
x: [0, 1000],
y: [0, (d) => d * 1000],
series: (d, idx) => idx
},
style: { stroke: "#777" },
labels: [
{
position: "top-right",
text: (v) => `${v.toFixed(2) * 100}%`,
dx: 4,
textAlign: "start",
textBaseline: "middle",
fontSize: 10
}
],
tooltip: false
},
{
type: "link",
data,
encode: { x1: 0, y1: 0 },
style: { stroke: "#eee" }
},
{
type: "point",
data,
labels: [
{
text: "nation",
dy: 8,
fontSize: 10,
transform: [{ type: "overlapHide" }]
}
]
}
]
})
g2({
type: "facetRect",
width: 1000,
height: 380,
paddingLeft: 50,
paddingBottom: 50,
data: data
.filter((d) => d.noc === "CHN")
.map((d) => ({
...d,
medal:
d.gold !== 0
? "金牌"
: d.silver !== 0
? "银牌"
: d.bronze !== 0
? "铜牌"
: "无牌"
})),
encode: { x: "medal" },
scale: { x: { domain: ["金牌", "银牌", "铜牌", "无牌"] } },
children: [
{
type: "rect",
encode: { x: "height", color: "gender" },
transform: [
{ type: "binX", y: "count" },
{ type: "stackY", orderBy: "series" }
],
style: { insetLeft: 0.5 },
tooltip: {
items: [
(d, i, data, column) => ({
name: "count",
value: column.y.value[i] - column.y1.value[i]
})
]
}
}
]
})
g2({
type: "facetRect",
width: 800,
// height: 560,
paddingLeft: 50,
paddingBottom: 50,
data: data
.filter((d) => d.noc === "CHN")
.map((d) => ({
...d,
medal:
d.gold !== 0
? "金牌"
: d.silver !== 0
? "银牌"
: d.bronze !== 0
? "铜牌"
: "无牌"
})),
encode: {
x: "medal",
y: "gender"
},
scale: {
x: { domain: ["金牌", "银牌", "铜牌", "无牌"] },
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
children: [
{
type: "view",
children: [
{
type: "rect",
encode: { x: "age", color: "medal" },
transform: [{ type: "binX", y: "count" }],
scale: {
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
style: { insetLeft: 0.5 }
},
{
type: "lineX",
encode: { x: "age" },
transform: [{ type: "groupColor", x: "median" }],
style: {
stroke: "#F4664A",
strokeOpacity: 1,
lineWidth: 2,
lineDash: [4, 4]
},
labels: [
{
text: "age",
position: "top",
textBaseline: "top",
textAlign: "start",
dx: 5,
dy: 5,
stroke: "white",
strokeWidth: 2
}
]
}
]
}
]
})
g2({
type: "facetRect",
height: 320,
width: 800,
paddingLeft: 5,
paddingBottom: 50,
data: data
.filter((d) => d.noc === "CHN")
.map((d) => ({
...d,
medal:
d.gold !== 0
? "金牌"
: d.silver !== 0
? "银牌"
: d.bronze !== 0
? "铜牌"
: "无牌"
})),
encode: { y: "medal" },
scale: {
y: { domain: ["金牌", "银牌", "铜牌", "无牌"] },
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
children: [
{
type: "view",
scale: {
color: {
domain: ["金牌", "银牌", "铜牌", "无牌"],
range: ["#F6BD16", "#5D7092", "#CE8032", "#eee"]
}
},
children: [
{
type: "lineX",
data: {
transform: [{ type: "filter", callback: (d) => d.gender === "男" }]
},
encode: { x: "age" },
transform: [{ type: "selectX", selector: "min" }],
style: { stroke: "grey", strokeWidth: 3, strokeOpacity: 1 }
},
{
type: "lineX",
encode: { x: "age" },
data: {
transform: [{ type: "filter", callback: (d) => d.gender === "男" }]
},
transform: [{ type: "selectX", selector: "max" }],
style: { stroke: "grey", strokeWidth: 3, strokeOpacity: 1 }
},
{
type: "lineX",
encode: { x: "age", color: "medal" },
data: {
transform: [{ type: "filter", callback: (d) => d.gender === "女" }]
},
transform: [{ type: "selectX", selector: "median" }],
style: { strokeWidth: 3, strokeOpacity: 1 }
},
{
type: "point",
data: {
transform: [{ type: "filter", callback: (d) => d.gender === "男" }]
},
encode: { x: "age", size: 2 },
style: { shape: "point", fill: "grey" }
},
{
type: "point",
data: {
transform: [{ type: "filter", callback: (d) => d.gender === "女" }]
},
encode: { x: "age", color: "medal", size: 3 },
style: { shape: "point" }
}
]
}
]
})
g2({
type: "interval",
height: 400,
data: data.sort((a, b) => b.gold - a.gold).slice(0, 10),
encode: {
x: "name",
y: "gold",
color: "sport"
},
axis: {
x: { labelFormatter: (d) => (d.length > 5 ? d.slice(0, 5) + "..." : d) }
}
})
g2({
type: "wordCloud",
padding: 0,
data: data.filter((d) => d.noc === "CHN"),
encode: {
text: "name",
value: "gold",
color: "sport"
},
legend: { color: false },
layout: { fontSize: [5, 50] },
style: { textBaseline: "middle" }
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.