Published
Edited
Oct 31, 2021
6 stars
Insert cell
Insert cell
vl
.markCircle({ size: 1, opacity: 0.5, color: "#cbff3d" })
.data(cityTrees)
.encode(
vl.longitude().fieldQ("lon"),
vl.latitude().fieldQ("lat"),
vl.color().fieldN("commonName"),
vl
.size()
.fieldQ("heightRange")
.scale({ range: [1, 10] })
.legend(null)
)
.project(vl.projection("albersUsa"))
.width(width)
.height(width * (500 / 900))
.config({ background: "black", padding: 0, border: "none" })
.render()
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more