StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>COMPLETE SOLUTION:</strong></p> <p>Here's the solution which will resize the map AFTER the user has released the edge of the window to resize it, and center it in the parent container. </p> <pre><code><div id="mapContainer"></div> </code></pre> <hr> <pre><code>function draw(ht) { $("#mapContainer").html("<svg id='map' xmlns='http://www.w3.org/2000/svg' width='100%' height='" + ht + "'></svg>"); map = d3.select("svg"); var width = $("svg").parent().width(); var height = ht; // I discovered that the unscaled equirectangular map is 640x360. Thus, we // should scale our map accordingly. Depending on the width ratio of the new // container, the scale will be this ratio * 100. You could also use the height // instead. The aspect ratio of an equirectangular map is 2:1, so that's why // our height is half of our width. projection = d3.geo.equirectangular().scale((width/640)*100).translate([width/2, height/2]); var path = d3.geo.path().projection(projection); d3.json('plugins/maps/world.json', function(collection) { map.selectAll('path').data(collection.features).enter() .append('path') .attr('d', path) .attr("width", width) .attr("height", width/2); }); } draw($("#mapContainer").width()/2); </code></pre> <hr> <pre><code>$(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); $(window).bind('resizeEnd', function() { var height = $("#mapContainer").width()/2; $("#mapContainer svg").css("height", height); draw(height); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload