xxxxxxxxxx
<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="https://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>
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