Hello ObservableHello PolygonsHello TransformsHello AnimationHello Plot layout with HTML and CSSHello modern colour spacesHello Colour MixingHello custom marks with PlotHello Polygon MorphingHello Zoom-PanHello Zoomable Vega-Lite MapHello SketchyHello ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello LabellaHello function expressions
Hello VegaLite and Vega
vl
.markBar()
.data(data)
.encode(
vl.x().fieldT("Month"),
vl.y().fieldQ("NumberOfHires"),
vl.color().fieldQ("AvHireTime").scale({ scheme: "browns" })
)
.width(700)
.render()
vl
.markCircle({ fill: "hsl(20,50%,30%)" })
.data(data)
.encode(
vl.x().fieldQ("AvHireTime").scale({ zero: false }),
vl.y().fieldQ("NumberOfHires"),
vl.tooltip().fieldT("Month")
)
.render()
embed = require("vega-embed@6")
viewof view = embed({
width: 640,
data: { url: "https://gicentre.github.io/data/bicycleHiresLondon.json" },
encoding: {
x: { field: "Month", type: "temporal" },
y: { field: "AvHireTime", type: "quantitative" },
color: {
field: "NumberOfHires",
type: "quantitative",
scale: { scheme: "blues" }
}
},
mark: "bar"
})
viewof view2 = embed({
width: 420,
height: 670,
data: [
{
name: "centroids",
url:
"https://gicentre.github.io/data/uk/constituencySpacedCentroidsWithSpacers.csv",
format: { type: "csv", parse: "auto" },
transform: [
{
type: "geopoint",
projection: "projection",
fields: ["longitude", "latitude"]
},
{
type: "voronoi",
x: "x",
y: "y",
size: [{ signal: "width" }, { signal: "height" }]
}
]
}
],
projections: [
{
name: "projection",
type: "transverseMercator",
scale: 3700,
translate: [320, 3855]
}
],
scales: [{ name: "cScale", type: "ordinal", range: "category" }],
marks: [
{
type: "path",
from: { data: "centroids" },
encode: {
enter: {
path: { field: "path" },
fill: [
{ test: "datum.region == 0", value: "transparent" },
{ scale: "cScale", field: "region" }
]
}
}
}
]
})
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.
