PHP Classes

File: demos/002.php

Recommend this page to a friend!
  Classes of Tom Schaefer   d3   demos/002.php   Download  
File: demos/002.php
Role: Example script
Content type: text/plain
Description: live bar chart
Class: d3
Output charts using D3.js JavaScript library
Author: By
Last change: update
Date: 11 years ago
Size: 4,332 bytes
 

Contents

Class file image Download
<?php
include_once "../d3.classes.inc.php";
?>
<a href="http://mbostock.github.com/d3/tutorial/bar-1.html">
    A Bar Chart 1
</a>

<hr>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
<style>
.chart div {
   font: 10px sans-serif;
   background-color: steelblue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
}
.chart rect {
   stroke: white;
      fill: steelblue;
}
</style>

<script>
// definition

<?php
 
# create data
  # hack, php has no literal object
 
$data = d3::variable(
   
f3()->add(d3::concat("return ", d3()->range(10)->map(
           
f3("i")->add(d3::concat("return ", o3(array("x" => d3::concat("i","/", 9) , "y"=> d3::unescape(Math()->random())))))
    ))),
"data"
 
);

  echo
$data;
?>

var d = data();
console.log(d);

<?php
 
  $data
= d3::variable(
    array(
4, 8, 15, 16, 23, 42)
                ,
'data'
 
);
  echo
$data;
?>

<?php
 
# create x
 
$x = d3::variable(
     
d3()
        ->
scale(d3::property)
        ->
linear()
        ->
domain(array(0, d3()->max($data->getVar())))
        ->
range(array(0,420))
      ,
"x"
 
);
  echo
$x;
?>

<?php
 
# create y
 
$y = d3::variable(
   
d3()
      ->
scale(d3::property)
      ->
ordinal()
      ->
domain($data->getVar())
      ->
rangeBands(array(0,120))
    ,
"y"
 
);
  echo
$y;
 
?>


<?php
 
# create hr element
  
echo d3()->select("body")->append("hr");
?>


<?php
 
# first chart
 
$d = new d3();
 
$d->select("body")
    ->
append("div")
    ->
attr("class", "chart")
    ->
selectAll("div")
    ->
data($data->getVar())
    ->
enter()
    ->
append("div")
    ->
style("width", function ($d){ return $d * 10 + "px";})
    ->
text(function($d){ return $d;})
    ;
   echo
$d;
 
?>

<?php
 
# create hr element
  
echo d3()->select("body")->append("hr");
?>


<?php
 
# second chart
 
echo d3()->select("body")
    ->
append("svg")
    ->
attr("class", "chart")
    ->
attr("width", 420)
    ->
attr("height", d3::concat(20,'*', 'data.length'))
    ->
selectAll("rect")->data($data->getVar())
    ->
enter()->append("rect")
    ->
attr("y", function ($d, $i){ return $i * 20;})
    ->
attr("width", $x->getVar())
    ->
attr("height", 20)
    ;


?>


<?php
 
# create hr element
  
echo d3()->select("body")->append("hr");
?>


<?php
 
# third chart
 
$chart = d3::variable(
         
d3()->select("body")
            ->
append("svg")
              ->
attr("class", "chart")
              ->
attr("width", 440)
              ->
attr("height", 140)
              ->
style("margin-left", "32px")
           
            ->
append("g")
              ->
attr("transform", "translate(10,15)")
          ,
"chart"
 
);
  echo
$chart;

?>


<?php

 
echo d3($chart->getVar())
            ->
selectAll("line")
              ->
data( d3( $x->getVar() )->ticks(10))
              ->
enter()->append("line")
                ->
attr("x1", $x->getVar())
                ->
attr("x2", $x->getVar())
                ->
attr("y1", 0)
                ->
attr("y2", 120)
                ->
attr("stroke", "#ccc");
 
?>


<?php
              
 
echo d3($chart->getVar())
            ->
selectAll(".rule")
              ->
data( d3( $x->getVar() )->ticks(10))
              ->
enter()->append("text")
              ->
attr("x", $x->getVar())
              ->
attr("y", 0)
              ->
attr("dy", -3)
              ->
attr("text-anchor", "middle")
              ->
text(d3::variable("String"));

?>


<?php
             
 
echo d3($chart->getVar())
            ->
selectAll("rect")
              ->
data($data->getVar())
              ->
enter()->append("rect")
                ->
attr("y", $y->getVar())
                ->
attr("width", $x->getVar())
                ->
attr("height", d3($y->getVar())->rangeBand() );
?>


<?php

 
echo d3($chart->getVar())
      ->
selectAll(".bar")
        ->
data($data->getVar())
      ->
enter()->append("text")
        ->
attr("class", "bar")
                ->
attr("x", $x->getVar())
                ->
attr("y", function($d) {return $y($d) + $y->rangeBand() / 2;})
                ->
attr("dx", -3)
                ->
attr("dy", ".35em")
                ->
attr("text-anchor", "end")
                ->
text(d3::variable("String"));

?>


<?php

echo d3($chart->getVar())
              ->
append("line")
              ->
attr("y1", 0)
              ->
attr("y2", 120)
              ->
style("stroke", "#000")
            ;


?>


</script>