Public
Edited
Feb 7, 2024
ageData = [
{ "person": "Mary", "age": 52},
{ "person": "Jane", "age": 45}
]
printTable(ageData)
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
)
.width(250)
.height(250)
.render()
vl.markBar({clip: true})
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
.scale({domain: [44, 53]})
.axis({labels: false, ticks: false, grid: false})
)
.width(250)
.height(250)
.render()
gunDeathsInFloridaFile = FileAttachment("gun_deaths_by_firearm_florida_statistical_analysis_center@1.csv")
gunDeathsInFlorida = gunDeathsInFloridaFile.csv()
printTable(gunDeathsInFlorida.slice(0, 5), ["Year", "Population", "Total Murders", "Total by Firearm"])
// year on x, total by firearm by y
areaGraph = vl.markArea({clip: true, fill: "#C01927"})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year').timeUnit('year').scale({domain: [1990, 2010]}),
vl.y().fieldQ('Total by Firearm').scale({reverse: true})
)
.render()
// year on x, total by firearm by y
lineGraph = vl.markLine({clip: true})
.data(gunDeathsInFlorida)
.encode(
vl.x().fieldT('Year').timeUnit('year').scale({domain: [1990, 2010]}),
vl.y().fieldQ('Total by Firearm').scale({reverse: true})
)
.render()
vl.layer(areaGraph, lineGraph).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.
