PHP Classes

File: demos/041.php

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

Contents

Class file image Download
<?php

include_once '../d3.classes.inc.php';

$vars = d3::variables(array("width" => 960, "height" => 700, "color" => d3()->scale->category20c()));
stack()->add($vars);
$radius= d3::variable(d3::unescape( d3::concat( Math()->min($vars->width()->get(), $vars->height()->get()) ), d3::unescape("/2") ), "radius" );
stack()->add($radius->linebreak(2));

$svg = d3()->select("body")->append("svg")->linebreak()->tab()
    ->
attr("width", $vars->width()->get())->linebreak()->tab()
    ->
attr("height", $vars->height()->get())->linebreak()->tab()
    ->
append("g")->linebreak()->tab()->attr("transform", d3::unescape('"translate("+width/2+","+height*.52+")"'))
    ->
createVar("svg");
stack()->add($svg->linebreak());

$partition = d3()->layout->partition()->linebreak()->tab()
    ->
sort(d3::unescape("null"))->linebreak()->tab()
    ->
size(array(d3::concat(2,"*", "Math.PI"), d3::concat($radius->getVar(), "*", $radius->getVar())))->linebreak()->tab()
    ->
value(function($d){return 1;})
    ->
createVar("partition");
stack()->add($partition->linebreak());

$arc = d3()->svg->arc()->linebreak()->tab()
    ->
startAngle(function($d){return $d->x;})->linebreak()->tab()
    ->
endAngle(function($d){return $d->x + $d->dx;})->linebreak()->tab()
    ->
innerRadius(function($d){return Math()->sqrt($d->y);})->linebreak()->tab()
    ->
outerRadius(function($d){return Math()->sqrt($d->y + $d->dy);})
    ->
createVar("arc");
stack()->add($arc->linebreak());


$f = f3("error","root");

$path = $svg->get()->datum(d3::unescape("root"))->selectAll("path")->linebreak()->tab()
        ->
data($partition->get()->nodes(d3::property))->linebreak()->tab()
        ->
enter()->append("path")->linebreak()->tab()
        ->
attr("display", function($d){return $d->depth ? null: "none";})->linebreak()->tab()
        ->
attr("d", $arc->get())->linebreak()->tab()
        ->
style("stroke", "#fff")->linebreak()->tab()
        ->
style("fill", function($d){$v=($d->children?$d:$d->parent);return color($v->name);})->linebreak()->tab()
        ->
style("fill-rule", "evenodd")->linebreak()->tab()
        ->
each(d3::unescape("stash"))
        ->
createVar("path")
;
$f->add($path->linebreak());

$change = f3()->name("change");
$change->add( d3::ternary('value = this.value === "count"', f3()->add("return 1;"), f3("d")->add("return d.size;") ) );

$change->add( $path->get()
    ->
data($partition->get()->value(d3::unescape("value"))->nodes(d3::property) )->linebreak()->tab()
    ->
transition()->duration(1500)->linebreak()->tab()->attrTween("d", d3::unescape("arcTween"))
    ->
colon()
);

$f->add(d3()->selectAll("input")->on("change", $change));

$load = d3()->json("data/flare.json", $f);

stack()->add($load->colon()->linebreak());

stack()->add( f3("d")->name("stash")->add("d.x0=d.x;")->add("d.dx0=d.x;")->colon()->linebreak() );
stack()->add( f3("a")->name("arcTween")->add("var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
  return function(t) {
    var b = i(t);
    a.x0 = b.x;
    a.dx0 = b.dx;
    return arc(b);
  };"
)->colon()->linebreak() );

stack()->add( d3()->select(d3::unescape("self.frameElement"))->style("height", d3::concat($vars->height()->getVar(), '+"px"'))->colon() );


?><!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
<?php echo d3::script()?>
</head>
<body>
<form>
  <label><input type="radio" name="mode" value="size"> Size</label>
  <label><input type="radio" name="mode" value="count" checked> Count</label>
</form>

    <script type="text/javascript">
<?php echo stack()->getInstance();?>

    </script>
  </body>
</html>