Public
Edited
Dec 20, 2023
14 stars
{
button;
return g2({
type: "timingKeyframe",
direction: "alternate",
iterationCount: 2,
width,
children: keyframes.map((plot) => plot(data))
});
}
keyframes = [
facetLine,
facetArea,
stackArea,
layerArea,
streamgraph,
normalizeArea,
normalizeBar,
groupBar,
stackBar,
bar,
pie,
rose
]
facetLine = (data) => ({
type: "facetRect",
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
data,
encode: { y: "symbol" },
axis: { y: { title: false } },
children: [
{
type: "line",
key: "line",
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
frame: false,
scale: { y: { zero: true, tickCount: 3 } },
axis: { x: { title: false }, y: { title: false } },
animate: { enter: { type: "pathIn" } },
style: { shape: "smooth" },
tooltip: false
}
]
})
facetArea = (data) => ({
type: "facetRect",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
encode: { y: "symbol" },
axis: { y: { title: false } },
children: [
{
type: "line",
key: "line",
frame: false,
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { shape: "smooth" },
axis: { x: { title: false }, y: { title: false } },
scale: { y: { zero: true, facet: false, tickCount: 3 } },
tooltip: false
},
{
type: "area",
key: "area",
class: "area",
frame: false,
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { shape: "smooth" },
scale: { y: { facet: false, zero: true, tickCount: 3 } },
axis: { x: { title: false }, y: { title: false } },
animate: { exit: { type: "fadeOut" } },
tooltip: false
}
]
})
stackArea = (data) => ({
type: "area",
data,
width,
key: "area",
class: "area",
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
transform: [{ type: "stackY", reverse: true }],
axis: { y: { title: false } },
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { shape: "smooth" },
tooltip: false
})
layerArea = (data) => ({
type: "area",
key: "area",
class: "area",
width,
data,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
axis: { y: { title: false } },
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { fillOpacity: 0.5, shape: "smooth" },
tooltip: false
})
streamgraph = (data) => ({
type: "area",
key: "area",
class: "area",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
axis: { y: { title: false } },
transform: [{ type: "stackY", reverse: true }, { type: "symmetryY" }],
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { fillOpacity: 1, shape: "smooth" },
tooltip: false
})
normalizeArea = (data) => ({
type: "area",
key: "area",
class: "area",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
axis: { y: { title: false } },
transform: [{ type: "stackY", reverse: true }, { type: "normalizeY" }],
encode: {
x: (d) => new Date(d.date),
y: "price",
color: "symbol",
key: "symbol"
},
style: { fillOpacity: 1, shape: "smooth" },
tooltip: false
})
normalizeBar = (data) => ({
type: "interval",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
encode: {
y: "price",
color: "symbol",
key: "symbol"
},
transform: [
{ type: "groupColor", y: "sum" },
{ type: "stackY", reverse: true },
{ type: "normalizeY" }
],
scale: { x: { padding: 0 } },
axis: { y: { title: false }, x: { title: false } },
tooltip: false
})
groupBar = (data) => ({
type: "interval",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
transform: [{ type: "dodgeX" }],
encode: {
x: "date",
y: "price",
color: "symbol",
groupKey: "symbol",
key: (_, i) => i
},
scale: { y: { nice: true } },
axis: { x: false, y: { title: false } },
tooltip: false
})
stackBar = (data) => ({
type: "interval",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
transform: [{ type: "stackY" }],
encode: {
x: "date",
y: "price",
color: "symbol",
groupKey: "symbol",
key: (_, i) => i
},
axis: { x: false, y: { title: false } },
tooltip: false
})
bar = (data) => ({
type: "interval",
data,
width,
paddingLeft: 40,
paddingBottom: 20,
paddingRight: 50,
transform: [{ type: "groupX", y: "sum" }],
encode: {
x: "symbol",
y: "price",
color: "symbol",
key: "symbol"
},
axis: {
y: { labelFormatter: "~s", title: false },
x: { title: false }
},
tooltip: false
})
pie = (data) => ({
type: "interval",
width,
paddingLeft: 5,
paddingRight: 5,
paddingBottom: 5,
data,
transform: [{ type: "groupX", y: "sum" }, { type: "stackY" }],
coordinate: { type: "theta" },
encode: {
y: "price",
color: "symbol",
key: "symbol"
},
legend: { color: { layout: { justifyContent: "center" } } },
style: { radius: 10 },
tooltip: false
})
rose = (data) => ({
type: "interval",
data,
width,
paddingLeft: 5,
paddingRight: 5,
paddingBottom: 5,
transform: [{ type: "groupX", y: "sum" }],
coordinate: { type: "polar" },
encode: {
x: "symbol",
y: "price",
color: "symbol",
key: "symbol"
},
scale: { x: { padding: 0 } },
style: { radius: 10 },
legend: { color: { layout: { justifyContent: "center" } } },
axis: { y: false },
tooltip: false
})
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.