UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
ageData = [
{
"person": "Mary",
"age": 45
},
{
"person": "Jane",
"age": 52
}
]
printTable(ageData)
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age')
)
.width('200')
.render()
vl.markBar({clip: true})
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age').scale({domain:[44, 53]})
)
.width('200')
.render()
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age')
.scale({domain:[0, 1000]}) // add y-axis scale
.axis({"values": [0, 500, 1000]}) // set axis properties
)
.width('200')
.render()
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age')
.scale({domain:[0, 1000]})
.axis({labels:false, ticks:false, grid:false})
)
.width('200')
.height('200')
.render()
gunDeathsInFlorida = gunDeathsInFloridaFile
.csv({ typed: true })
.then((data) => data.map((d) => ({ ...d, Year: new Date(d.Year, 0) }))) // this correctly parses the dates
printTable(gunDeathsInFlorida.slice(0, 5), ["Year", "Population", "Total Murders", "Total by Firearm"], null)
vl.markArea() // area mark
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year'), // encode year as a temporal field on x axis
vl.y().fieldQ('Total by Firearm') // encode firearm deaths as a quantitative field on y axis
)
.title("Gun Deaths in Florida by Firearm (1971-2018)")
.render()
vl.markArea({fill: "#C01927"})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain: [1990, 2011]}) // set the x domain to 1990-2011
.timeUnit('year') // set the time unit to a year
.title("Year"),
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000]}) // set the y domain to 0-1000
.title("Deaths by Firearm")
)
.title("Gun Deaths in Florida by Firearm (1990-2011)")
.render()
vl.markArea({clip: true, fill: "#C01927"}) // we added "clip: true" and changed the mark color
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain: [1990, 2011]})
.timeUnit('year').title("Year"),
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000]})
.title("Deaths by Firearm")
)
.title("Gun Deaths in Florida by Firearm (1990-2011)")
.render()
vl.markArea({clip: true, fill: "#C01927"})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain: [1990, 2011]})
.timeUnit('year').title("Year"),
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000], reverse: true}) // we reveresed the domain here
.title("Deaths by Firearm")
)
.title("Gun Deaths in Florida by Firearm (1990-2011)")
.render()
vl.markArea({clip: true, fill: "#C01927"})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year').scale({domain: [1990, 2011]}).timeUnit('year').title("Year"),
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000], reverse: reverseYAxis})
.title("Deaths by Firearm")
)
.title("Gun Deaths in Florida by Firearm (1990-2011)")
.render()
{
const areaChart = vl.markArea({clip: true, fill: "#C01927"})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain: [1990, 2011]})
.timeUnit('year').title("Year"),
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000], reverse: true})
.title("Deaths by Firearm")
);
// Setup the bold "2005" header
const labelTitle = vl.markText({
dy: -80, dx: -20, fontSize:20, fontWeight: 'bold',
color:'white', align:'left'
})
.data([gunDeathsInFlorida[34]]) // we only want the annotation at the data point for 2005
.encode(
vl.x().datum(2005) // we add the text at the x=2004, y=521 position
.scale({domain: [1990, 2011]})
.axis({labels:false, ticks:false, grid:false}),
vl.y().datum(521), // 2005, there are 521 deaths
vl.text().value("2005"),
);
// Setup the "Florida enacted" text
const labelText = vl.markText({
dy: -60, dx: -20, fontSize:14,
color:'white', align:'left', lineBreak: '\n'
})
.data([gunDeathsInFlorida[33]])
.encode(
vl.x().datum(2005)
.scale({domain: [1990, 2011]})
.axis({labels:false, ticks:false, grid:false}),
vl.y().datum(521), // 2005, there are 521 deaths
vl.text().value("Florida enacted\n its 'Stand Your\n Ground' law")
);
// Use the markRule to show the annotation line
// https://vega.github.io/vega-lite/docs/rule.html
const markRule = vl.markRule({color:'white'})
.data([gunDeathsInFlorida[33]])
.encode(
vl.x().datum(2005)
.scale({domain: [1990, 2011]})
.axis({labels:false, ticks:false, grid:false}),
vl.y().datum(515), // show the line from y 515 to 465
vl.x2().datum(2005),
vl.y2().datum(465)
);
return vl.layer(areaChart, labelTitle, labelText, markRule)
.title("Gun Deaths in Florida by Firearm (1990-2011)")
.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.
