Published
Edited
Oct 17, 2019
1 fork
md`# Interaction with Vega-Lite`
import {vl} from '@vega/vega-lite-api'
import {printTable, uniqueValid} from '@uwdata/data-utilities'
datasets = require('vega-datasets')
gapminder = datasets['gapminder.json']()
gapminder2000 = gapminder.filter(d => d.year === 2000)
{
//const selection = vl.selectSingle();
//const selection = vl.selectMulti();
//const selection = vl.selectInterval();
const selection = vl.selectMulti().on('mouseover');
return vl.markCircle()
.data(gapminder2000)
.select(selection)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.color().if(selection, vl.fieldN('cluster')).value('grey'),
vl.opacity().if(selection, vl.value(1.0)).value(0.1)
)
.render()
}
movies = datasets['movies.json']()
printTable(movies.slice(0,10))
genres = uniqueValid(movies, d=> d.Major_Genre)
mpaa = uniqueValid(movies, d => d.MPAA_Rating)
{
const selectGenre = vl.selectSingle('Select')
.fields('Major_Genre', 'MPAA_Rating')
.init({Major_Genre: 'Drama', MPAA_Rating: 'R'})
.bind({Major_Genre: vl.menu(genres), MPAA_Rating: vl.radio(mpaa) });
//.nearest(true)
//.empty('none');
return vl.markCircle()
.data(movies)
.select(selectGenre)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.color().fieldN('Major_Genre'),
vl.opacity().if(selectGenre, vl.value(1.0)).value(0.05)
)
.render()
}
{
const brush = vl.selectInterval()
.encodings('x'); // limit selection to x-axis (year) values
const years = vl.markBar()
.data(movies)
.select(brush)
.encode(
vl.x().year('Release_Date'),
vl.y().count()
)
.width(600)
.height(50)
// ratings scatter plot
const ratings = vl.markCircle()
.data(movies)
.select(
vl.selectInterval().bind('scales').encodings('x')
)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.color().fieldN('Major_Genre'),
vl.opacity().if(brush, vl.value(1.0)).value(0.05)
)
.width(600)
.height(400);
return vl.vconcat(years, ratings).spacing(5).render()
}
{
const hover = vl.selectSingle()
.on('mouseover')
.nearest(true)
.empty('none');
const plot = vl.markCircle()
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
);
const base = plot.transform(
vl.filter(hover) // filter to our points in our hover selection
);
// mark properties
const halo = {size: 150, stroke: 'red', strokeWidth: 3};
const label = { align: 'right', fontSize: 20, fontWeight: 'bold' }
const white = { stroke: 'white', strokeWidth: 3 }
const everything =
vl.data(movies)
.layer(
plot.select(hover),
base.markPoint(halo),
base.markText(white, label).encode(vl.text().fieldN('Title')),
base.markText(label).encode(vl.text().fieldN('Title'))
)
return everything.render()
}
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.
