Published
Edited
May 28, 2018
3 stars
// from d3-geo-polygon
airocean = map("airocean")
// from d3-geo-projection
bertin1953 = map("bertin1953")
// load vega and d3 projections, merge them and return a wrapper
vega = {
const Vega = await require('vega'),
projections = await require('d3-geo-projection', 'd3-geo-polygon');
for (let p in projections) {
let a = p.match(/^geo(.*)/);
if (a) {
let name = a[1][0].toLowerCase() + a[1].slice(1);
Vega.projection(name, projections[p]);
}
}
return function vega(spec) {
var div = document.createElement("div");
var view = new Vega.View(Vega.parse(spec));
return view.initialize(div).runAsync().then(function() { return div; });
};
}
map = function(projname) {
return vega({
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 900,
"height": 500,
"autosize": "none",
"data": [
{
"name": "world",
"url": "https://unpkg.com/world-atlas@1/world/110m.json",
"format": {
"type": "topojson",
"feature": "land"
}
}
],
"projections": [
{
"name": "projection",
"type": projname
}
],
"marks": [
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"update": {
"fill": {"value": "#ed5740"}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
}
);
}
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.
