StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>NOTE: This answer was written for version 2 of d3. Version 3 is out now, and it has awesome new features that create better geometry segmentation and solve the fill issue mentioned below. Also, the interface for setting up projections _<em>may</em>_ have changed in V3 (not sure bc I haven't tried).</strong></p> <p>There is a json file available for the entire world, and you can render it equivalently to the us-states.json coropleth (using an Albers equal area projection) – assuming you understand (and are ok with) the fact that an Albers-projected world map looks like <a href="http://mathworld.wolfram.com/AlbersEqual-AreaConicProjection.html" rel="nofollow">this</a>, which is not quite how most people recognize a world map.</p> <p>First you need the <a href="https://raw.github.com/mbostock/d3/master/examples/data/world-countries.json" rel="nofollow">json data for the entire world</a>, which is the same data used by the <a href="http://bl.ocks.org/2869760" rel="nofollow">world mercator projection example</a>.</p> <p>Then you need to render the world json data using a customized Albers projection:</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Mercator Projection</title> <style> path { fill: #ccc; stroke: #fff; } </style> <svg width="960" height="500"></svg> <script src="http://d3js.org/d3.v2.js?2.9.1"></script> <script type="text/javascript"> d3.json("world-countries.json", function(collection) { d3.select("svg").selectAll("path") .data(collection.features) .enter().append("path") .attr("d", d3.geo.path().projection( d3.geo.albers() .parallels([10, 80]) .origin([0,40]) .translate([500,250]) .scale(100) )); }); </script> </code></pre> <p><code>origin()</code>, <code>parallels()</code>, <code>translate()</code>, and <code>scale()</code> values can be tweaked to get different results. </p> <p>There's a problem with Antartica, which – due to the nature of this projection – gets "flipped" and is not a closed shape, so its fill covers the whole world. You either have to remove it from the json, or don't apply fill to it. </p> <p>Also for some reason Brazil (and couple of others) didn't get rendered properly when I tried this. Dunno why. You'd have to examine the svg and the data to figure out why.</p>

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