d3
Version:
A small, free JavaScript library for manipulating documents based on data.
78 lines (66 loc) • 2.25 kB
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;
color: #ccc;
text-align: center;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
Your lucky numbers are:<br>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</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() {
d3.selectAll("tr")
.data(data)
.selectAll("td")
.data(function(d) { return d; })
.style("background-color", function(d) { return "hsl(0,50%," + d + "%)"; })
.text(function(d) { return d; });
}
function refresh() {
for (var i = 0; i < data.length; i++) {
var z = data[i], d = z.shift();
z.push(~~(Math.random() * 100));
}
transform();
}
window.addEventListener("keypress", refresh, false);
</script>
</body>
</html>