Published
Edited
Oct 25, 2020
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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()
Insert cell
Insert cell
Insert cell
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()
Insert cell
Insert cell
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()
Insert cell
Insert cell
Insert cell
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()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// 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()
}
Insert cell
Insert cell
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()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datasets = require('vega-datasets@1')
Insert cell
counties = new Set(['New York', 'Bronx', 'Kings', 'Richmond', 'Queens'])
Insert cell
nycZipCodes = (await datasets['zipcodes.csv']()).filter(d => counties.has(d.county))
Insert cell

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.
Learn more