Public
Edited
Nov 17
2 forks
8 stars
Petroff QuincuncialCylindrical Equal-Area ProjectionsSatellite ExplorerHufnagelGeoTIFF contours IIGs50Lee Oblated StereographicModified Stereographic AlaskaMiller Oblated StereographicInterrupted Homolosine OceansInterrupted Mollweide OceansFoucautGringorten QuincuncialWaterman’s ButterflyPolyhedral GnomonicGingeryGilbertFoucaut SinusoidalPolyhedral CollignonCollignonCylindrical Equal-AreaSatelliteCraigCrasterCylindrical StereographicEckert IEckert IIEckert IIIEckert VEckert VIEisenlohrFaheyGinzburg IVGinzburg VGinzburg VIGinzburg VIIIGinzburg IXGringortenGuyouHammer RetroazimuthalHEALPixEckert IVHill EucyclicLagrangeLarrivéeLaskowski Tri-OptimalLittrowLoximuthalRobinsonRectangular PolyconicPolyconicPatterson CylindricalNell–HammerNatural Earth IIFlat-Polar QuarticFlat-Polar ParabolicMillerFlat-Polar SinusoidalTimesVan der Grinten IVan der Grinten IIVan der Grinten IIIVan der Grinten IVWagner IVKavrayskiy VIIWagner VIWagner VIIWiechelWinkel TripelInterrupted SinusoidalPeirce QuincuncialBottomleyWernerBonneAtlantisMollweide HemispheresInterrupted MollweideInterrupted Goode HomolosineGoode HomolosineBromleyInterrupted Boggs EumorphicSinu-MollweideMollweideSinusoidalBoggs EumorphicBerghaus StarBaker DinomicAugustArmadilloAitoffAiry’s Minimum-ErrorHammerBriesemeisterInterrupted Sinu-Mollweide
Two point equidistant
Also listed in…
d3-geo-polygon
map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.attr("fill", "#fff")
.attr("d", path(sphere));
svg.append("path")
.attr("fill", "#eee")
.attr("stroke", "#444")
.attr("stroke-width", 0.5)
.attr("d", path(land));
if (showOverlay) {
const circle = d3.geoCircle();
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#f00")
.selectAll("path")
.data(d3.range(10, 180, 10))
.join("path")
.attr("d", r => path(circle.center(a).radius(r)()));
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#00a2f3")
.selectAll("path")
.data(d3.range(10, 180, 10))
.join("path")
.attr("d", r => path(circle.center(b).radius(r)()));
}
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.attr("d", path(sphere));
return svg.node();
}
height = width
a = [-158, 21.5] // Honolulu, HI
b = [-77, 39] // Washington, DC
r = d3.geoDistance(a, b) / 2 * 180 / Math.PI
projection = {
const projection = d3.geoTwoPointEquidistant(a, b)
.scale(width / 5.2)
.translate([width / 2, height / 2])
.precision(0.1);
switch (clipping) {
case "circle": projection.clipAngle(180 - r); break;
case "ellipse": projection.preclip(d3.geoClipPolygon(ellipse)); break;
}
return projection;
}
path = d3.geoPath(projection)
sphere = ({type: "Sphere"})
ellipse = {
const epsilon = 1e-3;
return {
type: "Polygon",
coordinates: [
[
[180 - r - epsilon, epsilon],
[180 - r - epsilon, -epsilon],
[-180 + r + epsilon, -epsilon],
[-180 + r + epsilon, epsilon],
[180 - r - epsilon, epsilon]
]
]
};
}
percentCircle = d3.geoArea(d3.geoCircle().radius(180 - r)()) / d3.geoArea(sphere)
percentPoly = d3.geoArea(ellipse) / d3.geoArea(sphere)
world = FileAttachment("land-50m.json").json()
land = topojson.feature(world, world.objects.land)
topojson = require("topojson-client@3")
d3 = require("d3@7", "d3-geo-projection@4", "d3-geo-polygon@2")
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.
