Repository files navigation

Set of d3 projections for showing countries' distant lands together

This is the version compatible with d3v6, pleasego here for the version compatible with d3v3.

The projection itself works the same way as the other d3 projections. To be more precise, exactly as thealbersUsa projection:

<scriptsrc="https://d3js.org/d3.v4.min.js"></script><scriptsrc="d3-composite-projections.js"></script><script>varprojection=d3.geoConicConformalPortugal();</script>

Change the scale using scale i.e..scale(3000), as usual. The projections are prepared to fit a 960x500px SVG or Canvas.

Projections are available for:

• USA:geoAlbersUSA
• USA Territories:geoAlbersUsaTerritories as albersUsa, but adding the American Samoa, Puerto Rico, U.S. Virgin Islands, Guam and Northern Marianas Islands, so all theCongressional Districts are represented
• France:geoConicConformalFrance
• Portugal:geoConicConformalPortugal
• Spain:geoConicConformalSpain
• NetherlandsgeoConicConformalNetherlands
• Europe:geoConicConformalEurope (thought for Eurostat data)
• Japan:geoConicEquidistantJapan
• Ecuador:geoMercatorEcuador
• Chile:geoTransverseMercatorChile, including theChilean Antarctic Territory
• Malaysia:geoMercatorMalaysia, created with the help ofSaiful Azfar Ramlee
• Equatorial Guinea:geoMercatorEquatorialGuinea
• United Kingdom:geoAlbersUk
• Denmark:geoTransverseMercatorDenmark

To draw the borders between the projection zones, usegetCompositionBorders() for SVG:

svg.append("path").style("fill","none").style("stroke","#000").attr("d",path(projection.getCompositionBorders()));

or drawCompositionBorders if using Canvas:

projection.drawCompositionBorders(context);

Using with node

vard3_composite=require("d3-composite-projections");vard3_geo=require("d3-geo");varprojection=d3_composite.geoAlbersUsaTerritories();

You can get the files just by cloning the repository:

git clone https://github.com/rveciana/d3-composite-projections.git

or downloading thed3-composite-projections.js ord3-composite-projections.min.js files.

You can link the files from your web page tocdnjs:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/1.0.2/d3-composite-projections.min.js"></script>

or

<scriptsrc="https://unpkg.com/d3-composite-projections@1.2.0"></script>

Install the library:

npm install --save d3-composite-projections

Import it:

import{geoAlbersUk}from"d3-composite-projections";

Install the library:

npm install --save d3-composite-projections

Import it:

constd3cp=require("d3-composite-projections");constprojection=d3cp.geoAlbersUk();

Download the library by cloning the git repo:

git clone https://github.com/rveciana/d3-composite-projections.git

The tests can be run using:

npmtest