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.

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

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

https://unpkg.com/topojson-client@3