Crafting Visual Stories with Data.
Public
Edited
Dec 10, 2021
1 star
glyph = ({
width: 100,
height: 100,
data: { values: dataPoint },
layer: [profitLayer, areasLayer, salesLayer],
config: theme
})
dataPoint = simple[0]
areasLayer = ({
layer: [
{
mark: {
type: "point",
shape: "circle",
size: 1000,
fillOpacity: 1,
strokeWidth: 3
}
},
{
mark: {
type: "point",
size: 300,
filled: false,
fillOpacity: 1,
strokeWidth: 3
},
encoding: {
shape: {
field: "areas",
type: "nominal",
scale: {
domain: ["North", "East", "West", "South", "Central"],
range: [
"triangle-up",
"triangle-right",
"triangle-left",
"triangle-down",
"circle"
]
}
}
}
}
]
})
salesLayer = ({
layer: [
{
mark: {
type: "point",
shape: "square",
filled: true,
xOffset: -20,
yOffset: -20,
strokeWidth: 1,
angle: 45,
color: "black"
},
encoding: {
size: {
field: "sales",
type: "quantitative",
scale: { minSize: 100 }
}
}
}
]
})
profitLayer = ({
layer: [
{
mark: {
type: "arc",
theta: 1.5,
theta2: 3.5,
color: "black",
radius: 25,
radius2: 20
},
encoding: {
color: {
field: "profit",
type: "quantitative",
scale: { range: ["#9d9d9d", "#353535"] }
}
}
}
]
})
rowGlyphs = ({
data: { values: simple },
title: "Row Based Glyphs Arrangement",
facet: {
column: {
field: "areas",
type: "nominal",
header: { title: null }
}
},
spec: {
width: 100,
height: 100,
layer: [profitLayer, areasLayer, salesLayer]
},
config: theme
})
xyGlyphs = ({
data: { values: simple },
padding: { left: 160, right: 160, top: 20 },
title: "Position Based Glyphs Arrangement",
width: 300,
height: 300,
encoding: {
x: { field: "posX" },
y: { field: "posY" }
},
layer: [profitLayer, areasLayer, salesLayer],
resolve: { scale: { theta: "dependent" } },
config: theme
})
simple = aq
.table({
areas: ["North", "East", "West", "South", "Central"],
sales: [5, 25, 20, 20, 15],
profit: [2, 8, 6, 5, 3],
posX: [2, 3, 1, 2, 2],
posY: [1, 2, 2, 3, 2]
})
.objects()
theme = ({
// Default Theme for the Visualisation
padding: { top: 30, bottom: 40, right: 20, left: 20 },
font: "ui-monospace, menlo, consolas, monospace",
background: "whitesmoke",
title: { offset: 20, anchor: "middle", align: "center" },
view: { stroke: null, fill: null },
point: { stroke: "black" },
header: { labelFontSize: 12 },
axis: {
domain: false,
ticks: false,
title: false,
labels: false
},
legend: { disable: true }
})
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.
