State Grid of Dogs

While I was playing with tessellation, I was asking myself: How the hell can tessellation be used in data viz?

This block (forked from mbostock's block: State Grid, itself inspired by an Allison McCann graphic) is my first attempt to respond to my question: it adds some kind of context to the vizualisation.

This map would greatly suit a viz dealing with dogs in US. Unfortunately, I didn't find any data set yet. Purple states are thoose starting with an 'M', plus the 'FL' state because these are my initials ;-)

Acknowledgments to:

D3.js (v.4)
blockbuilder.org

forked from Kcnarf's block: State Grid of Dogs

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>State Grid of Dogs</title>
<meta content="Essai on using tessellation in vizualisation" name="description">
<style>

.state path {
    fill: #dedede;
    stroke-width: 2;
    stroke: white;
  }
  
  .state circle {
    fill: grey;
  }

.state text {
    font: 12px sans-serif;
    text-anchor: middle;
  }

.state--selected path {
    fill: #9f4a6c;
  }

.state--selected circle {
    fill: #dedede;
  }

.state--selected text {
    fill: white;
  }

</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script id="grid" type="text/plain">
AK                            ME
               WI          VT NH
WA ID MT ND MN IL MI    NY MA
OR NV WY SD IA IN OH PA NJ CT RI
CA UT CO NE MO KY WV VA MD DE
   AZ NM KS AR TN NC SC
         OK LA MS AL GA
HI       TX             FL
</script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var states = [],
      selectedStates = ["MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "FL"];

d3.select("#grid").text().split("\n").forEach(function(line, i) {
    var re = /\w+/g, m;
    while (m = re.exec(line)) states.push({
      name: m[0],
      selected: selectedStates.indexOf(m[0]) >= 0,
      x: m.index / 3,
      y: i
    });
  });

var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

var gridWidth = d3.max(states, function(d) { return d.x; }) + 1,
      gridHeight = d3.max(states, function(d) { return d.y; }) + 1,
      cellSize = 40,
      hcz = cellSize/2, //halfCellSize
      qcz = cellSize/4;	//quarterCellSize

state.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

</script>
</body>

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