vl.markPoint()
.data(iris)
.title('sepal-length vs. sepal-width')
.encode(
vl.x().fieldQ('sepal-length').scale({zero: false}),
vl.y().fieldQ('sepal-width').scale({zero: false}),
vl.color().fieldN('class'),
).render()
vl.markBar()
.title('Top 20 NYC 311 Service Request Types for February 4th, 2019')
.data(topRequestTypes)
.encode(
vl.x().fieldQ('count'),
vl.y().fieldN('type').sort(vl.field('count').order('descending')),
).render()
vl.markBar()
.title('Top 20 NYC 311 Service Request Types for February 4th, 2019')
.data(serviceRequests)
.transform(
vl.aggregate(vl.count('count')).groupby('type'),
vl.window(vl.rank().as('rank')).sort(vl.field('count').order('descending')),
vl.filter('datum.rank < 20')
)
.encode(
vl.x().fieldQ('count'),
vl.y().fieldN('type').sort('-x'),
).render()
vl.markLine()
.title('Count of NYC 311 Service Requests per Hour on February 4th, 2019')
.data(numRequestsByHour)
.encode(
vl.x().fieldT('time'),
vl.y().fieldQ('count'),
).render()
{
// based on symbol map example from:
// https://observablehq.com/@uwdata/cartographic-visualization?collection=@uwdata/visualization-curriculum
const map = vl.markGeoshape({fill: lightgray, stroke: 'white', strokeWidth: 0.5})
.data(vl.json(nycGeo).property('features'));
const points = vl.markCircle()
.data(numRequests)
.encode(
vl.latitude().fieldQ('lat'),
vl.longitude().fieldQ('lon'),
vl.size().fieldQ('count')
)
return vl.layer(map, points)
.project(vl.projection('albers'))
.width(600)
.height(600)
.render()
}
vl.markCircle()
.data(serviceRequests)
.transform(vl.filter('datum.borough !== "Unspecified"'))
.title('Number of Requests by Agency and Borough')
.encode(
vl.x().fieldN('agency').sort('-size'),
vl.y().fieldN('borough').sort('-size'),
vl.size().aggregate('count'),
).render()
datasets = require('vega-datasets@1')
counties = new Set(['New York', 'Bronx', 'Kings', 'Richmond', 'Queens'])
nycZipCodes = (await datasets['zipcodes.csv']()).filter(d => counties.has(d.county))
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.
