I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
chart = {
const brush = vl.selectInterval().resolve('global');
const base = vl.markCircle({tooltip: true})
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.color().value("gray").if(brush, vl.value("steelblue"))
)
.width(220)
.height(200);
const xBinned = vl.x().fieldQ('Rotten_Tomatoes_Rating').scale({domain:[0,100]}).bin(true);
const yBinned = vl.y().scale({domain:[0,10]}).fieldQ('IMDB_Rating').bin(true);
const baseBinned = base.encode(
xBinned,
yBinned,
);
return vl.concat(
base.select(brush).title("Raw data (drag to filter)"),
vl.layer(
baseBinned.encode(
vl.color().value("gray"),
vl.size().count()
),
baseBinned.transform(vl.filter(brush))
.encode(
vl.color().value("steelblue"),
vl.size().count()
)
).title("Density with circles"),
vl.layer(
baseBinned.markBar({tooltip: true}).encode(
vl.color().count(),
vl.opacity().value(0) // transparent bars to force scales to stay constant
),
baseBinned.transform(vl.filter(brush)).markBar().encode(
vl.color().count()
)
).title("Density with rectangles")
)
.data(movies)
.columns(3)
.render();
}
movies = (await require('vega-datasets@1'))['movies.json']()
import {vl} from "@vega/vega-lite-api"
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.
