vl.markBar()
.data(allData)
.encode(
vl.x().fieldQ('salary_18').bin({maxbins: 20}), // maxbins controls the number of bins in the histogram
vl.y().count().scale({ domain: [0, 4000]}), // scale() lets you specify start/end points for an axis
vl.tooltip().count()
)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markBar()
.data(allData)
.transform(vl.filter('datum.gender_38 == "Female"')) // this line lets you filter the data
.encode(
vl.x().fieldQ('salary_18').bin({maxbins: 20}), // maxbins controls the number of bins in the histogram
vl.y().count().scale({ domain: [0, 4000]}), // scale() lets you specify start/end points for an axis
vl.tooltip().count()
)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markBar()
.data(allData)
.encode(
vl.x().fieldQ('salary_18').bin({maxbins: 20}),
vl.y().count().scale({ domain: [0, 4000]}),
vl.tooltip().count(),
vl.column().fieldN('gender_38') // generating a facted plot, with a subplot for each reported gender
)
.height(500)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markBar()
.data(allData)
.transform(vl.filter('datum.gender_38 == "Female"')) // this line lets you filter the data
.encode(
vl.x().fieldQ('age_37').bin({maxbins: 30}),
vl.y().fieldQ('salary_18').bin({maxbins: 20}),
vl.color().count().scale({ range: ["#74ECEE", "#71B8CE", "#6E87A3", "#605A73", "#463344"] }), // specifying particular colors
vl.tooltip().count(),
vl.column().fieldN('gender_38')
)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
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.
