Sha256: 7bf2011c57b0d8d92b0f944db3976da6e5ddb187cd8242d1c240315599eb87b1
Contents?: true
Size: 1.39 KB
Versions: 31
Compression:
Stored size: 1.39 KB
Contents
<!DOCTYPE html>
<html>
<head>
<title>Hello, data!</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
body {
font: 14px Helvetica Neue;
text-rendering: optimizeLegibility;
margin: 1em;
}
#cells {
position: relative;
margin-top: .5em;
height: 300px;
overflow: hidden;
}
.cell {
position: absolute;
background: steelblue;
color: white;
width: 28px;
text-align: center;
padding-top: 6px;
top: 300px;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(steelblue));
-webkit-transition-property: top, background-color;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease, linear;
}
</style>
</head>
<body>
Your lucky numbers are:<br>
<div id="cells"></div>
<script type="text/javascript">
var n = 10;
d3.select("#cells")
.selectAll("div")
.data(d3.range(n))
.enter().append("div")
.attr("class", "cell")
.style("left", function(i) { return i * 30; });
function transform() {
d3.selectAll(".cell")
.data(d3.range(n).map(Math.random))
.style("top", function(d) { return (1 - d) * 300; })
.style("background-color", function(d) { return "rgb(" + ~~(d * 255) + ",50,100)"; })
.text(function(d) { return ~~(d * 100); });
}
window.addEventListener("keypress", transform, false);
</script>
</body>
</html>
Version data entries
31 entries across 31 versions & 2 rubygems