National Official Languages in the Americas 2

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 block adds a bit to the pattern module with the uncreatively named autoStripes function. This is a slight evolution from this bl.ock meant to automate the assignment of stripes and solids.

The patterner takes datums, one at at time, and determines if the current datum matches any previous datums. If so it returns:

In the event of single value, the color returned by the prevoius matching datum.
In the event of multiple values, the stripe pattern url returned by the prevoius matching datum.

If the datum does not match previous datums, then it returns:

In the event of a single value, a new color
In the event of multiple values, a new stripe pattern url.

Color usage is consistent - whether stripes or solids.

Also, patterns aren't duplicated, to reduce the potential for extra nodes in the DOM. However, there may be some merit in allowing duplication. For example, to allow for mouseover effects.

This is just an idea at the moment - I hope to have something a little more polished and complete soon.

<!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.min.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);

d3.queue()
  .defer(d3.json, "languages.json")
  .defer(d3.json, "Americas.json")
  .await(ready);
  
function ready(error, lang, geojson) {
   if (error) throw error;

var stripes = d3.autoStripes().colors(d3.schemeCategory20b);

svg.selectAll()
    .data(geojson.features)
    .enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path )
    .attr("fill", function(d) { return stripes.datum(lang[d.properties.ADMIN]); })
	
  var legendEntry = svg.selectAll()
     .data(stripes.values())
     .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.color; })
	   
  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