phil-pedruco · April 11, 2014 07:34 · kostasx · Jun 4, 2017
diff --git a/readme.md b/readme.md
diff --git a/countries.geo.json b/countries.geo.json
diff --git a/idCountry.csv b/idCountry.csv
diff --git a/index.html b/index.html
 <!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>
	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>