Login   Register  
PHP Classes
elePHPant
Icontem

File: demos/030.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Tom Schaefer  >  d3  >  demos/030.php  >  Download  
File: demos/030.php
Role: Example script
Content type: text/plain
Description: pyramid demo chart
Class: d3
Output charts using D3.js JavaScript library
Author: By
Last change:
Date: 2 years ago
Size: 4,397 bytes
 

Contents

Class file image Download
<?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>