<?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>
|
Download
