phil-pedruco · October 28, 2019 09:01
diff --git a/50m.json b/50m.json
diff --git a/readme.md b/readme.md
diff --git a/countrylist.csv b/countrylist.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>Countries and thier capitals</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"?></script>
    <script src="http://d3js.org/d3.geo.polyhedron.v0.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
    <style type="text/css">

    h1 {
        font-family: Courier New;
        color: #525252;
    }
    text {
        font-family: Courier New;
        font-size: 18px;
        fill: #525252;
    }
    .hLable {
        font-weight: bold;
    }
    #wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 1160px;
    }
    .graticule {
        fill: none;
        stroke: #000;
        stroke-opacity: .6;
        stroke-width: .5px;
    }
    .graticule.outline {
        fill: #9ecae1;
        opacity: 0.2;
        stroke: #333;
        stroke-opacity: 1;
        stroke-width: 1.5px;
    }
    </style>
 </head>

 <body>
    <div id="wrapper">
        <h1>Name that Country and its Capital</h1>
        <div id="map"></div>
    </div>
 </body>
 <script type="text/javascript">
 var h = 750,
    w = 1160,
    p = 5,
    l = 20,
    m = {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        labels: 200
    };

 var colours = ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666", "#7F7F7F"];
 // set-up unit projection and path
 var projection = d3.geo.kavrayskiy7()
    .scale(1)
    .translate([0, 0]);

 var path = d3.geo.path()
    .projection(projection);

 var graticule = d3.geo.graticule();

 // set-up svg canvas
 var svg = d3.select("#map").append("svg")
    .attr("height", h)
    .attr("width", w);

 svg.append("text")
    .attr("id", "hCountry")
    .attr("class", "hLable")
    .attr("x", m.left)
    .attr("y", m.top + l)
    .text("Country:");

 svg.append("text")
    .attr("id", "hCapital")
    .attr("class", "hLable")
    .attr("x", m.left)
    .attr("y", m.top + 2 * l)
    .text("Capital:");

 // set-up scale for colour coding continents
 var cScale = d3.scale.ordinal()
    .range(colours);

 // read in topojson of world
 d3.json("50m.json", function(error, countries) {
    d3.csv("countrylist.csv", function(error, capitals) {

        allContinenets = [];
        capitals.forEach(function(d, i) {
            var el = d.continent;
            allContinenets.push(el);
        });

        var continents = arrayUnique(allContinenets);
        cScale.domain(continents);

        var bTopo = topojson.feature(countries, countries.objects.countries) 
        topo = bTopo.features;

        topo = topo.filter(function(d) {
            return capitals.some(function(n) {
                if (+d.id == +n["ISO 3166-1 Number"]) {
                    if (+d.id === 729) console.log(d)
                    return d.country = n["Common Name"],
                        d.capital = n["Capital"],
                        d.continent = n["continent"];
                } else {
                    return d.country = null,
                        d.capital = null,
                        d.continent = null;
                }
            });
        }).sort(function(a, b) {
            return a.country.localeCompare(b.country);
        });

        // calculate bounds, scale and transform 
        // see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
        var b = path.bounds(bTopo),
            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.append("path")
            .datum(graticule)
            .attr("class", "graticule")
            .attr("d", path);

        svg.append("path")
            .datum(graticule.outline)
            .attr("class", "graticule outline")
            .attr("d", path);

        var paths = svg.append("g").selectAll("path")
            .data(topo).enter()
            .append("path")
            .style("fill", function(d, i) {
                return cScale(d.continent)
            })
            .style("stroke", "black")
            .attr("d", path)
            .attr("pointer-events", "all");

        paths.on("click", function(d) {
            addLabels(d);
        });
    });
 });

 function addLabels(d) {

    var cnt = document.getElementById('hCountry'),
        cntLength = cnt.getComputedTextLength(); 

    var countryTag = svg.selectAll(".countryLable")
        .data([d])

    countryTag.enter()
        .append("text")
        .attr("class", "countryLable")
        .attr("x", cntLength + p)
        .attr("y", m.top + l);

    countryTag.text(function(d) {
        return d.country;
    });

    countryTag.exit().remove();

    var capitalTag = svg.selectAll(".capitalLable")
        .data([d])

    var cap = document.getElementById('hCapital'),
        capLength = cap.getComputedTextLength(); 

    capitalTag.enter()
        .append("text")
        .attr("class", "capitalLable")
        .attr("x", cntLength + p)
        .attr("y", m.top + 2 * l);

    capitalTag.text(function(d) {
        return d.capital;
    });

    capitalTag.exit().remove();
 }

 //http:stackoverflow.com/questions/13486479/how-to-get-an-array-of-unique-values-from-an-array-containing-duplicates-in-java
    var arrayUnique = function(a) {
        return a.reduce(function(p, c) {
            if (p.indexOf(c) < 0) p.push(c);
            return p;
        }, []);
    };
 </script>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Countries and thier capitals</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js"?></script>
	<script src="http://d3js.org/d3.geo.polyhedron.v0.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<style type="text/css">

	h1 {
	font-family: Courier New;
	color: #525252;
	}
	text {
	font-family: Courier New;
	font-size: 18px;
	fill: #525252;
	}
	.hLable {
	font-weight: bold;
	}
	#wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 1160px;
	}
	.graticule {
	fill: none;
	stroke: #000;
	stroke-opacity: .6;
	stroke-width: .5px;
	}
	.graticule.outline {
	fill: #9ecae1;
	opacity: 0.2;
	stroke: #333;
	stroke-opacity: 1;
	stroke-width: 1.5px;
	}
	</style>
	</head>

	<body>
	<div id="wrapper">
	<h1>Name that Country and its Capital</h1>
	<div id="map"></div>
	</div>
	</body>
	<script type="text/javascript">
	var h = 750,
	w = 1160,
	p = 5,
	l = 20,
	m = {
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
	labels: 200
	};

	var colours = ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666", "#7F7F7F"];
	// set-up unit projection and path
	var projection = d3.geo.kavrayskiy7()
	.scale(1)
	.translate([0, 0]);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule();

	// set-up svg canvas
	var svg = d3.select("#map").append("svg")
	.attr("height", h)
	.attr("width", w);

	svg.append("text")
	.attr("id", "hCountry")
	.attr("class", "hLable")
	.attr("x", m.left)
	.attr("y", m.top + l)
	.text("Country:");

	svg.append("text")
	.attr("id", "hCapital")
	.attr("class", "hLable")
	.attr("x", m.left)
	.attr("y", m.top + 2 * l)
	.text("Capital:");

	// set-up scale for colour coding continents
	var cScale = d3.scale.ordinal()
	.range(colours);

	// read in topojson of world
	d3.json("50m.json", function(error, countries) {
	d3.csv("countrylist.csv", function(error, capitals) {

	allContinenets = [];
	capitals.forEach(function(d, i) {
	var el = d.continent;
	allContinenets.push(el);
	});

	var continents = arrayUnique(allContinenets);
	cScale.domain(continents);

	var bTopo = topojson.feature(countries, countries.objects.countries)
	topo = bTopo.features;

	topo = topo.filter(function(d) {
	return capitals.some(function(n) {
	if (+d.id == +n["ISO 3166-1 Number"]) {
	if (+d.id === 729) console.log(d)
	return d.country = n["Common Name"],
	d.capital = n["Capital"],
	d.continent = n["continent"];
	} else {
	return d.country = null,
	d.capital = null,
	d.continent = null;
	}
	});
	}).sort(function(a, b) {
	return a.country.localeCompare(b.country);
	});

	// calculate bounds, scale and transform
	// see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
	var b = path.bounds(bTopo),
	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.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	svg.append("path")
	.datum(graticule.outline)
	.attr("class", "graticule outline")
	.attr("d", path);

	var paths = svg.append("g").selectAll("path")
	.data(topo).enter()
	.append("path")
	.style("fill", function(d, i) {
	return cScale(d.continent)
	})
	.style("stroke", "black")
	.attr("d", path)
	.attr("pointer-events", "all");

	paths.on("click", function(d) {
	addLabels(d);
	});
	});
	});

	function addLabels(d) {

	var cnt = document.getElementById('hCountry'),
	cntLength = cnt.getComputedTextLength();

	var countryTag = svg.selectAll(".countryLable")
	.data([d])

	countryTag.enter()
	.append("text")
	.attr("class", "countryLable")
	.attr("x", cntLength + p)
	.attr("y", m.top + l);

	countryTag.text(function(d) {
	return d.country;
	});

	countryTag.exit().remove();

	var capitalTag = svg.selectAll(".capitalLable")
	.data([d])

	var cap = document.getElementById('hCapital'),
	capLength = cap.getComputedTextLength();

	capitalTag.enter()
	.append("text")
	.attr("class", "capitalLable")
	.attr("x", cntLength + p)
	.attr("y", m.top + 2 * l);

	capitalTag.text(function(d) {
	return d.capital;
	});

	capitalTag.exit().remove();
	}

	//http:stackoverflow.com/questions/13486479/how-to-get-an-array-of-unique-values-from-an-array-containing-duplicates-in-java
	var arrayUnique = function(a) {
	return a.reduce(function(p, c) {
	if (p.indexOf(c) < 0) p.push(c);
	return p;
	}, []);
	};
	</script>

	</html>