D3 Examples - Lichen.js Choropleth + Texture / Bivariate Choropleth.

Lichen.js Choropleth + Texture / Bivariate Choropleth.

A more formal attempt to create a d3 utility, lichen.js, for patterning SVG shapes.

A bare bones example of a choroleth with texture. Uses four different circle patterns to indicate a variable (in the death rate due to opioid overdose), and color to indicate a second variable (in this case prescription rates).

Legends could take two forms: A grid, or two linear legends. Depending on number of thresholds, either may be preferable.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="lichen.js"></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var projection = d3.geoAlbersUsa();
​
var path = d3.geoPath()
    .projection(projection);
​
d3.queue()
  .defer(d3.json, "us.json")
  .defer(d3.csv, "opioids.csv")
  .await(ready);
​
var patterns = ln.circles().spacings([32,16,8,4]).get()
​
var color = d3.scaleThreshold().domain([80,100,120]).range(["#e7e1ef","#d4b9da","#c994c7","#df65b0"]);
​
var texture = d3.scaleThreshold().domain([15,30,45]).range(patterns);
​
function ready(error, us, opioids) {
   if (error) throw error;
   
 var map = d3.map(opioids, function(d) { return d.ID; });
    
 svg.selectAll()
    .data(us.features)
    .enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path )
    .attr("fill", function(d) { return color(map.get(d.properties.STATE).prescriptionRate); })
    
 svg.selectAll()
    .data(us.features)
    .enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path )
    .attr("fill", function(d) { return texture(map.get(d.properties.STATE).deathRate).use(); })
  
};
​
</script>
​
    