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.

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

</script>

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