Skip to content

Instantly share code, notes, and snippets.

@pandres

pandres/README.md

Forked from jazzido/README.md
Last active August 29, 2015 14:19
Show Gist options
  • Save pandres/8d47902bfd6b52189b53 to your computer and use it in GitHub Desktop.
Save pandres/8d47902bfd6b52189b53 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md
Raw
index.html
<!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;
}
</style>
<svg width="960" height="500"></svg>
<script id="grid" type="text/plain">
JU
SA FO
CA TU CH MI
LR SE CO
SJ SL CD SF ER
MD LP BA
NQ RN
CH
SC
TF
</script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var states = [],
selectedStates = ["BA", "RN", "FO"];
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;
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; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment