rveciana / d3-composite-projections Goto Github PK

I don't believe the scale works the way you imagined it would. Or maybe I'm confused about how you intended it to be called but it does not seem that clear.

 createMap = () => {
      const node = this.node;
      const { geojson } = this.state;
      const projection = d3Projections.albersUsa.scale(1000);
      const path = geoPath().projection(projection)

      console.log(d3Projections)
      select(node)
          .selectAll('path')
          .data(geojson)
          .enter()
          .append('path')
          .attr('d', path)
          .attr('class', 'state')
          .style('stroke', '#fff')
          .style('stroke-width', '1')
          .on('click', this.handleToolTip.bind(this))
          .on('mouseover', function(state) {
              select(this).style('fill', 'grey');
          })
          .on('mouseout', function(state) {
              select(this).style('fill', 'black');
          })

  }

I can see that you were able to show Puerto Rico in albersUsa projection. I am trying to do the same. I have a file that has Puerto Rico and want to render it in albersUsa projection but it gets filtered out - vanishes every time I use albersUSA projection.

Is there a way to render it by Vega or Vega-Lite in "albersUsa" projection without filtering Puerto Rico.
Any leads would be very helpful.

• NOT AN ISSUE ABOUT d3-composite-projection

Sorry noob here trying to create custom composite projection for Malaysia though, i tried to follow the calculations from EquadorMercator but seems my graticule looks ugly,

http://bl.ocks.org/saifulazfar/76053d7a7d420a3a0bc0fb5849006309

FYI world-50m.json also attached with the gist, i recommend you try with the world data also, need advice with the clipping

any help or advise welcome

Please, can you rebuild the file?

@lukasappelhans did a PR that is not included there yet (but in composite-projections).

Hi,

I'm using your project into an Angular project.

It works as long as I'm not in 'strict' mode. The issue I'm facing is that it can't find a declaration file.
Is there any .d.ts somewhere?

Any hint to create one?

Thanks,

so I'm following these instructions for generating topojson for US Congressional districts

from this shapefile data for 114th Congress from US census available at
ftp://ftp2.census.gov/geo/tiger/TIGER2016/CD/

and I realize, whoa, there are several distant lands of the US beyond Alaska and Hawaii

it would be cool to add a d3-composite-projection that includes the territories represented by the non-voting members of the U.S. House of Representatives

American Samoa
Guam
Northern Mariana Islands
Puerto Rico
U.S. Virgin Islands

since d3-composite-projection not clip but rather only translate by separate composite feature...lets do composite with d3.geoClipPolygon...i think its better since its respect the graticule line within non square bbox...here i share my example experiment https://observablehq.com/@saifulazfar/composite-projection-with-d3-geoclippolygon as ref...maybe with new update include typing too

I like the composition borders that you used in this example, but it seems that in 1.0.0 they come out in boxes like this.

I'm using D3v4, so I'm assuming that 0.3.5 is incompatible, is there another way to achieve this type of border?

Thanks!

I would like a map of Europe similar to the currently available one, i.e. Europe and Canaries.
My initial understanding is that I could add a new composite projection with the pieces I need.
I would then like to use it in Observable, so I guess I could make it available from my forked repo?

Thanks in advance for any helps provided

d3: v4.5.0
d3-geo-projection: v1.2.1
d3-composite: v1.1.0

This one made me mad and I couldn't reproduce it on jsfiddle because of the wrong version number...

So I can't use geoProject on geoConicConformalFrance()

Here is a link to test > https://jsfiddle.net/x0z94gmc/6/

When I browse Europe composite's block it does not show any map up.
In the console I get

Refused to execute script from 'https://raw.githubusercontent.com/rveciana/d3-composite-projections/master/src/conicConformalEurope-proj.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
Uncaught TypeError: d3.geo.conicConformalEurope is not a function

I think this is sue to the way github serves raw files, i.e. as text, in order to avoid sniffing, see this SO item

There is still one use of raw.githubusercontent.com to be changed in the index.html

I forked and fixed it here

Is it possible to use these composite projections with the geoproject command line tool that's part of the https://github.com/d3/d3-geo-projection repo?

The version that bower returns to me is the 0.0.0 instead of the 0.0.3 that was recently released.
Is the bower version outdated?

not really an issue here...just a question if its possible

im trying to achieve this (a template for my malaysia map project)

its mean that (if its possible) to have custom clipextent rather rectangular clip

any help would be great...

inspired from this great national geographic map

Hi,

I discovered a bug I think, I cannot use fitSize on geoConicConformalFrance

Open your devtools and try to uncomment line 4.
Here the jsfiddle to test > https://jsfiddle.net/x0z94gmc/3/

Maybe I didn't use it the right way?

There is comment script here on albersUsaTerritories,js#L62-L98 to calculate values from Bounding Box

        var puertoRicoBbox = [[-68.3, 19], [-63.9, 17]];
        var samoaBbox = [[-171, -14], [-168, -14.8]];
        var guamBbox = [[144, 20.8], [146.5, 12.7]];

        console.info("******");
        var c0 = puertoRico(puertoRicoBbox[0]);
        var x0 = (c0[0] - t[0]) / k;
        var y0 = (c0[1] - t[1]) / k;
        console.info("p0 puertoRico", x0 + ' - ' + y0);
        var c1 = puertoRico(puertoRicoBbox[1]);
        var x1 = (c1[0] - t[0]) / k;
        var y1 = (c1[1] - t[1]) / k;
        console.info("p1 puertoRico", x1 + ' - ' + y1);
        c0 = samoa(samoaBbox[0]);
        x0 = (c0[0] - t[0]) / k;
        y0 = (c0[1] - t[1]) / k;
        console.info("p0 samoa", x0 + ' - ' + y0);
        c1 = samoa(samoaBbox[1]);
        x1 = (c1[0] - t[0]) / k;
        y1 = (c1[1] - t[1]) / k;
        console.info("p1 samoa", x1 + ' - ' + y1);
        c0 = guam(guamBbox[0]);
        x0 = (c0[0] - t[0]) / k;
        y0 = (c0[1] - t[1]) / k;
        console.info("p0 guam", x0 + ' - ' + y0);
        c1 = guam(guamBbox[1]);
        x1 = (c1[0] - t[0]) / k;
        y1 = (c1[1] - t[1]) / k;
        console.info("p1 guam", x1 + ' - ' + y1);

    return (y >= 0.120 && y < 0.234 && x >= -0.425 && x < -0.214 ? alaska
        : y >= 0.166 && y < 0.234 && x >= -0.214 && x < -0.115 ? hawaii
        : y >= 0.2064 && y < 0.2413 && x >= 0.312 && x < 0.385 ? puertoRico
        : y >= 0.09 && y < 0.1197 && x >= -0.4243 && x < -0.3232 ? samoa
        : y >= -0.0518 && y < 0.0895 && x >= -0.4243 && x < -0.3824 ? guam
        : lower48).invert(coordinates);

However its shown nothing on my browser console...can somebody help

Hey,
I'm trying to use the geoAlbersUsaTerritories projection, but whenever I try, I get an error on line 222 (lower48 = d3Geo.geoAlbers()) saying Uncaught TypeError: d3Geo.geoAlbers is not a function

Likewise, if I try to use the standard d3.geoAlbersUsa() function, I get the exact same error, except at line 89 (which is identical to line 82,) and line 716 has a similar error if I try to use d3.geoConicConformalPortugal(). Whatever it is, something seems to be off with d3Geo.

I'm using D3 v4. Any ideas why this isn't behaving? Thanks!

A quick look at the bower.json reveals that is not updated to the latest version. Could you bump it up?

Thanks!