"D3.js is a small, free JavaScript library for manipulating documents based on data."
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Mon Apr 02 2012 17:49:24 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: Test of d3
Description: "D3.js is a small, free JavaScript library for manipulating documents based on data."
Url: http://mbostock.github.com/d3/
InternalName:
YoutubeId:
Keywords:
My Notes
--------
This workbook needs to be loaded using the d3 skin::
http://www.primordion.com/Xholon/wb/openwb.php?q=2284726&f=gist.github.com/raw/&s=3
This is just a test to see how d3 will play with a Xholon Workbook.
There's a "svgns is not defined" error from xholonWorkbook.js.
var svg = $(doc.getElementsByTagNameNS(svgns, 'svg')[0]);
svgns is need by svg-web which I'm not using here.
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
#print "height = 12.34 m"
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
//print("height = 56.78 meters\n");
]]></script>
<_-.XholonClass>
<!-- domain objects -->
<PhysicalSystem/>
<Block/>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<Block/>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
# This works if pasted in as a last child of Block.
#height.incVal(0.02)
#print("Python wants something to do. Height:" + str(height))
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
//height.incVal(0.02);
//print("JavaScript wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<Blockbehavior implName="lang:webEditionjs:inline:"><![CDATA[
var test = 3; // 1 or 2 or 3
switch(test) {
case 1:
// test 1: NO
//var circle = svg.selectAll("circle");
//println(circle);
break;
case 2:
// test 2 (from d3 Hello World example): this works
var data = [4, 8, 15, 16, 23, 42];
d3.selectAll("div.Block")
.data(data)
.append("svg")
.attr("width", 100)
.attr("height", 100)
.append("text")
.attr("x", "50%")
.attr("y", "50%")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.style("font", "36pt Comic Sans MS")
.style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
.text(function(d) { return d; });
break;
case 3:
// test 3 (from d3 Line example): this works
var data = d3.range(20).map(function(i) {
return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
});
var w = 450,
h = 275,
p = 20,
x = d3.scale.linear().domain([0, 1]).range([0, w]),
y = d3.scale.linear().domain([0, 1]).range([h, 0]);
var vis = d3.select("div.Block")
.data([data])
.append("svg")
.attr("width", w + p * 2)
.attr("height", h + p * 2)
.append("g")
.attr("transform", "translate(" + p + "," + p + ")");
var rules = vis.selectAll("g.rule")
.data(x.ticks(10))
.enter().append("g")
.attr("class", "rule");
rules.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", h - 1);
rules.append("line")
.attr("class", function(d) { return d ? null : "axis"; })
.attr("y1", y)
.attr("y2", y)
.attr("x1", 0)
.attr("x2", w + 1);
rules.append("text")
.attr("x", x)
.attr("y", h + 3)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(x.tickFormat(10));
rules.append("text")
.attr("y", y)
.attr("x", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(y.tickFormat(10));
vis.append("path")
.attr("class", "line")
.attr("d", d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); }));
vis.selectAll("circle.line")
.data(data)
.enter().append("circle")
.attr("class", "line")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", 3.5);
// css (from line.css)
d3.selectAll("div.Block")
.style("font","10px sans-serif");
d3.selectAll(".rule line")
.style("stroke","#eee")
.style("shape-rendering","crispEdges");
d3.selectAll(".rule line.axis")
.style("stroke","#000");
d3.selectAll(".line")
.style("fill","none")
.style("stroke","steelblue")
.style("stroke-width","1.5px");
d3.selectAll("circle.line")
.style("fill","#fff");
// end of test 3
break;
}
]]></Blockbehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
//height.incVal(0.02);
//System.out.print("Java/Beanshell wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
#require 'java'
# This works if pasted in as a last child of Block.
#$height.incVal(0.02)
#puts "Ruby wants something to do. Height: #{$height}"
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
//height.incVal(0.02);
//System.out.print("Groovy wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Block</title>
<circle id="PhysicalSystem/Block" cx="25" cy="25" fill="#aaffaa" r="20"/>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>