<?php
include_once "../d3.classes.inc.php";
include_once "../wrappers/pyramid.php";
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://www.peteraldhous.com/Scripts/d3.min.js"></script>
<script src="data/constant.js"></script>
<style >
body {
font-family: arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 5px;
color: #888;
}
a {
color: #888;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: underline;
}
a.active {
color: #000;
}
.label {
position: absolute;
top: 10px;
left: 15px;
font-size: 30px;
font-weight: bold;
color: #d3d3d3;
}
.years, .controls {
position: relative;
padding-top: 10px;
width: 625;
text-align: center;
font-size: 14px;
}
.years span, .controls span {
padding-left: 2px;
padding-right: 2px;
}
.years .title {
font-size: 14px;
}
.years a, .controls a {
color: #888;
text-decoration: none;
}
.years a:hover, .controls a:hover {
color: #000;
text-decoration: underline;
}
.years a.active {
color: #000;
}
.controls a {
text-decoration: none;
}
svg {
shape-rendering: crispEdges;
}
.white {
position: absolute;
top: 70px;
left: 40px;
font-size: 14px;
font-weight: 600;
color: 3F8963;
}
.hispanic {
position: absolute;
top: 70px;
left: 360px;
font-size: 14px;
font-weight: 600;
color: D39713;
}
.black {
position: absolute;
top: 400px;
left: 40px;
font-size: 14px;
font-weight: 600;
color: 3377A3;
}
.asian {
position: absolute;
top: 400px;
left: 360px;
font-size: 14px;
font-weight: 600;
color: C5446C;
}
</style>
</head>
<body>
<script type="text/javascript">
var ctrls = d3.select("body")
.append("div")
.attr("class", "controls");
ctrls.append("text").append("a")
.attr("class", "control back")
.attr("href", "javascript:play(true);")
.text("< Play ");
ctrls.append("text").append("a")
.attr("class", "control toggle")
.attr("href", "javascript:toggle();")
.text("| Pause |");
ctrls.append("text").append("a")
.attr("class", "control forward")
.attr("href", "javascript:play();")
.text(" Play >");
var div = d3.select("body")
.append("div")
.attr("class", "years");
div.append("span")
.attr("class", "title")
.text("Select year:");
div.selectAll("span.link")
.data(d3.range(2010, 2051, 10))
.enter("span")
.attr("class", "link")
.append("a")
.attr("class", linkClass)
.attr("href", function(d) { return d==0000?null:"javascript:goto("+d+");"; })
.text(function(d) { return d.toFixed(0); });
var colors = [,"#3F8963", "#D39713", "#3377A3", "#C5446C"];
document.onkeydown = function(event) {
var y = year;
switch (event.keyCode) {
case 37: // left arrow
y = Math.max(2010, year-10);
case 39: // right arrow
y = Math.min(2050, year+10);
case 32: // space bar
toggle();
return;
}
if (y != year) goto(y);
};
function isYear(d) { return d.year == year; }
function goto(yr, dur) {
dur = dur || 300;
var old = year;
year = yr;
label.text(year);
div.selectAll("span.link a")
.attr("class", linkClass);
updates.forEach(function(u) { u(yr, dur, old); });
}
var timer = undefined;
function stop() {
clearInterval(timer);
timer = undefined;
ctrls.select("a.toggle").text("| Pause |");
}
function toggle() {
if (!timer) {
play();
} else {
stop();
}
}
function play(rev) {
rev = rev || false;
if (timer) { stop(); }
ctrls.select("a.toggle").text("| Pause |");
var advance = function() {
var y = year + (rev?-1:1)*10;
if (y < 2010 || y > 2050) {
// stop at end points
stop();
return;
} else {
// else advance
goto(y, 800);
}
};
advance();
timer = setInterval(advance, 850);
}
function linkClass(y) {
return "y"+y.toFixed(0) + (y==year?" active":"");
}
<?php
$chart = new d3Pyramid();
echo $chart->render();
?>
</script>
<div class="white">
White (Non-<br>Hispanic)
</div>
<div class="hispanic">
Hispanic
</div>
<div class="black">
Black
</div>
<div class="asian">
Asian
</div>
</body>
</html>
|
Download
