Published
Edited
Nov 16, 2021
2 stars
final_plot = {
const brush = vl.selectInterval().encodings('x').resolve('intersect');
const selection = vl.selectPoint('Select')
.fields("type_1")
.bind('legend');
const legend = vl.selectPoint()
.fields('type_1')
.bind('legend');
// Goal: bind the checkbox input to the main chart to filter by multiple generations
const gen = vl.selectPoint('Select')
.fields("generation")
.bind(viewof checkboxes);
const brushAndSelect = vl.and(selection, gen, legend);
return vl.markCircle()
.data(pokemon_data)
.transform(
vl.filter(brushAndSelect),
vl.calculate('datum.name').as('Name'),
vl.calculate('datum.species').as('Species'),
vl.calculate('datum.total_points').as('Base Stat Total'),
vl.calculate('datum.speed').as('Speed'),
vl.calculate('datum.hp').as('HP'),
vl.calculate('datum.attack').as('Attack'),
vl.calculate('datum.defense').as('Defense'))
.params(gen, legend)
.encode(
vl.color().if(brushAndSelect, vl.color().fieldN('type_1').scale({domain: types, range: ['#aab70d', '#6e5948', '#6e3df9', '#fbce1a', '#e89aab', '#b93321', '#e98124', '#a691f2', '#6e5999', '#82c74c', '#ddc064', '#9fd8d9', '#a8a877', '#9b43a1', '#ef5b86', '#b6a031', '#b8b8d1', '#6d91f2']}).legend({orient: 'right'}).title('Type')),
vl.x().fieldQ(vl.repeat('column')).scale({type: 'linear', domain: [0, 300]}).axis({tickCount: 5}),
vl.y().fieldQ(vl.repeat('row')).scale({type: 'linear', domain: [0, 300]}).axis({tickCount: 5}),
vl.tooltip(['Name', 'Species', 'HP', 'Attack', 'Defense', 'Speed']),
)
.width(150)
.height(150)
.repeat({
column: ['HP', 'Attack', 'Defense', 'Speed'],
row: ['Speed', 'Defense', 'Attack', 'HP']
})
.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.
