# d3-composite-projections

[![Build Status](https://travis-ci.org/rveciana/d3-composite-projections.svg?branch=master)](https://travis-ci.org/rveciana/d3-composite-projections)

Set of d3 projections for showing countries' distant lands together

![conicConformalFrance](thumbnail.png "Conic Conformal France example")

# USAGE

This is the version compatible with d3v4, please [go here for the version compatible with d3v3](https://github.com/rveciana/d3-composite-projections/tree/v0.4.0).

The projection itself works the same way as the other d3 projections. To be more precise, exactly as the [albersUsa](https://github.com/mbostock/d3/wiki/Geo-Projections#albersUsa) projection:

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

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

The projection is available for:

- USA: [geoAlbersUSA](http://bl.ocks.org/rveciana/ee2119324e835e1bad42d0e4c1b9ab0d)
- USA Territories: [geoAlbersUsaTerritories](http://bl.ocks.org/rveciana/5040be82aea528b6f785464f8816690f) as albersUsa, but adding the American Samoa, Puerto Rico, U.S. Virgin Islands, Guam and Northern Marianas Islands, so all the [Congressional Districts](https://en.wikipedia.org/wiki/List_of_districts_of_the_House_of_Representatives_of_Japan) are represented
- France: [geoConicConformalFrance](http://bl.ocks.org/rveciana/0ff189b15449330828605fe4e118a716)
- Portugal: [geoConicConformalPortugal](http://bl.ocks.org/rveciana/ee09a2c3732f3e0d6872d1a7f796a29b)
- Spain: [geoConicConformalSpain](http://bl.ocks.org/rveciana/d635afded8c4eae36ecf61a15bdf0a98)
- Europe: [geoConicConformalEurope](http://bl.ocks.org/rveciana/ced3109b372039afbcf7278ba3d14250) (thought for Eurostat data)
- Japan: [geoConicEquidistantJapan](http://bl.ocks.org/rveciana/1f5399d8887428ad67665d106ec089d1)
- Ecuador: [geoMercatorEcuador](http://bl.ocks.org/rveciana/306a5202e1facf7a22e08fbb1044f568)
- Chile: [geoTransverseMercatorChile](http://bl.ocks.org/rveciana/3a31865e82f4fab8ac2522545bbc7741), including the [Chilean Antarctic Territory](https://en.wikipedia.org/wiki/Chilean_Antarctic_Territory)
- Malaysia: [geoMercatorMalaysia](http://bl.ocks.org/rveciana/6298dd3e71cf98b6930c06f19b6684a2), created with the help of [Saiful Azfar Ramlee](https://github.com/saifulazfar)
- Equatorial Guinea [geoMercatorEquatorialGuinea](http://bl.ocks.org/rveciana/4dfc136b8e2707f182aa4591f892f82e)
- UK [geoAlbersUk](https://gist.github.com/rveciana/27272a581e975835aaa321ddf816d726)

To draw the borders between the projection zones, use `getCompositionBorders()` 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

---

    var d3_composite = require("d3-composite-projections");
    var d3_geo = require("d3-geo");
    var projection = d3_composite.geoAlbersUsaTerritories();

# INSTALLATION

## Getting the files

You can get the files just by cloning the repository:

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

or downloading the _d3-composite-projections.js_ or _d3-composite-projections.min.js_ files.

## Using cdnjs or unpkg

You can link the files from your web page to [cdnjs](https://cdnjs.com/libraries/d3-composite-projections):

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

or

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

## As a module:

Install the library:

    npm install --save d3-composite-projections

Import it:

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

## In node:

Install the library:

    npm install --save d3-composite-projections

Import it:

    const d3cp = require("d3-composite-projections")

    const projection = d3cp.geoAlbersUk();

## Running the tests

Download the library bu cloning the git repo:

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

The tests can be run using:

    npm test