GithubHelp home page GithubHelp logo

Comments (9)

n1ywb avatar n1ywb commented on April 25, 2024

of course it's been 10 minutes and I discovered that you can do it with the rotate function

.rotate([72.486237, -44.197227])

seems to center the map on my house

it's a bit different from origin b/c you have to flip the signs

the rotate docs could probably use some clarification on this use case, it seems pretty common

from d3-geo.

mbostock avatar mbostock commented on April 25, 2024

You are looking an example from 2011 that was writing for D3 2.x. In 2012, D3 3.0 was released which introduced a more general rotation system for geographic projections; see Upgrading to 3.0 from the D3 3.x API Reference. However, I recommend that new code be written for D3 4.x which was released in 2016. The documentation for d3-geo’s projection.rotate includes more recent examples.

from d3-geo.

n1ywb avatar n1ywb commented on April 25, 2024

where are the examples? I don't see them in the documentation.

from d3-geo.

mbostock avatar mbostock commented on April 25, 2024

The documentation for projection.rotate I linked to links to http://bl.ocks.org/mbostock/4282586. By my count the README links to 24 examples.

from d3-geo.

n1ywb avatar n1ywb commented on April 25, 2024

the release notes only say

"The albers.origin method has also been replaced by projection.rotate and projection.center"

from d3-geo.

mbostock avatar mbostock commented on April 25, 2024

Right, which it was. I acknowledge that’s perhaps not sufficient to tell you exactly how to update code that uses albers.origin to use projection.rotate; the expectation is that you’ll read the documentation for those methods. And with apologies, I’m not going to rewrite four-year-old release notes to provide further details.

from d3-geo.

n1ywb avatar n1ywb commented on April 25, 2024

origin() was removed from ALL projections not just albers AFAICT. But I'm not suggesting you rewrite rewrite four-year-old release notes.

For the benefit of all future d3.js users who may run into this issue I am putting some example code right here in this ticket

d3.js v2 example:

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03, 42.37])
    .mode("orthographic")
    .translate([640, 400]);

d3.js. v4 example:

var projection = d3.geoAzimuthalEquidistant()
    .scale(380)
    .rotate([71.03, -42.37]) // Note the flipped signs
    .translate([640, 400]);

It's almost a 1:1 but note the reversed signed-ness; you normal lon/lat becomes a relative offset instead of an absolute position.

I'm done.

from d3-geo.

mbostock avatar mbostock commented on April 25, 2024

Yes, there was also bonne.origin and azimuthal.origin. In 2.x, d3.geo.equirectangular and d3.geo.mercator didn’t support an origin property. (Along with d3.geo.albersUsa, though that’s been the case ever since by nature of it being a composite projection.)

The reason that bonne.origin and azimuthal.origin aren’t mentioned is because these classes were replaced as a whole. In 3.x, the Bonne projection moved to d3-geo-projection’s d3.geo.bonne; in 4.x, it was renamed to d3.geoBonne. The azimuthal projections likewise became d3.geoOrthographic and the like.

In 2.x, there was no generic projection interface, at least beyond a function that takes a point [longitude, latitude] as input and that returns [x, y]. Unlike in 3.x and later, which introduced projection.rotate, there were no generic projection methods, and so no generic projection.origin.

from d3-geo.

n1ywb avatar n1ywb commented on April 25, 2024

Here's a quick way to flip the sign on the coords; this effectively implements the origin() method AFAICT

projection.rotate(d3.geoRotation([lon, lat]).invert([0,0]));

from d3-geo.

Related Issues (20)

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.