Changing D3js albersUsa state size

I have recently been playing around and exploring the D3js library and absolutely loving it. I received a creative of a data visualisation for a companies growth in the USA with Alaska and Hawaii moved below the US core states.

The albersUsa projection is perfect for this, however the creative required Alaska and Hawaii to be significantly larger in size than the standard albersUsa projection. I researched google to find a solution for increasing the size of states and only came across one suggestion for copy pasting the section in the D3 library that mentions albersUsa and modifying the coordinates. This had me still loading the library through CDN. This solution did not work however so I will explain below how I achieved it.

How to increase the size of Alaska and Hawaii

Instead of loading the D3 library through CDN you should download the whole library into your project folder and load it locally. If you don’t know how, the D3 O’Reilley book has a great explanation. In the d3.js file search for albersUsa and change what you need.

First I changed the .rotate method to align Alaska and Hawaii how I wanted.

Then I searched for the .scale function and altered the scale to what matched the creative.

The .translate function will allow you to move the states. alaskaPoint

.translate will move the state up and down.

.clipExtend will widen the box the svg geo coordinates are being displayed on.

This is what the end product looks like. You can visit the interactive version here.