Code Monkey home page Code Monkey logo

d3-geo-projection's Introduction

D3: Data-Driven Documents

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Resources

d3-geo-projection's People

Contributors

adamhooper avatar fil avatar jasondavies avatar likev avatar martgnz avatar mattcg avatar mbostock avatar mrhso avatar piwodlaiwo avatar portponky avatar rschmunk avatar stof avatar tmcw 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  avatar  avatar  avatar  avatar  avatar

Watchers

 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

d3-geo-projection's Issues

advice needed

your d3-geo-projections look super interesting.

i usually develop with c++ and use the openframework.cc libraries.
i was hoping to use your geographic projections code posted here in my project.

while i am mostly able to translate your code in to c++ i am not sure how your call your different projection functions and build a map from them.

do you pass in 360˚ values for λ and φ do represent the whole globe/ sphere?

here is how i translated eckert1.

ofPoint ofApp::eckert1(float λ,float φ) {
    //https://github.com/d3/d3-geo-projection/blob/master/src/eckert1.js
    float α = sqrt(8 / (3 * PI));
    return ofPoint(α * λ * (1 - abs(φ) / PI),α * φ);
}

ofPoint ofApp::eckert1_invert(float x,float y) {
    float α = sqrt(8 / (3 * PI));
    float φ = y / α;
    return ofPoint(x / (α * (1 - abs(φ) / PI)),φ);
};

i say mostly able because for example i am not sure what ε epsilon stands for in naturalEarth.invert function.

thanks for any advice.
stephan.

Bring more consistency to the API

I wonder if the raw projections should not all be added as generators in the raw or rawgenerator property of the projection. This would make them consistent and discoverable. Currently there is no easy way to remember is the xxxRaw is a projection generator or a projection — one has to look up README.md.

Also wonder if the documentation of each projection should not be added to src/{projection}.js, from which we could build the README.md.

Not to slow down release of 1.0!

Built-in interrupted projections.

Seems a bit strange that we don’t provide some of the standard interrupted projections as built-ins. For example, the interrupted Goode homolosine projection could be defined as:

import {homolosineRaw} from "./homolosine";
import interrupt from "./interrupt";

export default interrupt(homolosineRaw)
    .lobes([[ // northern hemisphere
      [[-180,   0], [-100,  90], [ -40,   0]],
      [[ -40,   0], [  30,  90], [ 180,   0]]
    ], [ // southern hemisphere
      [[-180,   0], [-160, -90], [-100,   0]],
      [[-100,   0], [ -60, -90], [ -20,   0]],
      [[ -20,   0], [  20, -90], [  80,   0]],
      [[  80,   0], [ 140, -90], [ 180,   0]]
    ]]);

geoStitch and geoQuantize should NOT modify in-place.

This was a lazy decision since they were only used on the command-line, but now that they are accessible programmatically, we should have them return copies. (And bump the major version number of this module to be safe.)

path.fit(feature, extent)

It’d be nice to have a standard API for project to bounding box:

projection
    .scale(1)
    .translate([0, 0]);

var b = path.bounds(feature),
    s = tolerance / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

projection
    .scale(s)
    .translate(t);

One tricky thing is that you may need to increase the projection precision temporarily to compute the bounds (since the precision is scale-dependent, and the scale is being set to 1). Perhaps it’d be sufficient to re-scale the precision based on the prior values, and then restore them?

polyhedron.waterman projection clearly differs from waterman’s version

This version seems to just be a Gnomonic projection on particular sections, while Waterman’s own projection is something different. (I can’t actually figure out what the technical details are on Waterman’s version.) The easiest place to see the difference is in the shape of the parallels near the poles. On a globe or azimuthal projection centered on a pole, these are shaped like quarter circles. In the d3/Gnomonic version, they are stretched toward the center. By contrast, in Waterman’s projection, the middle of each quarter circle is squished toward poles.

I highly recommend adding an explicit disclaimer that this is not actually Waterman’s projection per se. Ideally it would be possible to ask Waterman for the details and implement the projection properly. Even if the projection is going to stay as is though, users should be warned in the documentation about exactly what they’re getting.

gingery projections

Hi

Thank you this great plugin. I've had success changing the projection of my custom world topojson files. Particular enjoy the interrupted projections. But I couldn't manage to run the 'gingery' projection. Not sure the projection file has been updated with gingery details?

http://d3js.org/d3.geo.projection.v0.min.js

I've tried various versions of the code provide in the example http://www.jasondavies.com/maps/gingery/

e.g. var projection = d3.geo.gingery()

But without luck. I'll send a complete example of my code if you require.

Thank you

geograticule

When creating projected TopoJSON, it’d be handy to generate and bake a graticule or sphere into the generated Topology. (It’s now possible to use echo '{"type": "Sphere"} | geoproject` so we don’t really need sphere creation.)

Moved from topojson/topojson#157.

geo2svg --fill and --stroke

If you can pass a JavaScript expression to --fill and --stroke, you should have all the pieces needed to render a choropleth from data into a static SVG, which would be grand. (You can use ndjson-join to join the GeoJSON stream with a TSV stream of properties.)

The tricky part might be how to load d3 into one of these expressions, and how to define scales: mbostock/ndjson-cli#8.

Error: "toString()" failed

I have a .shp file of the whole globe. I tried using geostitch since I have a full globe and I get a similar error. Not sure if I am missing a js dependency or something else.

shp2json ~/data/mapping/world-combo-new/betas.shp -o world.json #this works

geoproject 'd3.geo.cylindricalEqualArea().parallel(37.5).fitSize([960,960],d)' < world.json > world-mercator.json


Error: "toString()" failed
    at Buffer.toString (buffer.js:495:11)
    at Object.parse (native)
    at ReadStream.<anonymous> (/usr/local/lib/node_modules/d3-geo-projection/bin/read.js:13:48)
    at emitNone (events.js:91:20)
    at ReadStream.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)```

geostitch --segment?

Some GIS (GISes?) assume linear interpolation, even in spherical coordinate systems such as WGS84 / EPSG:4326. This is bad because it is rotation-variant. In contrast, D3 / TopoJSON assume great arcs (spherical interpolation) between points on lines and rings in spherical coordinates.

It would be useful if TopoJSON had a built-in way to fix this assumption as part of the conversion process, introducing interstitial points. Ideally this would be adaptive and measure the deviation between the great arc and the Cartesian line, but here is a simple approach that could then be simplified to achieve the same result:

// Takes a sparse line string that assumes Cartesian interpolation in spherical
// coordinates and inserts interstitial points for greater accuracy when
// rendering with D3, which assumes spherical interpolation.
function resample(coordinates) {
  var i = 0,
      j = -1,
      n = coordinates.length,
      source = coordinates.slice(),
      p0, x0, y0,
      p1 = coordinates[0], x1 = p1[0], y1 = p1[1],
      dx, dy, d2,
      m2 = 10; // squared minimum angular distance
  while (++i < n) {
    p0 = p1, x0 = x1, y0 = y1;
    p1 = source[i], x1 = p1[0], y1 = p1[1];
    dx = x1 - x0, dy = y1 - y0, d2 = dx * dx + dy * dy;
    coordinates[++j] = p0;
    if (d2 > m2) for (var k = 1, m = Math.ceil(Math.sqrt(d2 / m2)); k < m; ++k) {
      coordinates[++j] = [x0 + dx * k / m, y0 + dy * k / m];
    }
  }
  coordinates[++j] = p1;
  coordinates.length = j + 1;
}

I’m not sure whether we want to assume that GeoJSON / Shapefile input assumes linear interpolation in spherical coordinates, or if we only want to enable this selectively using a command-line argument. Probably the latter is the safer course of action, although I suspect many users are not aware of this issue.

Moved from topojson/topojson#110.

d3.geoProject is not a function

Main problem

d3.geoProject is not recognized as a function, so I can't use it in my script.

Why I need to use it in script and not in command line ?

Because, my geojson file is big (~100Mo) and with geoproject 'd3.geoConicEqualArea()' < file1.json > file2.json it fires FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory.

Solution and main problem

So the solution was to run node with more memory, with the flags --max_old_space_size=16384 --optimize_for_size --max_executable_size=16384 --stack_size=16384 to allow 16Go of memory. Unfortunately, I can't run global package with these flags. So I need to wrap it up in a script and run it from my package.json.

Then I came with the problem that d3.geoProject is not a function. But I thought it was because of: https://github.com/d3/d3-geo-projection#geoProject and https://github.com/d3/d3-geo-projection/blob/master/bin/geoproject#L40

Infos

node v7.5.0
npm v4.2.0
d3 ^4.5.0

Thanks for your help

what am I doing wrong here?

would like to use d3.geo.centroid but...
node -e "var d3 = require('d3'); console.log(Object.keys(d3))"
doesn't contain "geo".
node -e "var d3 = require('d3'); require('d3-geo-projection')(d3);"
TypeError: Cannot set property 'project' of undefined.
node -e "var d3 = require('d3'); d3['geo'] = require('d3-geo-projection'); console.log(typeof d3.geo );"
function

.... any ideas?

Cahill–Keyes projection?

I've dreamt for years now of porting the Cahill-Keyes butterfly projection to a GIS platform. The existing CK formulas are brute force, I'm sure there's a lot of room to simplify and convert to actual algorithms, but my math skills are too weak for the task (and my time management weaker!).

So I'm lobbing the ball over here in the hopes someone else will be sufficiently inspired to carry it out.

Wrong naming with deployed via bower

In the "bower_components/d3-geo-projection" folder, the file name is:

d3.geo.projection.js

In the bower.json file, it has the "name" and "main" as "d3-geo-projection" and "d3-geo-projection.js".

In my Angular project, I'm using wiredeps and it's automatically including the "d3-geo-projection.js" file which can't be found since the file is using periods instead of dashes.

So the solution is to rename the file to use dashes or fix the bower.json config to use periods.

Icosahedral map

I would like to create a gnomonic icosahedral map (not a Fuller map, just a simple icosaheral map based on a simple icosahedral net) but as a neophyte in this area, i take inspiration from the gnomonic buterfly (octahedron) and my difficulty is to understand these lines in the buterfly.js code:

[-1, 0, 0, 1, 0, 1, 4, 5].forEach(function(d, i) {
    var node = faces[d];
    node && (node.children || (node.children = [])).push(faces[i]);
 });

What is the array [-1, 0, 0, 1, 0, 1, 4, 5] ? Could you give some reference to understand that ?
Thanks.

d3.geoProject

This was somewhat inadvertently removed in the 1.0 release. The implementation is arguably buggy in that it doesn’t preserve polygon semantics, but I will need this method to upgrade topojson to D3 4.1. Possibly it could be in a separate repository.

Error when using d3-geo-projection with d3 4.1?

I'm trying to use d3-geo-projection from within a Node.js context (to render some OSM data). I followed the instructions in the readme:

npm install d3 d3-geo-projection

and in my javascript:

var Canvas = require("canvas"),
    d3 = require("d3"),
    topojson = require("topojson"),
    rw = require("rw"),
    world = require("./world-110m.json");
require("d3-geo-projection")(d3);

But when I try to run this, I get:

undefined:4
  d3.geo.project = function(object, projection) {
                 ^

TypeError: Cannot set property 'project' of undefined
    at eval (eval at <anonymous> (/Users/iandees/Downloads/d32video/node_modules/d3-geo-projection/index.js:4:18), <anonymous>:4:18)
    at eval (eval at <anonymous> (/Users/iandees/Downloads/d32video/node_modules/d3-geo-projection/index.js:4:18), <anonymous>:1916:3)
    at Object.<anonymous> (/Users/iandees/Downloads/d32video/draw.js:9:29)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:146:18)
    at node.js:404:3

Authagraph projection?

Been using D3 for a while and came across this:

http://www.spoon-tamago.com/2016/10/28/hajime-narukawa-authagraph/

Less an issue, more of a wow check out this projection in case someone is interested in implementing it. I'm not even remotely enough of a mapping person to even know where to start implementing this, but it seems like it would be a pretty valuable type of projection for a lot of people (me included).

Noob questions

I'm interested in creating a projection for d3 that works with the s2 library co-ordinates from google https://docs.google.com/presentation/d/1Hl4KapfAENAOf4gv-pSngKwvS_jwNVHRPZTTDzXXn6Q/view#slide=id.i0

Things I'd like to try is rendering the earth out as a cube, using the 3 mentioned methods of linear / tangent / quadratic, as well as rendering stored s2 cells onto various projections.

What would be the basic pre-requisite knowledge that I would need to start?

How would you go about handling existing terrain / tile maps not made for this projection?

One thing I'm concerned about is performance, maybe past a certain zoom level I should drop back to a flat plane representing a cube face rather then doing all the projection math? How smooth would it be to transition between them?

SyntaxError: Invalid character '\u8224'

I am using d3 and d3.geo.projections to render a map of some simplified admin0 data. I am also using codekiy with uglify to compile my code. All goes well until I append d3.geo.projections.js.

There after my map does not render and I get an error message of in my console:
SyntaxError: Invalid character '\u8224'
...which seems to refer to some special characters in country names. For example "Saint Barth�lemy"

However, I am not using any of the extended projections yet, I get the error just from including the script. Uninclude the extended projections and the error goes away. Can you offer any thoughts?

fs.readFileSync is not a function

I am trying the node approach (using webpack):
var d3 = require("d3");
require("d3-geo-projection")(d3);

But I get this error:
Uncaught TypeError: fs.readFileSync is not a function

Any ideas?

Update to D3 4.0.

  • d3.geoAitoff
  • d3.geoAiry
  • d3.geoAlbers
  • d3.geoArmadillo
  • d3.geoAugust
  • d3.geoAzimuthalEqualArea
  • d3.geoAzimuthalEquidistant
  • d3.geoBaker
  • d3.geoBerghaus
  • d3.geoBoggs
  • d3.geoBonne
  • d3.geoBottomley
  • d3.geoBromley
  • d3.geoChamberlin
  • d3.geoCollignon
  • d3.geoConicConformal
  • d3.geoConicEquidistant
  • d3.geoCraig
  • d3.geoCraster
  • d3.geoCylindricalEqualArea
  • d3.geoCylindricalStereographic
  • d3.geoEckert1
  • d3.geoEckert2
  • d3.geoEckert3
  • d3.geoEckert4
  • d3.geoEckert5
  • d3.geoEckert6
  • d3.geoEisenlohr
  • d3.geoEquirectangular
  • d3.geoFahey
  • d3.geoFoucaut
  • d3.geoGilbert
  • d3.geoGingery
  • d3.geoGinzburg4
  • d3.geoGinzburg5
  • d3.geoGinzburg6
  • d3.geoGinzburg8
  • d3.geoGinzburg9
  • d3.geoGnomonic
  • d3.geoGringorten
  • d3.geoGringortenQuincuncial
  • d3.geoGuyou
  • d3.geoHammer
  • d3.geoHammerRetroazimuthal
  • d3.geoHealpix
  • d3.geoHill
  • d3.geoHomolosine
  • d3.geoInterrupted
  • d3.geoKavrayskiy7
  • d3.geoLagrange
  • d3.geoLarrivee
  • d3.geoLaskowski
  • d3.geoLittrow
  • d3.geoLoximuthal
  • d3.geoMercator
  • d3.geoMiller
  • d3.geoModifiedStereographic
  • d3.geoModifiedStereographicAlaska
  • d3.geoModifiedStereographicGs48
  • d3.geoModifiedStereographicGs50
  • d3.geoModifiedStereographicMiller
  • d3.geoModifiedStereographicLee
  • d3.geoMollweide
  • d3.geoMtFlatPolarParabolic
  • d3.geoMtFlatPolarQuartic
  • d3.geoMtFlatPolarSinusoidal
  • d3.geoNaturalEarth
  • d3.geoNellHammer
  • d3.geoOrthographic
  • d3.geoPatterson
  • d3.geoPeirceQuincuncial
  • d3.geoPolyconic
  • d3.geoRectangularPolyconic
  • d3.geoRobinson
  • d3.geoSatellite
  • d3.geoSinusoidal
  • d3.geoSinuMollweide
  • d3.geoStereographic
  • d3.geoTimes
  • d3.geoTransverseMercator
  • d3.geoTwoPointAzimuthal
  • d3.geoTwoPointEquidistant
  • d3.geoVanDerGrinten
  • d3.geoVanDerGrinten2
  • d3.geoVanDerGrinten3
  • d3.geoVanDerGrinten4
  • d3.geoWagner4
  • d3.geoWagner6
  • d3.geoWagner7
  • d3.geoWiechel
  • d3.geoWinkel3

Tests for stitching.

From the TopoJSON 1.x tests:

//
// A-----B-----C-----D-----E
// |                       |
// |                       |
// J-----I-----H-----G-----F
tape("topology a polygon surrounding the South pole with a cut along the antimeridian", function(test) {
  var topology = topojson.topology({
    polygon: {type: "Polygon", coordinates: [[
      [-180, -80], [-90, -80], [0, -80], [90, -80], [180, -80],
      [180, -90], [90, -90], [0, -90], [-90, -90], [-180, -90],
      [-180, -80]
    ]]}}, 4);
  test.deepEqual(topology.arcs, [
    [[0, 3], [1, 0], [1, 0], [-2, 0]]
  ]);
  test.deepEqual(topology.objects.polygon, {type: "Polygon", arcs: [[0]]});
  test.end();
});

//
// B-----C-----D-----E-----F
// |                       |
// |                       |
// A                       G
// |                       |
// |                       |
// L-----K-----J-----I-----H
tape("topology a large polygon surrounding the South pole with a cut along the antimeridian", function(test) {
  var topology = topojson.topology({
    polygon: {type: "Polygon", coordinates: [[
      [-180, -85], [-180, -80], [-90, -80], [0, -80], [90, -80], [180, -80],
      [180, -85], [180, -90], [90, -90], [0, -90], [-90, -90], [-180, -90],
      [-180, -85]
    ]]}}, 5);
  test.deepEqual(topology.arcs, [
    [[0, 4], [1, 0], [1, 0], [1, 0], [-3, 0]]
  ]);
  test.deepEqual(topology.objects.polygon, {type: "Polygon", arcs: [[0]]});
  test.end();
});

//
// A-----B-----C-----D
// |                 |
// N                 E
//  \               /
//   M             F
//  /               \
// L                 G
// |                 |
// K-----J-----I-----H
tape("topology a large polygon with a hole across the antimeridian and cut along the antimeridian", function(test) {
  var topology = topojson.topology({
    polygon: {type: "Polygon", coordinates: [[
      [-180, -60], [-180, -30], [-150, 0], [-180, 30], [-180, 60], [-60, 60], [60, 60],
      [180, 60], [180, 30], [150, 0], [180, -30], [180, -60], [60, -60], [-60, -60], [-180, -60]
    ]]}}, 8);
  test.deepEqual(topology.arcs, [
    [[0, 7], [2, 0], [3, 0], [-5, 0]],
    [[0, 0], [5, 0], [-3, 0], [-2, 0]],
    [[0, 5], [6, -1], [-6, -2], [1, 2], [-1, 1]]
  ]);
  test.deepEqual(topology.objects.polygon, {type: "Polygon", arcs: [[0], [1], [2]]});
  test.end();
});

Error started appearing after recent release to 4.7.1

Greetings!

We have some geoJSON files that are giving us unexpected errors after the recent release of 4.7.1. Not all of them are failing, which is strange. All of the ones that are failing validate in a geoJSON validator just fine. No changes have been made to these files in the last 4 months.

The error we receive is "Error: attribute d: Expected number, "MNaN,NaNLNaN,NaN"
Our code is below. And the JSON is attached.
0157_02_json.txt

Any idea why this is happening?
`
vm.projection = d3.geoMercator().rotate([0, vm.rotation]);
vm.path = d3.geoPath()
.projection(vm.projection.fitExtent([[0, 0], [vm.w, vm.h]], json));

            vm.svg.selectAll(".room")
                .data(vm.rooms)
                .enter().append("path")
                .attr("class", "room")
                .attr("d", vm.path)
                .attr("fill", "#fff")
                .attr("stroke", "none")
                .attr("id", function (d) {
                    return d.properties.loc;
                })
                .on("mouseover", function (d) {
                    vm.div.transition()
                        .duration(90)
                        .style("opacity", 1);
                    vm.div.html(d.properties.room)
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                })
                .on("mouseout", function (d) {
                    vm.div.transition()
                        .duration(90)
                        .style("opacity", 0);
                })
                .on('click', function (d) {
                    d3.selectAll(".room").attr("fill", "#fff").attr("stroke", "none");
                    d3.select(this).attr("fill", "#BBDEFB").attr("stroke-width", "2").attr("stroke", "#FF5722");
                    vm.handleClick(d);
                });`

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.