Do you know your capitals?

Just a little map to see if you know your countries capital. Simply click on a country in the map and the country as well as capital will appear. Bonus points if you can figure out what the colour coding means.

<!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="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/topojson.v1.min.js"?></script>
    <script src="https://d3js.org/d3.geo.polyhedron.v0.min.js"></script>
    <script src="https://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 https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.polyhedron.v0.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.polyhedron.v0.min.js

https://d3js.org/d3.geo.projection.v0.min.js