Crafting Visual Stories with Data.
Public
Edited
Nov 19, 2021
petals = ({
p1: "M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0",
p2: "M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0",
p3: "M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0",
p4: "M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0",
p5: "M0 100 C50 50 50 100 0 0 C-50 100 -50 50 0 100"
})
shapeSpec = ({
width: { step: 100 },
title: "Custom Shape Paths",
data: { values: [1, 2, 3, 4, 5] },
mark: { type: "point", size: 2 },
encoding: {
x: { field: "data", type: "nominal" },
shape: {
field: "data",
type: "nominal",
scale: { range: Object.values(petals) }
}
},
config: theme
})
icons = [
{ name: "apple", icon: "https://amitkaps.com/ixd20/icons/apple.svg" },
{ name: "nuts", icon: "https://amitkaps.com/ixd20/icons/nuts.svg" },
{ name: "orange", icon: "https://amitkaps.com/ixd20/icons/orange.svg" },
{ name: "fish", icon: "https://amitkaps.com/ixd20/icons/fish.svg" },
{ name: "mushroom", icon: "https://amitkaps.com/ixd20/icons/mushroom.svg" }
]
vegaEmbed(iconSpec, { renderer: "svg" })
iconSpec = ({
width: { step: 100 },
height: 72,
title: "Icons as Image Marks",
data: { values: icons },
mark: { type: "image" },
encoding: {
x: { field: "name", type: "nominal" },
url: { field: "icon", type: "nominal" }
},
config: theme
})
fillGradientSpec = ({
width: { step: 100 },
title: "Fill Radial Gradient",
data: { values: [1, 2, 3, 4, 5] },
mark: {
type: "point",
size: 2,
stroke: null,
fill: {
gradient: "radial",
stops: [
{ offset: 0.0, color: "crimson" },
{ offset: 1.0, color: "mediumblue" }
]
}
},
encoding: {
x: { field: "data", type: "nominal" },
shape: {
field: "data",
type: "nominal",
scale: { range: Object.values(petals) }
}
},
config: theme
})
vegaEmbed(strokeGradientSpec)
strokeGradientSpec = ({
width: { step: 100 },
title: "Stroke Linear Gradient",
data: { values: [1, 2, 3, 4, 5] },
mark: {
type: "point",
size: 2,
stroke: {
gradient: "linear",
stops: [
{ offset: 0.0, color: "red" },
{ offset: 1.0, color: "blue" }
]
}
},
encoding: {
x: { field: "data", type: "nominal" },
shape: {
field: "data",
type: "nominal",
scale: { range: Object.values(petals) }
}
},
config: theme
})
<svg width="50" height="50">
<!-- This is a pattern -->
<pattern id="texture" patternUnits="userSpaceOnUse" width="3" height="3" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="3" stroke="blue" stroke-width="1" />
</pattern>
<!-- Applied to this Rectangle -->
<rect width="40" height="40" x="10" y="10" style="fill:url(#texture);" />
</svg>
vegaEmbed(patternSpec, { renderer: "svg" })
patternSpec = ({
width: { step: 100 },
title: "Fill Pattern using Url",
data: { values: [1, 2, 3, 4, 5] },
mark: {
type: "point",
size: 2,
stroke: null,
fill: "url(#texture)"
},
encoding: {
x: { field: "data", type: "nominal" },
shape: {
field: "data",
type: "nominal",
scale: { range: Object.values(petals) }
}
},
config: theme
})
vegaEmbed = require("vega-embed")
theme = ({
// Default Theme for the Visualisation
padding: { top: 30, bottom: 30, right: 20, left: 20 },
font: "ui-monospace, menlo, consolas, monospace",
title: { offset: 20, fontWeight: 500 },
view: { stroke: null, fill: null },
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.
