This bl.ock demostrates how to join geojson and csv data based on a common id and is in answer to this stackoverflow question. The method is simply to iterate through both the geojson and csv data. If the id's match a new element is added to the geojson object. The geojson data was taken from world.geo.
Created
April 11, 2014 07:34
-
-
Save phil-pedruco/10447085 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| id | name | |
|---|---|---|
| AFG | Afghanistan | |
| AGO | Angola | |
| ALB | Albania | |
| ARE | United Arab Emirates | |
| ARG | Argentina | |
| ARM | Armenia | |
| ATA | Antarctica | |
| ATF | French Southern and Antarctic Lands | |
| AUS | Australia | |
| AUT | Austria | |
| AZE | Azerbaijan | |
| BDI | Burundi | |
| BEL | Belgium | |
| BEN | Benin | |
| BFA | Burkina Faso | |
| BGD | Bangladesh | |
| BGR | Bulgaria | |
| BHS | The Bahamas | |
| BIH | Bosnia and Herzegovina | |
| BLR | Belarus | |
| BLZ | Belize | |
| BMU | Bermuda | |
| BOL | Bolivia | |
| BRA | Brazil | |
| BRN | Brunei | |
| BTN | Bhutan | |
| BWA | Botswana | |
| CAF | Central African Republic | |
| CAN | Canada | |
| CHE | Switzerland | |
| CHL | Chile | |
| CHN | China | |
| CIV | Ivory Coast | |
| CMR | Cameroon | |
| COD | Democratic Republic of the Congo | |
| COG | Republic of the Congo | |
| COL | Colombia | |
| CRI | Costa Rica | |
| CUB | Cuba | |
| -99 | Northern Cyprus | |
| CYP | Cyprus | |
| CZE | Czech Republic | |
| DEU | Germany | |
| DJI | Djibouti | |
| DNK | Denmark | |
| DOM | Dominican Republic | |
| DZA | Algeria | |
| ECU | Ecuador | |
| EGY | Egypt | |
| ERI | Eritrea | |
| ESP | Spain | |
| EST | Estonia | |
| ETH | Ethiopia | |
| FIN | Finland | |
| FJI | Fiji | |
| FLK | Falkland Islands | |
| FRA | France | |
| GAB | Gabon | |
| GBR | United Kingdom | |
| GEO | Georgia | |
| GHA | Ghana | |
| GIN | Guinea | |
| GMB | Gambia | |
| GNB | Guinea Bissau | |
| GNQ | Equatorial Guinea | |
| GRC | Greece | |
| GRL | Greenland | |
| GTM | Guatemala | |
| GUF | French Guiana | |
| GUY | Guyana | |
| HND | Honduras | |
| HRV | Croatia | |
| HTI | Haiti | |
| HUN | Hungary | |
| IDN | Indonesia | |
| IND | India | |
| IRL | Ireland | |
| IRN | Iran | |
| IRQ | Iraq | |
| ISL | Iceland | |
| ISR | Israel | |
| ITA | Italy | |
| JAM | Jamaica | |
| JOR | Jordan | |
| JPN | Japan | |
| KAZ | Kazakhstan | |
| KEN | Kenya | |
| KGZ | Kyrgyzstan | |
| KHM | Cambodia | |
| KOR | South Korea | |
| CS-KM | Kosovo | |
| KWT | Kuwait | |
| LAO | Laos | |
| LBN | Lebanon | |
| LBR | Liberia | |
| LBY | Libya | |
| LKA | Sri Lanka | |
| LSO | Lesotho | |
| LTU | Lithuania | |
| LUX | Luxembourg | |
| LVA | Latvia | |
| MAR | Morocco | |
| MDA | Moldova | |
| MDG | Madagascar | |
| MEX | Mexico | |
| MKD | Macedonia | |
| MLI | Mali | |
| MLT | Malta | |
| MMR | Myanmar | |
| MNE | Montenegro | |
| MNG | Mongolia | |
| MOZ | Mozambique | |
| MRT | Mauritania | |
| MWI | Malawi | |
| MYS | Malaysia | |
| NAM | Namibia | |
| NCL | New Caledonia | |
| NER | Niger | |
| NGA | Nigeria | |
| NIC | Nicaragua | |
| NLD | Netherlands | |
| NOR | Norway | |
| NPL | Nepal | |
| NZL | New Zealand | |
| OMN | Oman | |
| PAK | Pakistan | |
| PAN | Panama | |
| PER | Peru | |
| PHL | Philippines | |
| PNG | Papua New Guinea | |
| POL | Poland | |
| PRI | Puerto Rico | |
| PRK | North Korea | |
| PRT | Portugal | |
| PRY | Paraguay | |
| QAT | Qatar | |
| ROU | Romania | |
| RUS | Russia | |
| RWA | Rwanda | |
| ESH | Western Sahara | |
| SAU | Saudi Arabia | |
| SDN | Sudan | |
| SDS | South Sudan | |
| SEN | Senegal | |
| SLB | Solomon Islands | |
| SLE | Sierra Leone | |
| SLV | El Salvador | |
| -99 | Somaliland | |
| SOM | Somalia | |
| SRB | Republic of Serbia | |
| SUR | Suriname | |
| SVK | Slovakia | |
| SVN | Slovenia | |
| SWE | Sweden | |
| SWZ | Swaziland | |
| SYR | Syria | |
| TCD | Chad | |
| TGO | Togo | |
| THA | Thailand | |
| TJK | Tajikistan | |
| TKM | Turkmenistan | |
| TLS | East Timor | |
| TTO | Trinidad and Tobago | |
| TUN | Tunisia | |
| TUR | Turkey | |
| TWN | Taiwan | |
| TZA | United Republic of Tanzania | |
| UGA | Uganda | |
| UKR | Ukraine | |
| URY | Uruguay | |
| USA | United States of America | |
| UZB | Uzbekistan | |
| VEN | Venezuela | |
| VNM | Vietnam | |
| VUT | Vanuatu | |
| PSE | West Bank | |
| YEM | Yemen | |
| ZAF | South Africa | |
| ZMB | Zambia | |
| ZWE | Zimbabwe |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>geojson csv join</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> | |
| </head> | |
| <body> | |
| <p id="report"></p> | |
| <div id="map"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| var h = 450, | |
| w = 960; | |
| // set-up unit projection and path | |
| var projection = d3.geo.mercator() | |
| .scale(1) | |
| .translate([0, 0]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // set-up svg canvas | |
| var svg = d3.select("#map").append("svg") | |
| .attr("height", h) | |
| .attr("width", w); | |
| //https://github.com/johan/world.geo.json | |
| d3.json("countries.geo.json", function(error, data) { | |
| d3.csv("idCountry.csv", function(error, csv) { | |
| var world = data.features; | |
| csv.forEach(function(d, i) { | |
| world.forEach(function(e, j) { | |
| if (d.id === e.id) { | |
| e.name = d.name | |
| } | |
| }) | |
| }) | |
| // calculate bounds, scale and transform | |
| // see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object | |
| var b = path.bounds(data), | |
| s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h), | |
| t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2]; | |
| projection.scale(s) | |
| .translate(t); | |
| svg.selectAll("path") | |
| .data(world).enter() | |
| .append("path") | |
| .style("fill", "none") | |
| .style("stroke", "grey") | |
| .style("stroke-width", "1px") | |
| .attr("d", path) | |
| .on("mouseover", function(d, i) { | |
| reporter(d); | |
| }); | |
| }) | |
| function reporter(x) { | |
| console.log(x) | |
| d3.select("#report").text(function() { | |
| return x.name; | |
| }); | |
| } | |
| }) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Excellent!
Just one correction. The 'world.geo' link in the description should lead to 'https://github.com/johan/world.geo.json'
instead of the current broken link: 'https://https//github.com/johan/world.geo.json'