Published
Edited
Sep 11, 2019
Insert cell
Insert cell
html`
<style>
#year{color:lime}
#yankees{color:blue}
#sox{color:red}
</style>

<p><span id= "year">${year}</span> Yankees <span id= "yankees">${yankees[0.].W}</span> Red Sox <span id= "sox">${sox[0].W}</span></p>


`
Insert cell
vl.markArea({interpolate:"monotone",stroke:"black",fill:"lightpink",opacity:.5})
.width(700)
.data(data)
.transform(
vl.filter(`datum.yearID <= ${year}`)
)
.encode(
vl.x().fieldQ("yearID").axis({format:".0f",title:"year"}).scale({domain:[1913,2018]}),
vl.y().fieldQ("W").axis({title:"wins"}).scale({domain:[0,120]}),
vl.color().fieldN("name").scale({range:["red","navy"]})
)
.render()
Insert cell
viewof year = slider({min:1913,max:2018,step:1})
Insert cell
yankees = data.filter(d=> d.name == "New York Yankees" && d.yearID == year)
Insert cell
sox = data.filter(d=> d.name == "Boston Red Sox" && d.yearID== year)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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