Published
Edited
Sep 6, 2020
2 stars
Insert cell
md`# Explicitly Setting Colors With Vega Lite API`
Insert cell
data = [
{ count: 10, color: '#ff0000', name: 'Red', },
{ count: 20, color: '#0000ff', name: 'Blue', },
{ count: 30, color: '#00ff00', name: 'Green', },
]
Insert cell
vl.markBar()
.data(data)
.encode(
vl.y().fieldN('name'),
vl.color().fieldN('color'),
vl.x().fieldQ('count')
)
.width(600)
.render()
Insert cell
import { vl } from "@vega/vega-lite-api"
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