D3 Examples - National Official Languages in the Americas

National Official Languages in the Americas

A more useful example of this attempt at a d3 module. Though I wouldn't advise on using so many discrete colors as I have here.

The example shows a more useful application of my attempt at a d3 module for patterns. The map is based off a visualization I probably first saw at age 6, in one of my favorite books, a 1989(?) topical world atlas - I'll find the name next visit my parents.

The map shows official languages (at a national level, sorry regional official languages) by country. Though, not all countries have official languages, so I've used a bit of discretion. Also, in the case of Bolivia, with a multitude of official languages, some of which may be extinct, I've shown some of the more major languages.

The map omits French Guiana - I quickly filtered countries by region, and French Guiana, as part of France didn't manage to stick around.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
​
</style>
<svg width="620" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3Pattern.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var projection = d3.geoTransverseMercator()
    .rotate([80,0])
    .scale(350)
    .center([0,10])
    .translate([width / 2, height / 2]);
​
var path = d3.geoPath()
    .projection(projection);
​
​
var languages = {
     "English" : "steelblue" ,
     "Spanish" : "lightseagreen"  ,
     "Portuguese" : "orange" ,
     "French" : "mediumseagreen" ,
     "Greenlandic":"darkgreen",
     "Guarani":"fuchsia",
     "Quecha":"yellow",
     "Aymara":"pink",
     "Chiquitano":"brown",
     "Dutch": "lightsteelblue",
     "Other/No Info" : "black"
    }
    
    
var officialLanguages = {
    "Anguilla":"English",
    "Antigua and Barbuda":"English",
    "Argentina":"Spanish",
    "Aruba":"Dutch",
    "Bahamas":"English",
    "Barbados":"English",
    "Belize":"English",
    "Bolivia":["Spanish","Guarani","Quecha","Aymara","Chiquitano"],
    "Brazil":"Portuguese",
    "Canada": ["French","English"],
    "Caymen Islands":"English",
    "Chile":"Spanish",
    "Colombia":"Spanish",
    "Costa Rica":"Spanish",
    "Cuba":"Spanish",
    "Dominican Republic":"Spanish",
    "Ecuador":"Spanish",
    "El Salvador":"Spanish",
    "French Guiana":"French",
    "Grenada":"English",
    "Guatemala":"Spanish",
    "Guyana":"English",
    "Haiti":["French","Creole"],
    "Honduras":"Spanish",
    "Jamaica":"English",
    "Martinique":"French",
    "Mexico":"Spanish",
    "Nicaragua":"Spanish",
    "Panama":"Spanish",
    "Paraguay":["Spanish","Guarani"],
    "Peru":["Spanish","Quecha"],
    "Puerto Rico":["Spanish","English"],
    "Suriname":"Dutch",
    "Trinidad and Tobago":"English",
    "United States of America":"English",
    "Uruguay":"Spanish",
    "Venezuela":"Spanish",
    "Virgin Islans":"English",
    "Greenland":"Greenlandic"
}
​
d3.json("Americas.json", function(error, json) {
  if (error) throw error;
​
​
​
  svg.selectAll()
    .data(json.features)
    .enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path )
    .attr("fill", function(d) { 
        
        if (! Array.isArray( officialLanguages[d.properties.ADMIN] ) ) {
            if( languages[officialLanguages[d.properties.ADMIN]] )  {
               return  languages[officialLanguages[d.properties.ADMIN]];
            }
            else {
                return languages["Other/No info"]; 
            }
        }
        else {
            var array = officialLanguages[d.properties.ADMIN]; 
            var length = array.length;
            
            var width = 12 / length;
            var colors = array.map(function(d) {
                return languages[d];            
            })
            var stripe = d3.patternStripes().colors(colors).width(width);
            return stripe.use();                
        }
​
    })
    
    var legendEntry = svg.selectAll()
      .data(d3.entries(languages))
      .enter()
      .append("g")
      .attr("transform", function(d,i) { 
        return "translate(" + (width - 150) +"," + (300 + i * 16) + ")"; 
      })
      
    legendEntry.append("rect") 
       .attr("width", 12)
       .attr("height",12)
       .attr("fill", function(d) { return d.value; })
       .attr("stroke","black")
       .attr("stroke-width",1)
       
    legendEntry.append("text")
      .attr("x", 16)
      .attr("y", 10)
      .text(function(d) { return d.key; })    
      
    
    
​
    
});
​
​
​
​
</script>
​
    