Public
Edited
May 3, 2023
total
Type Table, then Shift-Enter. Ctrl-space for more options.
data
X
year
Y
general revenue percentage
Color
company
Size
—
Facet X
segment_type
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
width: 1200,
height: 299,
color: {
legend: true,
domain: ["0855.HK", "0371.HK"],
range: ["#FFD966", "#E0E0E1"]
},
grid: true,
facet: {
data,
x: "segment_type"
},
marks: [
Plot.line(data, {
x: "year",
y: "general revenue percentage",
stroke: "company",
strokeWidth: 3,
curve
}),
Plot.axisX({
tickSize: 0,
ticks: 3
}),
Plot.axisY({
tickSize: 0,
ticks: 6
})
// Plot.rect(
// data,
// Plot.selectLast({
// inset: -60,
// insetTop: -16,
// insetBottom: -16,
// rx: 15,
// fill: "pink",
// x: "year",
// y: "gross percentage",
// text: "gross percentage",
// frameAnchor: "bottom"
// })
// ),
// Plot.text(
// data,
// Plot.selectLast({
// x: "year",
// y: "gross percentage",
// text: "gross percentage",
// fill: "black",
// lineAnchor: "middle"
// })
// )
]
})
total
Type Table, then Shift-Enter. Ctrl-space for more options.
profit
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
width: 1200,
height: 299,
color: {
legend: true,
domain: ["0855.HK", "0371.HK"],
range: ["#FFD966", "#E0E0E1"]
},
grid: true,
// facet: {
// profitData,
// x: "segment_type"
// },
x: {},
marks: [
Plot.line(profitData, {
x: "year",
y: "gross profit growth",
// z: "segment_type",
stroke: "company",
fx: "segment_type",
strokeWidth: 3,
curve
}),
Plot.axisX({
tickSize: 0,
ticks: 2
}),
Plot.axisY({
tickSize: 0,
ticks: 6
})
]
})
penguins
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.
