Skip to content

Instantly share code, notes, and snippets.

@feyderm

feyderm/index.html

Last active April 21, 2017 15:23
Show Gist options
  • Save feyderm/10ed8e68d35327a92b6a9c7fa9d9936a to your computer and use it in GitHub Desktop.
Save feyderm/10ed8e68d35327a92b6a9c7fa9d9936a to your computer and use it in GitHub Desktop.
Download ZIP
I made a mistake...
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.cell {
height: 10px;
width: 10px;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
// references:
// - https://bl.ocks.org/mbostock/70d5541b547cc222aa02
// - https://bl.ocks.org/mbostock/346f4d967650b27c0511
var margin = { top: 20, right: 0, bottom: 50, left: 120 },
svg_dx = 800,
svg_dy = 500;
let rows = d3.range(50),
cols = d3.range(50);
let coords = d3.cross(rows, cols, (row, col) => {
return {"row": row, "col": col};
});
let svg = d3.select("body")
.append("svg")
.attr("width", svg_dx)
.attr("height", svg_dy);
svg.selectAll("rect")
.data(coords)
.enter()
.append("rect")
.attr("class", coord => "cell row_" + coord.row + " col_" + coord.col)
.attr("x", coord => coord.col * 12)
.attr("y", coord => coord.row * 12)
.attr("fill", "#bfbfbf")
.transition()
.on("start", updateCell);
function updateCell(selection) {
let d = d3.select(this).data()[0],
delay = Math.sqrt(d.row * d.col) * 20,
dur = 200;
if (d.row > d3.min(rows) && d.col > d3.min(cols)) {
d3.active(this)
.transition()
.delay(delay)
.duration(dur)
.attr("fill", "#ff0066")
.transition()
.delay(delay)
.duration(dur)
.attr("fill", "#bfbfbf")
.transition()
.on("start", updateCell);
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment