Public
Edited
Mar 10
import {vl} from "@vega/vega-lite-api-v5"
gun_deaths = FileAttachment("gun_deaths.csv").csv()
import {printTable} from '@uwdata/data-utilities'
printTable(gun_deaths.slice(0,10))
races = ['White','Black','Hispanic','Asian/Pacific Islander','Native American/Native Alaskan']
{
const brush = vl.selectInterval()
.encodings('x');
// const selection = vl.selectPoint('Selection')
// .fields('race')
// .bind(vl.menu(races));
const hover = vl.selectPoint('hover')
.encodings('x')
.on('mouseover')
.toggle(false)
.nearest(true);
const isHovered = hover.empty(false);
const plot1 = vl.markBar()
.data(gun_deaths)
.params(brush)
// .transform(
// vl.filter(selection)
// )
.encode(
vl.x().fieldQ('age').bin({maxbins:40}).title('Age'),
vl.y().count().title('# of Gun Deaths'),
vl.color().value('#737373')
)
.width(750)
.height(250)
.title('Frequency of Gun Deaths by Age')
;
const plot2 = vl.markLine()
.data(gun_deaths)
//.params(selection)
.transform(
vl.filter(brush)
)
.encode(
vl.x().fieldT('year_month').title('Date'),
vl.y().count().title('# of Gun Deaths'),
vl.color().fieldN('race')
// vl.color().if(selection,vl.fieldN('race')).value('grey'),
// vl.opacity().if(selection,vl.value(1)).value(0.25),
)
.width(750)
.height(400)
.title('Trend of Gun Deaths by Race')
;
const base = plot2.transform(vl.filter(isHovered),vl.filter(brush));
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
//return vl.vconcat(plot1,plot2).title('Gun Deaths by Age and Race').render()
return vl.vconcat(plot1,vl.data(gun_deaths)
.layer(
plot2,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered),vl.filter(brush))
.encode(vl.x().fieldT('year_month')),
plot2.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base.markText(label, white).encode(vl.text().count()),
base.markText(label).encode(vl.text().count())
)
.width(700)
.height(400)
).render()
}
vl.markCircle({size:400})
.data(gun_deaths)
.transform(
vl.filter('datum.education == "HS/GED" || datum.education == "Some College"'), // filter for HS and College Students (not really)
vl.filter('datum.month >= 9 || datum.month <= 5'), // filter for academic school year months
vl.filter('datum.intent == "Suicide" || datum.intent == "Homicide"'),
vl.groupby('race','intent')
.aggregate(
vl.count().as('Total_Deaths')
)
)
.encode(
vl.y().fieldN('race').title('Race').axis({grid:true}),
vl.x().fieldQ('Total_Deaths').title('# of Deaths').scale({type: 'log'}).axis({tickCount: 4,grid:false,ticks:false}),
vl.color().fieldN('intent'),
vl.opacity().value(0.5),
vl.tooltip(['intent','Total_Deaths','race'])
)
.width(600)
.height(400)
.title('Suicide and Homicide Deaths in High School & College Students')
.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.
