Published
Edited
Nov 21, 2019
1 fork
Importers
5 stars
Contour Labels (canvas)Coordinated mapsgeoformatSmall circle testKruskal MazeAll the geoshapesReprojecting Vector TilesCloud ContoursHello h3-jsClipping AlbersTranslucent EarthThe truth about the Mercator projectionUsing d3-inertia with observableMercator projection of a Mercator globeD3 Vector Tiles (WIP)Finding intersections between the graticule and the clip sphere of the stereographic projection, method 2Plate tectonicsAnother hex mapEquateur & tropiquesTissot's indicatrixDistance to shoreMultiPolygon clippingSouth Africa’s medial axisSpherical intersectionVolcano Semis (points circulaires)Pencil Airocean45° mapNetCDFBlue noise sphereRubber DymaxionSpherical quasi-random (R2) distributionAutomated label placement (countries)Automated label placement (France)Automated label placement (cities)d3.geoIntersectArcDelaunay.findTriangled3-geo-voronoi and gridded dataElevation vtk.jsMapfillKrigingSpherical HeatmapReproject elevation tiles — detailReproject elevation tiles — worldFisheye Conformal MapSpherical KDE InterpolationSpherical kernel interpolation with nearest neighborsShepard’s methodModified Shepard’s methodSpherical contoursGeo Voronoi interpolationBlurry contoursHow much warmer? (BBC)H3 hexagons & geoContoursHillshading & supersamplingH3 odditiesManhattan VoronoiManhattan Voronoi IIGeoJSON feature editorColorized Manhattan Spanning Tree
legra maps
legra country mapsThe complex logarithm projectionCountries small multipleThe 2D approximate Newton-Raphson methodOceanAttitudeCount visible objectsThe Gray-Fuller spatial gridGray-Fuller grid metricsGray-Fuller grid odditiesSpherical smallest-circle problemBounding CirclesCountries Enclosing CirclesFullscreen Seamless Zoomable Map TilesMap Pan & ZoomSpherical EllipsesSynchronized projectionsThe closest countryTriangular tiling of icosahedronHello, polygon-clippingCorées / KoreasHello, procedural-glHello, placekeyZoom World ChoroplethClipping spherical polygonsSpherical phyllotaxisFour-color world map with ClingoHello, jsgeoda!The Sun’s analemmaWorld of squaresWorld of squares (spherical)A map of AfricaTagged bordersClipped geoVoronoiBlue noise sphere IISpherical Perlin NoiseSpherical Delaunay triangulationDynamic simplificationRewindPlot: Voronoi labelsAoC 12: shortest path under constraintsHello, pixi.jsFlight PathsRay out of a convex hullDistance to a segment
Also listed in…
Hello
Insert cell
Insert cell
{
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;
}
Insert cell
Insert cell
size = 10
Insert cell
Legra = require("legra@0.2.0/lib/legra.umd.js")
Insert cell
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;
}
Insert cell
projection = d3
.geoMercator()
.fitWidth(Math.floor(width / size - 1) * size, { type: "Sphere" })
Insert cell
d3 = require("d3@5", "d3-geo-projection@2")
Insert cell
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
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