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')
.height('250')
.render()
vl.markBar({clip:true})
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age').scale({ domain:[44, 53] })
)
.width('200')
.height('250')
.render()
vl.markBar({clip:true})
.data(ageData)
.encode(
vl.x().fieldN('person').sort('descending'),
vl.y().fieldQ('age').scale({ domain:[0, 1000] })
)
.width('200')
.height('250')
.render()
vl.markBar({clip:true})
.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()
gunDeathsInFloridaFile = FileAttachment("gun_deaths_by_firearm_florida_statistical_analysis_center.csv")
gunDeathsInFlorida = gunDeathsInFloridaFile.csv()
printTable(gunDeathsInFlorida.slice(0, 5), ["Year", "Population", "Total Murders", "Total by Firearm"], null)
vl.markArea()
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year'),// x axis encodes 'Year' field
vl.y().fieldQ('Total by Firearm')// y axis encodes 'Total by Firearm'
).render()
vl.markArea({fill: '#C01927', clip: true})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain:[1990, 2011]})
.timeUnit('year')
.title('year'),// x axis encodes 'Year' field
vl.y().fieldQ('Total by Firearm')// y axis encodes 'Total by Firearm'
).render()
viewof toggleYAxisReverse = Inputs.toggle({label: "Reverse Y Axis", value: true})
vl.markArea({fill: '#C01927', clip: true})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year')
.scale({domain:[1990, 2011]})
.timeUnit('year')
.title('year'),// x axis encodes 'Year' field
vl.y().fieldQ('Total by Firearm')
.scale({domain: [0, 1000], reverse: toggleYAxisReverse})// y axis encodes 'Total by Firearm'
).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.
