0

I am trying to create a choropleth using d3 for New Jersey state. I have geojson file created as nj.json. You can see it here:

http://mntest.elasticbeanstalk.com/nj.json

When I try to use it to display on web page, it shows a very small New Jersey map, so small it is easy to miss. See it here:

http://mntest.elasticbeanstalk.com/choropleth_test.html

It shows as a small dot a couple of inches below the text.

Can somebody take a look at the source code and guide me how to increase the map size.

Thanks, D3 newbie

user2307847
  • 1
  • 1

1 Answers1

3

To change the size of the displayed map, set the scale factor of your projection. You might also want to reset the center of the projection to center what you want to show.

This question might be helpful as well.

Community
  • 1
  • 1
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Thanks Lars, I will try this and let the community know how it goes. – user2307847 Apr 22 '13 at 20:25
  • I tried the first solution in your post, but I am getting this error in javascript console: Uncaught TypeError: Object # has no method 'centroid' My page is at: http://mntest.elasticbeanstalk.com/choropleth_test3.html This is strange because I can see the method d3.geo.centroid in the file d3.v3.js I am using. Thanks. – user2307847 Apr 25 '13 at 14:24
  • It says line 26, which is this line: var center = d3.geo.centroid(json); – user2307847 Apr 25 '13 at 15:07
  • Hmm, try remove the loading of `d3.geo.js` -- you shouldn't need that. – Lars Kotthoff Apr 25 '13 at 15:10
  • Thanks. I removed it, now the error is gone but still no map: http://mntest.elasticbeanstalk.com/choropleth_test3.html – user2307847 Apr 25 '13 at 16:07
  • There is no "#vis" element that you could append to. – Lars Kotthoff Apr 25 '13 at 16:44