Public
Edited
Apr 27, 2023
Insert cell
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
import {printTable} from '@jonfroehlich/data-utilities'
Insert cell
import {printTableTypes} from '@jonfroehlich/data-utilities'
Insert cell
Insert cell
Insert cell
Insert cell
seattleWeatherFile=FileAttachment("seattle-weather.csv")
Insert cell
seattleWeather=seattleWeatherFile.csv()
Insert cell
printTableTypes(seattleWeather)
Insert cell
seattleWeatherTyped=seattleWeatherFile.csv({typed:true})
Insert cell
Insert cell
vl.markPoint()
.data(seattleWeatherTyped)
.render()
Insert cell
vl.markPoint()
.data(seattleWeatherTyped)
.encode(vl.x()
.field('temp_max')
.type('quantitative')
.title("Max Temp"))
.render()
Insert cell
vl.markPoint()
.data(seattleWeatherTyped)
.encode(vl.x()
.fieldQ('temp_min')
.title("Min Temp"),
vl.y().fieldQ('temp_max')
.title("Max Temp"))
.render()
Insert cell
vl.markCircle({opacity:0.6})
.data(seattleWeatherTyped)
.encode(vl.x()
.fieldQ('temp_min')
.title("Min Temp"),
vl.y().fieldQ('temp_max')
.title("Max Temp"),
vl.color().fieldN('weather'))
.render()
Insert cell
vl.markCircle({opacity:0.6})
.data(seattleWeatherTyped)
.encode(vl.x()
.fieldQ('temp_min')
.title("Min Temp"),
vl.y().fieldQ('temp_max')
.title("Max Temp"),
vl.color().fieldN('weather').scale({range:["#AEC7E8", "#C7C7C7", "#1F77B4", "#9467bd", "#E7BA52"]}))
.render()
Insert cell
vl.markCircle({opacity:0.6, tooltip:true})
.data(seattleWeatherTyped)
.encode(vl.x()
.fieldQ('temp_min')
.title("Min Temp"),
vl.y().fieldQ('temp_max')
.title("Max Temp"),
vl.color().fieldN('weather').scale({range:["#AEC7E8", "#C7C7C7", "#1F77B4", "#9467bd", "#E7BA52"]}),
vl.size().fieldQ('precipitation').scale({range:[4, 500]}))
.render()
Insert cell

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.
Learn more