Sha256: c9326ed90d0ac550c56867c8cdd37b93b38eec6e261bf037c166dd0ab5fedd8c
Contents?: true
Size: 1.42 KB
Versions: 31
Compression:
Stored size: 1.42 KB
Contents
<!DOCTYPE html>
<html>
<head>
<title>Hello, data!</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
body, td {
font: 14px Helvetica Neue;
text-rendering: optimizeLegibility;
margin: 1em;
}
table {
border-collapse: collapse;
margin-top: .5em;
}
td {
border: solid 1px #fff;
text-align: center;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
Your lucky numbers are:<br>
<table id="table"></table>
<script type="text/javascript">
var data = [];
for (var i = 0; i < 10; i++) {
for (var j = 0, a = []; j < 10; j++) {
a.push(~~(Math.random() * 100));
}
data.push(a);
}
transform();
function transform() {
var t = d3.select("#table")
.selectAll("tr")
.data(data);
t.enter().append("tr")
.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
.text(function(d) { return d; });
t.selectAll("td")
.data(function(d) { return d; })
.style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
.text(function(d) { return d; });
}
function refresh() {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
data[i][j] = (data[i][j] + 1) % 360;
}
}
transform();
}
window.addEventListener("keypress", refresh, false);
</script>
</body>
</html>
Version data entries
31 entries across 31 versions & 2 rubygems