search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

How to get rid of extra top/bottom space in equirectangular projection? #316

Open trevan opened 8 years ago

trevan commented 8 years ago

I'm using the equirectangular projection and it adds a large empty space at the top and bottom of the map. Looking at the example over at http://datamaps.github.io/, I see the same thing. But if I look at d3's example at http://bl.ocks.org/mbostock/3757119, there isn't a lot of empty space.

Is there a setting that I can override in datamaps to remove this extra space?

markmarkoh commented 8 years ago

The best way to do this is to manually control the height/width of the container element. Equirectangular projects are very wide, Mercator is closer to a square, so aspect ratios come into play here.

Here are a couple of examples of setting width/height

Salma7amed commented 7 years ago

Is there another way than manually controlling the height/width ? @markmarkoh the link you posted doesn't contain examples of setting the width/height. It just has switching the projection to 'mercator'.

Anemy commented 6 years ago

@Salma7amed You can manually set the width/height of the datamaps when creating the datamaps instance. See the defaultOptions at the bottom of http://datamaps.github.io/

By default datamaps will use the containing element's dimensions, which may be the best place to define the dimensions (apply a width and height to the style of the container).