Public
Edited
Oct 9, 2024
2 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
world = datasets['world-110m.json']()
Insert cell
Insert cell
Insert cell
Insert cell
render({
mark: 'geoshape',
data: {
values: world,
format: { type: 'topojson', feature: 'countries' }
}
})
Insert cell
Insert cell
render({
mark: { type: 'geoshape', fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5 },
data: {
values: world,
format: { type: 'topojson', feature: 'countries' }
},
projection: { type: 'mercator' }
})
Insert cell
Insert cell
render({
mark: { type: 'geoshape', fill: '#2a1d0c', stroke: '#706545' },
data: {
values: world,
format: { type: 'topojson', feature: 'countries' }
},
projection: { type: 'mercator', scale: 400, translate: [100, 550] }
})
Insert cell
Insert cell
Insert cell
map = ({
layer: [
{
mark: { type: 'geoshape', fill: '#e6f3ff' },
data: { sphere: true }
},
{
mark: { type: 'geoshape', stroke: '#ffffff', strokeWidth: 1 },
data: { graticule: true }
},
{
mark: { type: 'geoshape', fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5 },
data: {
values: world,
format: { type: 'topojson', feature: 'countries' }
}
}
],
width: 600,
height: 400,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
render({
...map,
projection: {
type: 'naturalEarth1',
scale: 110,
translate: [300, 200]
}
})
Insert cell
Insert cell
Insert cell
Insert cell
render({
mark: { type: 'square', size: 1, opacity: 1 },
data: { url: zipcodes },
encoding: {
longitude: { field: 'longitude', type: 'Q' }, // apply the field named 'longitude' to the longitude channel
latitude: { field: 'latitude', type: 'Q' } // apply the field named 'latitude' to the latitude channel
},
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
render({
mark: { type: 'square', size: 2, opacity: 1 },
data: { url: zipcodes },
transform: [
{ calculate: 'datum.zip_code[0]', as: 'digit' }
],
encoding: {
longitude: { field: 'longitude', type: 'Q' },
latitude: { field: 'latitude', type: 'Q' },
color: { field: 'digit', type: 'N' }
},
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
render({
mark: { type: 'line', strokeWidth: 0.5 },
data: { url: zipcodes },
transform: [
{ filter: '-150 < datum.longitude && 22 < datum.latitude && datum.latitude < 55' },
{ calculate: 'datum.zip_code[0]', as: 'digit' }
],
encoding: {
longitude: { field: 'longitude', type: 'Q' },
latitude: { field: 'latitude', type: 'Q' },
color: { field: 'digit', type: 'N' },
order: { field: 'zip_code', type: 'O' }
},
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
render({
layer: [
{
mark: { type: 'geoshape', fill: '#ddd', stroke: '#fff', strokeWidth: 1 },
data: {
values: usa,
format: { type: 'topojson', feature: 'states' }
}
},
{
mark: { type: 'circle', size: 9 },
data: { url: airports },
encoding: {
latitude: { field: 'latitude', type: 'Q' },
longitude: { field: 'longitude', type: 'Q' },
tooltip: { field: 'iata', type: 'N' }
}
},
],
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
render({
layer: [
{
mark: { type: 'geoshape', fill: '#ddd', stroke: '#fff', strokeWidth: 1 },
data: {
values: usa,
format: { type: 'topojson', feature: 'states' }
}
},
{
mark: { type: 'circle' },
data: { url: flights },
transform: [
{ aggregate: [{ op: 'count', as: 'routes' }], groupby: ['origin'] },
{
lookup: 'origin',
from: {
data: { url: airports },
key: 'iata',
fields: ['state', 'latitude', 'longitude']
}
},
{ filter: 'datum.state !== "PR" && datum.state !== "VI"' }
],
encoding: {
latitude: { field: 'latitude', type: 'Q' },
longitude: { field: 'longitude', type: 'Q' },
tooltip: [
{ field: 'origin', type: 'N' },
{ field: 'routes', type: 'Q' }
],
size: {
field: 'routes', type: 'Q',
scale: { range: [0, 1000] },
legend: null
},
order: { field: 'routes', type: 'Q', sort: 'descending' } // place smaller circles on top
}
},
],
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
render({
mark: { type: 'geoshape', stroke: '#aaa', strokeWidth: 0.25 },
data: {
values: usa,
format: { type: 'topojson', feature: 'counties' }
},
transform: [
{
lookup: 'id',
from: { data: { url: unemp }, key: 'id', fields: ['rate'] }
},
],
encoding: {
color: {
field: 'rate', type: 'Q',
scale: { domain: [0, 0.3], clamp: true },
legend: { format: '%' }
},
tooltip: { field: 'rate', type: 'Q' }
},
projection: { type: 'albersUsa' },
width: 890,
height: 500,
config: { view: { stroke: null } }
})
Insert cell
Insert cell
{
// utility function to generate a map specification for a provided color scheme
function map(scheme) {
return {
mark: { type: 'geoshape' },
encoding: {
color: { field: 'rate', type: 'Q', scale: { scheme }, legend: null }
},
projection: { type: 'albersUsa' },
width: 300,
height: 200
};
}
return render({
hconcat: [
map('tealblues'),
map('viridis'),
map('blueorange')
],
data: {
values: usa,
format: { type: 'topojson', feature: 'counties' }
},
transform: [
{
lookup: 'id',
from: { data: { url: unemp }, key: 'id', fields: ['rate'] }
},
],
config: { view: { stroke: null } },
resolve: { scale: { color: 'independent' } }
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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