ageData = [
{
"person": "Mary",
"age": 45
},
{
"person": "Jane",
"age": 52
}
]
printTable(ageData);
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'),
vl.y().fieldQ('Total Murders'))
.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'),
vl.y().fieldQ('Total by Firearm').scale({type:'linear', reverse:toggleYAxisReverse, domain:[0, 1000]}))
.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.
