vl.markLine({point:true})// I added point and change the box chart to line chart
.data(census)
.encode(
vl.x().fieldN("Year"),
vl.y().fieldQ("People")
)
.title("U.S. Population Growth (Line Chart View)")
.width(400)
.height(300)
.render()
vl.markBar()
.data(census)
.encode(
vl.x().fieldN("Year"),
vl.y().fieldQ("People"),
vl.color().fieldN("Year")// I added the color
)
.title("U.S. Population by Year (Colored Bars)")
.width(400)
.height(300)
.render()
vl.markBar()
.data(census)
.encode(
vl.x().fieldN("Year"),
vl.y().fieldQ("People"),
vl.tooltip([{field:"Year"},{field:"People"}])// I add the tooltips to the bar chart
)
.title("U.S. Population with Tooltip Interaction")
.width(400)
.height(300)
.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.