Skip to content

Instantly share code, notes, and snippets.

@phil-pedruco
Created April 11, 2014 07:34
Show Gist options
  • Save phil-pedruco/10447085 to your computer and use it in GitHub Desktop.
Save phil-pedruco/10447085 to your computer and use it in GitHub Desktop.

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.

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
<!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>
@kostasx
Copy link

kostasx commented Jun 4, 2017

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'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment