GithubHelp home page GithubHelp logo

d3-geo-polygon's Introduction

d3-geo-polygon

Clipping and geometric operations for spherical polygons.

Installing

If you use NPM, npm install d3-geo-polygon. Otherwise, download the latest release. You can also load directly from unpkg. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>

// new projection
var projection = d3.geoDodecahedral();

// polyhedral projections don’t need SVG or canvas clipping anymore
var projection = d3.geoPolyhedralCollignon();

// arbitrary polygon clipping on any projection
var projection = d3.geoEquirectangular()
    .preclip(d3.geoClipPolygon({
      type: "Polygon",
      coordinates: [[[-10, -10], [-10, 10], [10, 10], [10, -10], [-10, -10]]]
    }));

</script>

API Reference

# d3.geoClipPolygon(polygon) · Source, Examples

Given a GeoJSON polygon or multipolygon, returns a clip function suitable for projection.preclip.

# clip.polygon()

Given a clipPolygon function, returns the GeoJSON polygon.

# d3.geoIntersectArc(arcs) · Source, Examples

Given two spherical arcs [point0, point1] and [point2, point3], returns their intersection, or undefined if there is none. See “Spherical Intersection”.

Projections

d3-geo-polygon adds polygon clipping to the polyhedral projections from d3-geo-projection. Thus, it supersedes the following symbols:

# d3.geoPolyhedral(tree, face) · Source, Examples

Defines a new polyhedral projection. The tree is a spanning tree of polygon face nodes; each node is assigned a node.transform matrix. The face function returns the appropriate node for a given lambda and phi in radians.

# polyhedral.tree() returns the spanning tree of the polyhedron, from which one can infer the faces’ centers, polygons, shared edges etc.

# d3.geoPolyhedralButterfly() · Source

The gnomonic butterfly projection.

# d3.geoPolyhedralCollignon() · Source

The Collignon butterfly projection.

# d3.geoPolyhedralWaterman() · Source

A butterfly projection inspired by Steve Waterman’s design.

New projections are introduced:

# d3.geoPolyhedralVoronoi([parents], [polygons], [faceProjection], [faceFind]) · Source

Returns a polyhedral projection based on the polygons, arranged in a tree according to the parents list. polygons are a GeoJSON FeatureCollection of geoVoronoi cells, which should indicate the corresponding sites (see d3-geo-voronoi). An optional faceProjection is passed to d3.geoPolyhedral() -- note that the gnomonic projection on the polygons’ sites is the only faceProjection that works in the general case.

The .parents([parents]), .polygons([polygons]), .faceProjection([faceProjection]) set and read the corresponding options. Use .faceFind(voronoi.find) for faster results.

# d3.geoCubic() · Source, Examples

The cubic projection.

# d3.geoDodecahedral() · Source, Examples

The dodecahedral projection.

# d3.geoIcosahedral() · Source, Examples

The icosahedral projection.

# d3.geoAirocean() · Source, Examples

Buckminster Fuller’s Airocean projection (also known as “Dymaxion”), based on a very specific arrangement of the icosahedron which allows continuous continent shapes. Fuller’s triangle transformation, as formulated by Robert W. Gray (and implemented by Philippe Rivière), makes the projection almost equal-area.

# d3.geoCahillKeyes() · Source, Examples
# d3.geoCahillKeyes

The Cahill-Keyes projection, designed by Gene Keyes (1975), is built on Bernard J. S. Cahill’s 1909 octant design. Implementation by Mary Jo Graça (2011), ported to D3 by Enrico Spinielli (2013).

# d3.geoImago() · Source, Examples

The Imago projection, engineered by Justin Kunimune (2017), is inspired by Hajime Narukawa’s AuthaGraph design (1999).

# imago.k([k])

Exponent. Useful values include 0.59 (default, minimizes angular distortion of the continents), 0.68 (gives the closest approximation of the Authagraph) and 0.72 (prevents kinks in the graticule).

# imago.shift([shift])

Horizontal shift. Defaults to 1.16.

# d3.geoTetrahedralLee() · Source, Examples
# d3.geoLeeRaw

Lee’s tetrahedral conformal projection.

# Default angle is +30°, apex up (-30° for base up, apex down).

Default aspect uses projection.rotate([30, 180]) and has the North Pole at the triangle’s center -- use projection.rotate([-30, 0]) for the South aspect.

# d3.geoCox() · Source, Examples
# d3.geoCoxRaw

The Cox conformal projection.

# d3.geoComplexLog([planarProjectionRaw[, cutoffLatitude]]) · Source, Example
# d3.geoComplexLogRaw([planarProjectionRaw])

Complex logarithmic view. This projection is based on the papers by Joachim Böttger et al.:

The specified raw projection planarProjectionRaw is used to project onto the complex plane on which the complex logarithm is applied. Recommended are azimuthal equal-area (default) or azimuthal equidistant.

cutoffLatitude is the latitude relative to the projection center at which to cutoff/clip the projection, lower values result in more detail around the projection center. Value must be < 0 because complex log projects the origin to infinity.

# complexLog.planarProjectionRaw([projectionRaw])

If projectionRaw is specified, sets the planar raw projection. See above. If projectionRaw is not specified, returns the current planar raw projection.

# complexLog.cutoffLatitude([latitude])

If latitude is specified, sets the cutoff latitude. See above. If latitude is not specified, returns the current cutoff latitude.

d3-geo-polygon's People

Contributors

biosmanager avatar dependabot[bot] avatar fil avatar goszczynskip avatar mbostock avatar stof avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

d3-geo-polygon's Issues

named imports fail in webpack build.

Trying to bundle this in a webpack-based app, I find it breaks because it assumes a hardcoded location for node_modules in many places, eg (from here).

import {abs, degrees, epsilon, radians} from "../../node_modules/d3-geo-projection/src/math";
import {default as matrix, multiply, inverse} from "../../node_modules/d3-geo-projection/src/polyhedral/matrix";

yielding many errors like

ERROR in ./node_modules/d3-geo-polygon/src/polyhedral/waterman.js
Module not found: Error: Can't resolve '../../node_modules/d3-geo-projection/src/math' in '/home/bschmidt/project/node_modules/d3-geo-polygon/src/polyhedral'

Since I'm also requiring d3-geo-projection, these files are not inside the d3-geo-polygon folder: they're located at something like '../../../node_modules', maybe a level higher.

I'm able to get a successful install by just removing the prefix in all javascript files and importing straight from (eg) d3-geo-projection/src/math

~/project/node_modules/d3-geo-polygon/ find . -name "*.js" | xargs -I {} -n 1 perl -pi -e 's/\..\/\..\/node_modules\///g' {}

Can file a pull request if desired, but I don't know if that fix will break in other locations.

Thanks!

Use clipPolygon for geoInterrupted

example code that works (at least in one test case):

var c = projection.lobes().map(d => d3.merge(d.map(q => {
  var centroid = d3.geoCentroid({type:"MultiPoint", coordinates:q});
  return q.map(p => d3.geoInterpolate(p,centroid)(1e-7)); // pull inside each lobe
})));
c = d3.merge([c[0], c[1].reverse()]); // north, south
projection.preclip(d3.geoClipPolygon({ type: "Polygon", coordinates: [c] }));

capture d ecran 2018-04-19 a 09 31 17

the projection was defined by:

    var lobes = [
      [
        [[-180, 0], [-130, 90], [-95, 0]],
        [[-95, 0], [-30, 90], [55, 0]],
        [[55, 0], [120, 90], [180, 0]]
      ],
      [
        [[-180, 0], [-120, -90], [-60, 0]],
        [[-60, 0], [20, -90], [85, 0]],
        [[85, 0], [140, -90], [180, 0]]
      ]
    ];
    projection = d3.geoInterrupt(d3.geoHomolosineRaw, lobes).rotate([-204, 0])
    .fitExtent([[10, 10], [width-10, height-10]], {type: "Sphere"});

MultiPolygon clipping

The multipolygon branch is a first step towards #9 and #11.

There is a demo here:
https://beta.observablehq.com/d/368627e7d1bcc0cb

each polygon is processed in turn.

multipolygon clipping 1

There are still a few bugs though — as you can see if you rotate the map in the demo, there are sometimes mix-ups in the variables that control the points' visibility, resulting in dots for points that should belong to a polygon, or in full-white surfaces that should be full-black.

capture d ecran 2018-09-12 a 22 26 28

capture d ecran 2018-09-12 a 22 25 58

Easier usage with d3.geoProject?

It’d be nice if this library were easier to use when saving spherically-clipped GeoJSON. For example:

https://beta.observablehq.com/d/d706c7f9c6e46907

The tedious parts are:

  • You need to wrap the d3.geoClipPolygon instance with an object that has a stream method.

  • You need to compose the d3.geoClipPolygon instance with streams that transform from degrees to radians and then back again.

Part of me wonders if it’s worth revisiting a more composable geographic projection pipeline…

(Also, I think d3.geoProject sometimes breaks polygon semantics, but that’s a separate issue.)

faster Voronoi projection

see https://beta.observablehq.com/@fil/speed-of-the-voronoi-projection

The projection is 100x faster if it can use geovoronoi.find() to know to which face a point belongs. In my local branch, I've solved this by allowing to pass a faceFind function.

But should we limit ourselves to this, or be bolder and pass a full geoVoronoi object (which would also help in finding shared edges much faster, by using the delaunay topology)?

Can this library be used with other projections?

Namely, d3.geoAlbers? I am trying to use preclipping and am getting very strange results.

More to the point.
Polygon 1:
[ [ [ 30, 60 ], [ 90, 60 ], [ 90, 30 ], [ 30, 30 ], [ 30, 60 ] ] ]
Polygon 2:
[ [ [ 45, 75 ], [ 75, 75 ], [ 75, 15 ], [ 45, 15 ], [ 45, 75 ] ] ]

Projection:
d3.geoAlbers() .rotate([-105, 0]) .center([-10, 65]) .parallels([52, 64]);

Below is a picture made in qGis, cyan polygon (P2) is being clipped, green is the one doing the clipping (P1) (the one passed to geoClipPolygon and the result passed to preclip). Both polygons are already projected (but not preclipped).
intersection

After projecting, P2 is null.

Clean up Waterman / Cahill

The issue is described here: d3/d3-geo-projection#125

To sum up this would need to:

  • introduce geoCahill1909 (which would be geoPolyhedralWaterman but with the inferior choice of angles from Cahill's original — and that could be a parameter of course), and be mindful of the face projection used in 1909
  • create a "true" geoWaterman with Antarctica cut out (see also #11)
  • obsolete geoPolyhedralWaterman

planar polygon clipping

The Imago projection needs to use polygon clipping; but it seems a bit absurd that we are doing spherical clipping (with 200 control points computed as the inverse of 200 planar points) just to do what is in the end a simple rectangular clipping. The thing is tricky because, so close to the limit, the spherical interpolation between control points might jump from one side to the other.

Node >10.17.0 support

This package is constrained to node ">=6.0.0 <=10.17.0". Using this package with maintained node versions without ignoring engines constraint isn't possible. Is there any reason why this constraint is present in d3-geo-polygon package.json?

Part of API doesn't seem to rely on node internals eg. geoArcIntersect. Maybe if part of API needs old node version it'll be good idea to move independent code parts into other package.

Tetrahedral Lee: Inverse broken?

Hello,

the inverse of the Tetrahedral Lee does not seem to work.
I’ve used the script by @cambeccsee here – to try this. Here is a demo, on top is the Imago projection where the inverse works (everything’s filled with blue pixels) but on the Lee, I only get a red triangle.

Am I doing something wrong or is the inverse broken?

Kind regards,
Tobias

epsilon3 and intersect(a, b)

From Jason Davies's code (ported in 82d9481#diff-1955ba130f17ffd3f1a5db97ee798e02R13 ), there was an epsilon2 test in this function.

Somehow it allowed lines to escape the clipping on some occasions, so I lowered it to epsilon3 in 202e604 and got much less errors.

But it still happens, and the fix is to get rid of any epsilon and compare the values with 0.

capture d ecran 2018-02-22 a 12 10 13
capture d ecran 2018-02-22 a 12 10 07

I wonder what I'm missing (in which cases this value should be st. positive), but testing in all my examples seems to be OK with 0 instead of epsilon3.

d3.geoVoronoi() is not (yet) existing?

First, thanks for your great contributions regarding projections in D3. I have been playing with your new added projections in this d3-geo-polygon extension in combination with vega. Firstly I used the airocean projection to cut and engrave some wood using laser and liked the result¹.

But now having seen these maps on https://beta.observablehq.com/@fil/speed-of-the-voronoi-projection I would love to play with this projection as well.

I used the method as mentioned in the notebook:

The following map was made with the Voronoi projection — available as d3.geoVoronoi() in d3-geo-polygon.

When I try to use this:
projection = d3.geoVoronoi()

I receive:
TypeError: d3.geoVoronoi is not a function

Question: I'm trying features that are not yet available? or do I call them wrongly?

¹ Click to expand

img_1049
img_1050

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.