Test of d3

<?xml version="1.0" encoding="UTF-8"?>  <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>  <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>