Published
Edited
Nov 21, 2019
1 fork
Importers
5 stars
{
const context = DOM.context2d(width, width),
path = d3.geoPath(projection);
path.context(legraPath(context, size, { color: "#ccc" }));
path({ type: "Sphere" });
path.context(legraPath(context, size, { color: "lightblue" }));
path(land);
yield context.canvas;
}
size = 10
Legra = require("legra@0.2.0/lib/legra.umd.js")
function legraPath(context, size = 10, BrickRenderOptions) {
const p = { legra: new Legra(context, size, BrickRenderOptions) };
// TODO: for fill:true we'll need to accumulate the coordinates in an array and call legra.polygon()
p.moveTo = (x, y) => {
if (p.x0 === undefined) (p.x0 = x), (p.y0 = y);
p.x = Math.round(x / size);
p.y = Math.round(y / size);
};
p.lineTo = (x, y) => {
p.legra.line(
p.x,
p.y,
(p.x = Math.round(x / size)),
(p.y = Math.round(y / size))
);
};
p.closePath = () => {
p.lineTo(p.x0, p.y0);
delete p.x0;
};
return p;
}
projection = d3
.geoMercator()
.fitWidth(Math.floor(width / size - 1) * size, { type: "Sphere" })
d3 = require("d3@5", "d3-geo-projection@2")
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
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.
