viewof year = slider({min:1913,max:2018,step:1,value:2018})
vl.layer(BostonLine,NewYorkArea)
.title("Yankees vs Red Sox")
.render()
html`
<h3> I took out vl.color and just adjusted the fill color and the opacity of the navy. Also, the order of the layer matters.</h3>
`
NewYorkArea = vl.markArea({interpolate:"monotone",stroke:"black",fill:"Navy",opacity:0.25})
.width(700)
.height(400)
.data(dataNewYork)
.encode(
vl.x().fieldQ("yearID").axis({format:".0f",title:"year"}),
vl.y().fieldQ("W").axis({title:"wins"}),
)
BostonLine = vl.markLine({interpolate:"monotone",stroke:"black",fill:"cornflowerb0lue"})
.width(700)
.data(dataBoston)
.encode(
vl.x().fieldQ("yearID").axis({format:".0f",title:"year"}),
vl.y().fieldQ("W").axis({title:"wins"}),
vl.color().fieldN("name").scale({range:["red"]}),
)
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.
