Skip to content

Instantly share code, notes, and snippets.

@tophtucker

tophtucker/README.md

Last active January 29, 2017 06:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tophtucker/df0400f0b5d60252663609e6858f68a0 to your computer and use it in GitHub Desktop.
Save tophtucker/df0400f0b5d60252663609e6858f68a0 to your computer and use it in GitHub Desktop.
Download ZIP
Transpose
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
position: relative;
padding: 10px;
font-family: sans-serif;
}
div {
box-sizing: border-box;
position: absolute;
border: 1px solid #fff;
padding: 5px;
text-align: right;
}
</style>
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var w = 60,
h = 30,
p = 10,
i = 2 + (Math.random() * 10 | 0),
j = 2 + (Math.random() * 10 | 0),
rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0,Math.max(i,j)]),
data = d3.merge(
d3.range(i).map(
(i) => d3.range(j).map(
(j) => ({i, j})
)
)
)
var cell = d3.select("body").selectAll("div")
.data(data)
.enter()
.append("div")
.style("font-weight", d => d.i == 0 || d.j == 0 ? 'bold' : 'normal')
.style("color", d => rainbow(d.j))
.text((d) => {
if (d.i == 0 && d.j == 0) {
return
} else if (d.i == 0) {
return d.j
} else if (d.j == 0) {
return String.fromCharCode("A".charCodeAt(0) + d.i - 1)
} else {
return Math.random() * 100 | 0
}
})
.style("width", w + "px")
.style("height", h + "px")
.style("left", (d) => w * d.i + "px")
.style("top", (d) => h * d.j + "px")
cell.transition()
.duration(1000)
.delay(1000)
.style("top", (d) => h * d.j + p * d.j + "px")
.style("border-color", "#eee")
.transition()
.duration(1000)
.style("color", d => rainbow(d.i))
.style("left", (d) => w * d.i + p * d.i + "px")
.style("top", (d) => h * d.j + "px")
.transition()
.duration(2000)
.style("left", (d) => w * d.j + "px")
.style("top", (d) => h * d.i + p * d.i + "px")
.transition()
.duration(1000)
.style("border-color", "#fff")
.style("left", (d) => w * d.j + "px")
.style("top", (d) => h * d.i + "px")
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment