Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
198 lines (177 sloc) 4.56 KB
<!--
This code was mostly written by Mike Bostock, for one of his talks.
I've borrowed it to give a talk about d3.js.
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>An Intro to d3.js</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
body {
background: #000;
position: relative;
width: 1024px;
height: 768px;
margin: auto;
overflow: hidden;
}
iframe {
border: none;
position: absolute;
width: 1024px;
height: 768px;
background: #fff;
-moz-transition-property: -moz-transform, opacity;
-moz-transition-duration: 500ms;
-webkit-transition-property: -webkit-transform, opacity;
-webkit-transition-duration: 500ms;
}
#about {
font: 14px "Helvetica Neue";
position: absolute;
width: 1280px;
top: 840px;
}
#about, #about a {
color: #fff;
}
#previous {
opacity: 0;
-moz-transform: translateX(-1300px);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1300, 0, 0, 1);
}
#current {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
#next {
opacity: 0;
-moz-transform: translateX(1300px);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1300, 0, 0, 1);
}
</style>
</head>
<body>
<iframe id="previous"></iframe>
<iframe id="current"></iframe>
<iframe id="next"></iframe>
<div id="about">
</div>
<script type="text/javascript">
var slides = [
"title.html",
"intro.html",
"egovis.html", //data
"structure.html",
"JSON.html",
"JSON_1.html",
"json_golden_rule.html",
"JSON_2.html",
"JSON_3.html",
"jsonlint.html",
"server.html",
"elements.html",
"JSON_4.html",
"html_base.html",
"list_code.html",
"html_after.html",
"list.html",
"bar.html",
"bar_code.html",
"html_after_bars.html",
"select.html",
"scale.html",
"scale_1.html",
"axes.html",
"line.html",
"onmouseover.html",
"summary.html",
"toread.html",
"layout.html",
"layout_1.html"
];
var previous = d3.select("#previous"),
current = d3.select("#current"),
next = d3.select("#next"),
query = "?" + Date.now(),
previousIndex,
currentIndex = +location.hash.substring(1) || 0,
nextIndex;
resize();
step(0);
d3.selectAll("iframe").on("load", function() {
this.contentWindow.focus();
d3.select(this.contentWindow).on("keydown", function() {
console.log(d3.event.keyCode)
switch (d3.event.keyCode) {
case 39: // right arrow
case 32: // space
case 34: { // page down
step(+1);
break;
}
case 8: { // delete
step(d3.event.shiftKey ? +1 : -1);
break;
}
case 37: // left arrow
case 33: { // page up
step(-1);
break;
}
case 36: { // home
currentIndex = 0;
step(0);
break;
}
case 35: { // end
currentIndex = slides.length - 1;
step(0);
break;
}
default: return;
}
d3.event.preventDefault();
});
});
d3.select(window).on("resize", resize).on("hashchange", function hashchange() {
var that = d3.select(this).on("hashchange", null);
currentIndex = +location.hash.substring(1);
step(0);
that.on("hashchange", hashchange);
});
function resize() {
d3.select("body").style("margin-top", (window.innerHeight - 800) / 3 + "px");
}
function step(delta) {
if (delta > 0) {
var temp = previous;
previousIndex = currentIndex;
previous = current.attr("id", "previous");
currentIndex = nextIndex;
current = next.attr("id", "current");
nextIndex = nextIndex >= slides.length - 1 ? 0 : nextIndex + 1;
next = temp.attr("id", "next");
} else if (delta < 0) {
var temp = next;
nextIndex = currentIndex;
next = current.attr("id", "next");
currentIndex = previousIndex;
current = previous.attr("id", "current");
previousIndex = previousIndex <= 0 ? slides.length - 1 : previousIndex - 1;
previous = temp.attr("id", "previous");
} else {
nextIndex = currentIndex >= slides.length - 1 ? 0 : currentIndex + 1;
previousIndex = currentIndex <= 0 ? slides.length - 1 : currentIndex - 1;
}
previous.transition().delay(750).attr("src", slides[previousIndex] + query);
current.transition().delay(250).attr("src", slides[currentIndex] + query);
next.transition().delay(750).attr("src", slides[nextIndex] + query);
location.hash = currentIndex;
}
</script>
</body>
</html>