vl
.markCircle()
.data(df)
.transform(
vl.filter('datum.Name == "California"')
) /* filter to show only states */
.encode(
vl.y().fieldQ("Resident_Population"),
vl.x().fieldO("Year").scale({ zero: false }),
vl.color().fieldN("Name")
)
.render({ renderer: "svg" })
vl.markLine()
.data(df)
.transform(vl.filter('datum.Name == "New Jersey"')) /* filter to show only states */
.encode(
vl.y().fieldQ('Resident_Population'),
vl.x().fieldO('Year').scale({zero: false}),
vl.color().fieldN('Name')
)
.height(600)
.width(400)
.render({ renderer: "svg" })
vl
.markCircle()
.data(df)
.transform(vl.filter('datum.Geography_Type == "State"')) /* filter to show only states */
.encode(
vl.y().fieldN("Name"),
vl.x().fieldO("Year").scale({ zero: false }),
vl.color().fieldQ("Number_of_Representatives"),
vl.size().fieldQ("Resident_Population")
)
.render({ renderer: "svg" })
vl.markRect()
.data(df)
.transform(vl.filter('datum.Geography_Type == "State"')) /* filter to show only states */
.encode(
vl.y().fieldN('Name'),
vl.x().fieldO('Year').scale({zero: false}),
vl.color().fieldQ('Resident_Population')
)
.width(400)
.render({renderer: 'svg'})
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.
