world = (await require('vega-datasets@2'))['world-110m.json'].url
map = vl.layer(
// use the sphere of the Earth as the base layer
vl.markGeoshape({ fill: '#e6f3ff' })
.data(vl.sphere()),
// add a graticule for geographic reference lines
vl.markGeoshape({ stroke: '#ffffff', strokeWidth: 1 })
.data(vl.graticule()),
// and then the countries of the world
vl.markGeoshape({ fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5 })
.data(vl.topojson(world).feature('countries'))
)
.width(900).height(500)
.config({ view: { stroke: null } }) // no chart border lines
map.project(vl.projection('equalEarth')).render()
viewof scale_direct = Range([1, 500], { value: 160, step: 1 })
viewof angle_direct = Range([-360, 360], { value: 0, step: 1 })
// define a map projection, with scale and angle provided by the inputs above
map.project(
vl.projection('equalEarth').scale(scale_direct).rotate([angle_direct, 0, 0])
)
.render()
// define internal parameters for scale and angle, referenced using expressions
// bind both parameters to internally generated slider inputs
map.params(
vl.param('scale').value(160).bind(vl.slider(1, 500, 1)),
vl.param('angle').value(0).bind(vl.slider(-360, 360, 1))
)
.project(
vl.projection('equalEarth').scale(vl.expr('scale')).rotate(vl.expr('[angle, 0, 0]'))
)
.render()
viewof scale = Range([1, 500], { value: 160, step: 1 })
viewof angle = Range([-360, 360], { value: 0, step: 1 })
map.params(
vl.param('scale').bind(viewof scale),
vl.param('angle').bind(viewof angle)
)
.project(
vl.projection('equalEarth').scale(vl.expr('scale')).rotate(vl.expr('[angle, 0, 0]'))
)
.render()
vl.render({ spec: spec })
spec = ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"layer": [
{
"mark": { "type": "geoshape", "fill": "#e6f3ff" },
"data": { "sphere": {} }
},
{
"mark": {"type": "geoshape", "stroke": "#ffffff", "strokeWidth": 1 },
"data":{ "graticule": {} }
},
{
"mark": { "type": "geoshape", "fill": "#2a1d0c", "stroke": "#706545", "strokeWidth": 0.5 },
"data": {
"url": world,
"format": { "type": "topojson", "feature": "countries" }
}
}
],
"width": 900,
"height": 500,
"config": {
"view": { "stroke": null }
},
"params": [
{ "name": "scale", "bind": { "element": viewof scale } },
{ "name": "angle", "bind": { "element": viewof angle } }
],
"projection": {
"type": "equalEarth",
"scale": { "expr": "scale" },
"rotate": { "expr": "[angle, 0, 0]" }
}
})
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.
