Hello ObservableHello PolygonsHello TransformsHello AnimationHello Plot layout with HTML and CSSHello modern colour spacesHello Colour MixingHello custom marks with PlotHello Polygon MorphingHello Zoom-PanHello VegaLite and VegaHello SketchyHello ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello LabellaHello function expressions
Hello Zoomable Vega-Lite Map
countryData = d3.json(
"https://gicentre.github.io/data/geoTutorials/world-110m.json"
)
map = vl
.layer(
vl.markGeoshape({ fill: "rgb(204,206,186)" }).data(vl.sphere()),
vl
.markGeoshape({
fill: "rgb(235,219,181)",
stroke: "rgb(216,148,112)",
strokeWidth: 0.2
})
.data(vl.topojson(countryData).feature("countries1")),
vl.markGeoshape({ stroke: "grey", strokeWidth: 0.2 }).data(vl.graticule())
)
.width(640)
.height(320)
map
.params(
vl.param("zoom").value(1400).bind(vl.slider(110, 2000, 5)),
vl.param("cLng").value(5).bind(vl.slider(-180, 180).name("centre λ")),
vl.param("cLat").value(53).bind(vl.slider(-90, 90).name("centre 𝜙"))
)
.project(
vl
.projection("EqualEarth")
.scale(vl.expr("zoom"))
.center(vl.expr("[cLng,cLat]"))
)
.render({ renderer: "svg" })
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.
