"Week 11: Region Colors"

countries.json

d3-legend.min.js

!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var v=d.d3_calcType(c,t,j,k,o,r),w=a.append("g").attr("class",l+"legendCells"),x=w.selectAll("."+l+"cell").data(v.data),y=x.enter().append("g",".cell").attr("class",l+"cell").style("opacity",1e-6);shapeEnter=y.append(e).attr("class",l+"swatch"),shapes=x.select("g."+l+"cell "+e),d.d3_addEvents(y,u),x.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(e,shapes,g,f,h,b),d.d3_addText(w,y,v.labels,l);var z=x.select("text"),A=shapes[0].map(function(a){return a.getBBox()});m?shapes.attr("class",function(a){return l+"swatch "+v.feature(a)}):"line"==e?shapes.style("stroke",v.feature):shapes.style("fill",v.feature);var B,C,D="start"==q?0:"middle"==q?.5:1;"vertical"===s?(B=function(a,b){return"translate(0, "+b*(A[b].height+i)+")"},C=function(a,b){return"translate("+(A[b].width+A[b].x+p)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===s&&(B=function(a,b){return"translate("+b*(A[b].width+i)+",0)"},C=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(A[b].height+A[b].y+p+8)+")"}),d.d3_placement(s,x,B,z,C,q),d.d3_title(a,w,n,l),x.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=15,h=10,i=2,j=[5],k=[],l="",m=!1,n="",o=d3.format(".01f"),p=10,q="middle",r="to",s="vertical",t=!1,u=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(j=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c||"path"==c&&"string"==typeof d)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapeHeight=function(b){return arguments.length?(g=+b,a):a},a.shapeRadius=function(b){return arguments.length?(h=+b,a):a},a.shapePadding=function(b){return arguments.length?(i=+b,a):a},a.labels=function(b){return arguments.length?(k=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(q=b),a):a},a.labelFormat=function(b){return arguments.length?(o=b,a):a},a.labelOffset=function(b){return arguments.length?(p=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(r=b,a):a},a.useClass=function(b){return arguments.length?((b===!0||b===!1)&&(m=b),a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(s=b),a):a},a.ascending=function(b){return arguments.length?(t=!!b,a):a},a.classPrefix=function(b){return arguments.length?(l=b,a):a},a.title=function(b){return arguments.length?(n=b,a):a},d3.rebind(a,u,"on"),a}},{"./legend":2}],2:[function(a,b,c){b.exports={d3_identity:function(a){return a},d3_mergeLabels:function(a,b){if(0===b.length)return a;a=a?a:[];for(var c=b.length;c<a.length;c++)b.push(a[c]);return b},d3_linearLegend:function(a,b,c){var d=[];if(b.length>1)d=b;else for(var e=a.domain(),f=(e[e.length-1]-e[0])/(b-1),g=0;b>g;g++)d.push(e[0]+g*f);var h=d.map(c);return{data:d,labels:h,feature:function(b){return a(b)}}},d3_quantLegend:function(a,b,c){var d=a.range().map(function(d){var e=a.invertExtent(d);b(e[0]),b(e[1]);return b(e[0])+" "+c+" "+b(e[1])});return{data:a.range(),labels:d,feature:this.d3_identity}},d3_ordinalLegend:function(a){return{data:a.domain(),labels:a.domain(),feature:function(b){return a(b)}}},d3_drawShapes:function(a,b,c,d,e,f){"rect"===a?b.attr("height",c).attr("width",d):"circle"===a?b.attr("r",e):"line"===a?b.attr("x1",0).attr("x2",d).attr("y1",0).attr("y2",0):"path"===a&&b.attr("d",f)},d3_addText:function(a,b,c,d){b.append("text").attr("class",d+"label"),a.selectAll("g.cell text").data(c).text(this.d3_identity)},d3_calcType:function(a,b,c,d,e,f){var g=a.ticks?this.d3_linearLegend(a,c,e):a.invertExtent?this.d3_quantLegend(a,e,f):this.d3_ordinalLegend(a);return g.labels=this.d3_mergeLabels(g.labels,d),b&&(g.labels=this.d3_reverse(g.labels),g.data=this.d3_reverse(g.data)),g},d3_reverse:function(a){for(var b=[],c=0,d=a.length;d>c;c++)b[c]=a[d-c-1];return b},d3_placement:function(a,b,c,d,e,f){b.attr("transform",c),d.attr("transform",e),"horizontal"===a&&d.style("text-anchor",f)},d3_addEvents:function(a,b){var c=this;a.on("mouseover.legend",function(a){c.d3_cellOver(b,a,this)}).on("mouseout.legend",function(a){c.d3_cellOut(b,a,this)}).on("click.legend",function(a){c.d3_cellClick(b,a,this)})},d3_cellOver:function(a,b,c){a.cellover.call(c,b)},d3_cellOut:function(a,b,c){a.cellout.call(c,b)},d3_cellClick:function(a,b,c){a.cellclick.call(c,b)},d3_title:function(a,b,c,d){if(""!==c){a.append("text").attr("class",d+"legendTitle").text(c);var e=a.select("."+d+"legendTitle").map(function(a){return a[0].getBBox().height})[0],f=-b.map(function(a){return a[0].getBBox().x})[0];b.attr("transform","translate("+f+","+(e+10)+")")}}}},{}],3:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var s=d.d3_calcType(c,q,h,i,l,o),t=a.append("g").attr("class",j+"legendCells"),u=t.selectAll("."+j+"cell").data(s.data),v=u.enter().append("g",".cell").attr("class",j+"cell").style("opacity",1e-6);shapeEnter=v.append(e).attr("class",j+"swatch"),shapes=u.select("g."+j+"cell "+e),d.d3_addEvents(v,r),u.exit().transition().style("opacity",0).remove(),"line"===e?(d.d3_drawShapes(e,shapes,0,f),shapes.attr("stroke-width",s.feature)):d.d3_drawShapes(e,shapes,s.feature,s.feature,s.feature,b),d.d3_addText(t,v,s.labels,j);var w,x,y=u.select("text"),z=shapes[0].map(function(a,b){var d=a.getBBox(),f=c(s.data[b]);return"line"===e&&"horizontal"===p?d.height=d.height+f:"line"===e&&"vertical"===p&&(d.width=d.width),d}),A=d3.max(z,function(a){return a.height+a.y}),B=d3.max(z,function(a){return a.width+a.x}),C="start"==n?0:"middle"==n?.5:1;"vertical"===p?(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.height});return"translate(0, "+(c+b*g)+")"},x=function(a,b){return"translate("+(B+m)+","+(z[b].y+z[b].height/2+5)+")"}):"horizontal"===p&&(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.width});return"translate("+(c+b*g)+",0)"},x=function(a,b){return"translate("+(z[b].width*C+z[b].x)+","+(A+m)+")"}),d.d3_placement(p,u,w,y,x,n),d.d3_title(a,t,k,j),u.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=2,h=[5],i=[],j="",k="",l=d3.format(".01f"),m=10,n="middle",o="to",p="vertical",q=!1,r=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(h=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapePadding=function(b){return arguments.length?(g=+b,a):a},a.labels=function(b){return arguments.length?(i=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(l=b,a):a},a.labelOffset=function(b){return arguments.length?(m=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(o=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(p=b),a):a},a.ascending=function(b){return arguments.length?(q=!!b,a):a},a.classPrefix=function(b){return arguments.length?(j=b,a):a},a.title=function(b){return arguments.length?(k=b,a):a},d3.rebind(a,r,"on"),a}},{"./legend":2}],4:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var t=d.d3_calcType(b,r,i,j,m,p),u=a.append("g").attr("class",k+"legendCells"),v=u.selectAll("."+k+"cell").data(t.data),w=v.enter().append("g",".cell").attr("class",k+"cell").style("opacity",1e-6);shapeEnter=w.append(c).attr("class",k+"swatch"),shapes=v.select("g."+k+"cell "+c),d.d3_addEvents(w,s),v.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(c,shapes,f,e,g,t.feature),d.d3_addText(u,w,t.labels,k);var x,y,z=v.select("text"),A=shapes[0].map(function(a){return a.getBBox()}),B=d3.max(A,function(a){return a.height}),C=d3.max(A,function(a){return a.width}),D="start"==n?0:"middle"==n?.5:1;"vertical"===q?(x=function(a,b){return"translate(0, "+b*(B+h)+")"},y=function(a,b){return"translate("+(C+o)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===q&&(x=function(a,b){return"translate("+b*(C+h)+",0)"},y=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(B+o)+")"}),d.d3_placement(q,v,x,z,y,n),d.d3_title(a,u,l,k),v.transition().style("opacity",1)}var b=d3.scale.linear(),c="path",e=15,f=15,g=10,h=5,i=[5],j=[],k="",l="",m=d3.format(".01f"),n="middle",o=10,p="to",q="vertical",r=!1,s=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(c){return arguments.length?(b=c,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(i=b),a):a},a.shapePadding=function(b){return arguments.length?(h=+b,a):a},a.labels=function(b){return arguments.length?(j=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(m=b,a):a},a.labelOffset=function(b){return arguments.length?(o=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(p=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(q=b),a):a},a.ascending=function(b){return arguments.length?(r=!!b,a):a},a.classPrefix=function(b){return arguments.length?(k=b,a):a},a.title=function(b){return arguments.length?(l=b,a):a},d3.rebind(a,s,"on"),a}},{"./legend":2}],5:[function(a,b,c){d3.legend={color:a("./color"),size:a("./size"),symbol:a("./symbol")}},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);

index.html

<!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>

    <div id="vis"></div>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>

<script>

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 getColor(d) {
    var dataRow = countryById.get(d.id);
    if (dataRow) {
        console.log(dataRow);
        return color(dataRow.Region);
    } else {
        console.log("no dataRow", d);
        return "#ccc";
    }
}

function getText(d) {
 var dataRow = countryById.get(d.id);
    if (dataRow) {
        console.log(dataRow);
        return dataRow.ShortName + ": " + dataRow.Region;
    } else {
        console.log("no dataRow", d);
        return d.ShortName + ": No data.";
    }
}

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>

indicators.csv