D3 Examples - Mini State Grid

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.state rect {
  fill: #dedede;
}
​
.state text {
  font: 12px sans-serif;
  text-anchor: middle;
}
​
.state--selected rect {
  fill: #9f4a6c;
}
​
.state--selected text {
  fill: white;
}
​
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}
​
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}
​
/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}
​
/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}
​
/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}
​
/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}
</style>
<svg width="960" height="500"></svg>
<script id="grid" type="text/plain">
                              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 AK    TX             FL
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
<script>
  
var states = [],
    selectedStates = ["MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT"];
​
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 = 5;
​
var state = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll(".state")
    .data(states)
  .enter().append("g")
    .attr("class", function(d) { return "state" + (d.selected ? " state--selected" : ""); })
    .attr("transform", function(d) { return "translate(" + (d.x - gridWidth / 2) * cellSize + "," + (d.y - gridHeight / 2) * cellSize + ")"; });
​
state.append("rect")
    .attr("x", -cellSize / 2)
    .attr("y", -cellSize / 2)
    .attr("width", cellSize - 1)
    .attr("height", cellSize - 1);
​
/*state.append("text")
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
*/
  
  /* Initialize tooltip */
tip = d3.tip()
            .html(function(d) { return d.name; })
                //.attr("color", function(d) { return d.selected ? "#9f4a6c" : "#dedede" ; });
​
/* Invoke the tip in the context of your visualization */
state.call(tip)
​
state
  /* Show and hide tip on mouse events */
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)
</script>
​
    