D3 Map projection for Europe like Albert USA

Question

I'm quite new to D3.js, up to now I've been able to find an answer to all my problems searching here and there, but I haven't found anything for this one, yet.

There's this very nice map projection for USA that shows Alaska and other places moved to the bottom of the map (albers USA).

I'm making several choropleth maps for nuts 2010 europe (the official way europe is divided in smaller region), and I will need to do something similar, showing Guyana, and some islands groups in different rectangles to the bottom or to the right of the map. Kind of like this: http://whs.moodledo.co.uk/file.php/1378/Europe_Quality_of_Life/GDP_Europe_2004.png

Plus I would need to show a zoom of Malta, so that you can actually see what color the choropleth is for it.

This is an example of my paths, extracted from a geojson, once they've been computed by q3.js:

....
<path id="ITI3" class="nut cat2" d="M519.439374985861..."></path>
<path id="ITI4" class="nut cat2" d="M496.3654726267817,575.02..."></path>
<path id="LT00" class="nut cat1" d="..."></path>
<path id="MT00" class="nut cat4" d="Z"></path>
<path id="LV00" class="nut cat1" d="M637.95Z"></path><path id="MT00" class="nut cat3" d="M517.0753838465" fill="#000"></path>
...

the id for the nuts region I'll need to move and resize are

FR91 (south america)
FR92 (south america)
FR93 (south america)
FR94 (somewhere close to madagascar)
MT00 (malta)
PT30
PT20
ES70

What do you suggest to do? Do I need to create several different layers for each of them at creation time, is it better to take albers USA projection and modify it accordingly or to transform them somehow after the path has been created? Or maybe something else I haven't yet thought about?

Thanks,

Answer 1

I wouldn't mess around with the actual shape files, just create a new projection. The implementation of Albert USA isn't too tricky:

function albersUsa(location) {
  var longitude = location[0],
      latitude = location[1];
  return (latitude > 50 ? alaska
      : longitude < -140 ? hawaii
      : latitude < 21 ? puertoRico
      : lower48)(coordinates);
}

https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-albersUsa

You should be able to create version for Europe.

Answer 2

If you check this example how to use Albers projection for the Europe, I'm sure you will be able to easily adjust it to your zoom, rotation and boundary preferences:

https://observablehq.com/@toja/five-map-projections-for-europe#_albers

You just need to tweak the parameters in your web page map script (code part copied from above):

albers = d3.geoAlbers()
    .rotate([-20.0, 0.0])
    .center([0.0, 52.0])
    .parallels([35.0, 65.0])
    .translate([width / 2, height / 2])
    .scale(700)
    .precision(.1)