"Week 11: Region Colors"

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>

body {
    font-family: Helvetica, sans-serif;
    padding: 40px;
}

.countries {
    stroke: #fff;
    stroke-width:0.6px;
}

.legendLinear text {
    font-size: 12px;
    fill: white;
}

</style>
<body>

<h2>Regions of the World</h2>

var width = 1000,
    height = 580;

var svg = d3.select('#vis').append('svg')
    .attr('width', width)
    .attr('height', height)
    .style("background-color", "#3E446B");

var projection = d3.geo.wagner4()
    .scale(175)
    .translate([width / 1.9, height / 1.7])
    .precision(.1);

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

var color = d3.scale.ordinal().range(["#D1E2E6", "#EDED8E", "#BAC484", "#D4A3B4", "#D1CEED", "#C9BA9B", "#FAB1B1"]);

var countryById = d3.map();

// we use queue because we have 2 data files to load.
queue()
    .defer(d3.json, "countries.json")
    .defer(d3.csv, "indicators.csv", typeAndSet) // process
    .await(loaded);

function typeAndSet(d) {
    countryById.set(d.ISO3, d);
    return d;
}

function loaded(error, countries, properties) {

console.log(countries);
    console.log(properties);

color.domain(d3.range(["South Asia", "Europe & Central Asia", "Middle East & North Africa", "Sub-Saharan Africa", "Latin America & Caribbean", "East Asia & Pacific", "North America"]));

var world = topojson.feature(countries, countries.objects.units).features;

svg.selectAll('path.countries')
        .data(world)
        .enter()
        .append('path')
        .attr('class', 'countries')
        .attr('d', path)
        .attr('fill', function(d,i) {
            console.log(d.properties.name);
            return getColor(d);
        })
        .append("title")
        .text(function(d) {
            return getText(d);
        });

var linear = color;

svg.append("g")
      .attr("class", "legendLinear")
      .attr("transform", "translate(20,20)");

var legendLinear = d3.legend.color()
      .shapeWidth(30)
      .orient('vertical')
      .scale(linear);

svg.select(".legendLinear")
      .call(legendLinear);

}

</script>
</body>
</html>

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

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

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

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

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