I like teaching, computing, and teaching computing
Unlisted
Edited
May 19
vl.markCircle({ size: 50 })
.data(airports)
.encode(
vl.longitude().fieldQ('lon'),
vl.latitude().fieldQ('lat'),
vl.tooltip(['Orig', 'Name'])
)
.project(
vl.projection('mercator') // <--- Mercator projection
)
.width(800)
.height(500)
.render()
{
const map = vl.markGeoshape()
.project(vl.projection('mercator'));
const earth = map
.data(vl.topojson(world).feature('countries'))
.encode(
vl.color().value('lightgrey'),
vl.stroke().value('darkgrey')
);
const graticule = map
.data(vl.graticule())
.encode(
vl.stroke().value('lightgrey')
);
const sphere = map
.data(vl.sphere())
.encode(
vl.color().value('transparent'),
vl.stroke().value('black')
);
return vl.layer(graticule, earth, sphere)
.width(800)
.height(500)
.render()
}
{
const map = vl.markGeoshape();
const earth = map
.data(vl.topojson(world).feature('countries'))
.encode(
vl.color().value('lightgrey'),
vl.stroke().value('darkgrey')
);
const graticule = map
.data(vl.graticule())
.encode(
vl.stroke().value('lightgrey'),
);
const sphere = map
.data(vl.sphere())
.encode(
vl.color().value('transparent'),
vl.stroke().value('black')
);
const scatter = vl.markCircle({ opacity: 0.5 })
.data(airports)
.encode(
vl.longitude().fieldQ('lon'),
vl.latitude().fieldQ('lat'),
vl.tooltip(['Orig', 'Name']),
vl.size().fieldQ('TotalSeats').scale({ range: [10, 200]}),
vl.order().fieldQ('TotalSeats').sort('descending')
);
return vl.layer(graticule, sphere, earth, scatter)
.width(800)
.height(500)
.project(
vl.projection('orthographic')
// .translate([300, 800])
// .rotate([99, 0, 0])
// .scale(590)
)
.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.
