paint-brush
Changing D3js albersUsa state sizeby@amyru1
169 reads

Changing D3js albersUsa state size

by Amy RudolphMay 24th, 2015
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

I have recently been playing around and exploring the <a href="https://hackernoon.com/tagged/d3js" target="_blank">D3js</a> library and absolutely loving it. I received a creative of a <a href="https://hackernoon.com/tagged/data-visualisation" target="_blank">data visualisation</a> for a companies growth in the USA with Alaska and Hawaii moved below the US core states.

Company Mentioned

Mention Thumbnail
featured image - Changing D3js albersUsa state size
Amy Rudolph HackerNoon profile picture

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.

L O A D I N G
. . . comments & more!

About Author

Amy Rudolph HackerNoon profile picture
Amy Rudolph@amyru1
Software Developer

TOPICS

THIS ARTICLE WAS FEATURED IN...