Data visualization and analysis at the University of Washington, Seattle.
world = datasets['world-110m.json']()
vl.markGeoshape()
.data(vl.topojson(world).feature('countries'))
.render()
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5})
.data(vl.topojson(world).feature('countries'))
.project(vl.projection('mercator'))
.render()
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545'})
.data(vl.topojson(world).feature('countries'))
.project(vl.projection('mercator').scale(400).translate(100, 550))
.render()
map = vl.layer(
// use the sphere of the Earth as the base layer
vl.markGeoshape({fill: '#e6f3ff'})
.data(vl.sphere()),
// add a graticule for geographic reference lines
vl.markGeoshape({stroke: '#ffffff', strokeWidth: 1})
.data(vl.graticule()),
// and then the countries of the world
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5})
.data(vl.topojson(world).feature('countries'))
)
.width(600).height(400)
.config({view: {stroke: null}})
map.project(
vl.projection('naturalEarth1').scale(110).translate(300, 200)
).render()
vl.markSquare({size: 1, opacity: 1})
.data(zipcodes)
.encode(
vl.longitude().fieldQ('longitude'), // apply the field named 'longitude' to the longitude channel
vl.latitude().fieldQ('latitude') // apply the field named 'latitude' to the latitude channel
)
.project(vl.projection('albersUsa'))
.width(900)
.height(500)
.config({view: {stroke: null}})
.render()
vl.markSquare({size: 2, opacity: 1})
.data(zipcodes)
.transform(
vl.calculate('datum.zip_code[0]').as('digit')
)
.encode(
vl.longitude().fieldQ('longitude'),
vl.latitude().fieldQ('latitude'),
vl.color().fieldN('digit')
)
.project(vl.projection('albersUsa'))
.width(900)
.height(500)
.config({view: {stroke: null}})
.render()
vl.markLine({strokeWidth: 0.5})
.data(zipcodes)
.transform(
vl.filter('-150 < datum.longitude && 22 < datum.latitude && datum.latitude < 55'),
vl.calculate('datum.zip_code[0]').as('digit')
)
.encode(
vl.longitude().fieldQ('longitude'),
vl.latitude().fieldQ('latitude'),
vl.color().fieldN('digit'),
vl.order().fieldO('zip_code')
)
.project(vl.projection('albersUsa'))
.width(900)
.height(500)
.config({view: {stroke: null}})
.render()
{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const points = vl.markCircle({size: 9})
.data(airports)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.tooltip().fieldN('iata')
);
return vl.layer(map, points)
.project(vl.projection('albersUsa'))
.width(900).height(500)
.config({view: {stroke: null}})
.render()
}
{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const points = vl.markCircle()
.data(flights)
.transform(
vl.groupby('origin').aggregate(vl.count().as('routes')),
vl.lookup('origin').from(
vl.data(airports).key('iata').fields('state', 'latitude', 'longitude')
),
vl.filter('datum.state !== "PR" && datum.state !== "VI"')
)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.tooltip([vl.fieldN('origin'), vl.fieldQ('routes')]),
vl.size().fieldQ('routes').scale({range: [0, 1000]}).legend(null),
vl.order().fieldQ('routes').sort('descending'), // place smaller circles on top
);
return vl.layer(map, points)
.project(vl.projection('albersUsa'))
.width(900).height(500)
.config({view: {stroke: null}})
.render();
}
vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})
.data(vl.topojson(usa).feature('counties'))
.transform(
vl.lookup('id').from(vl.data(unemp).key('id').fields('rate'))
)
.encode(
vl.color().fieldQ('rate').scale({domain: [0, 0.3], clamp: true}).legend({format: '%'}),
vl.tooltip().fieldQ('rate').format('.0%')
)
.project(vl.projection('albersUsa'))
.width(890).height(500)
.config({view: {stroke: null}})
.render()
{
// utility function to generate a map specification for a provided color scheme
function map(scheme) {
return vl.markGeoshape()
.encode(vl.color().fieldQ('rate').scale({scheme: scheme}).legend(null))
.project(vl.projection('albersUsa'))
.width(300)
.height(200);
}
return vl.hconcat(
map('tealblues'),
map('viridis'),
map('blueorange')
)
.data(vl.topojson(usa).feature('counties'))
.transform(vl.lookup('id').from(vl.data(unemp).key('id').fields('rate')))
.config({view: {stroke: null}})
.resolve({scale: {color: 'independent'}})
.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.
