<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Wed Apr 04 2012 13:58:12 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: Bar chart with D3
Description:
Url: http://mbostock.github.com/d3/tutorial/bar-1.html
InternalName:
YoutubeId:
Keywords:
My Notes
--------
The D3 site has a tutorial that works through creating a bar chart.
Step in migrating the tutorial to this workbook::
Write the code to get a copy of the D3 library script, which is not (yet) a part of a workbook by default. See the PhysicalSystembehavior editor below.
Copy the code for an HTML-based bar chart from the D3 site. See the BarChartHtmlbehavior editor below.
Copy the code for an SVG-based bar chart from the D3 site. See the BarChartSvgbehavior editor below.
How to run the D3 tutorial inside this workbook::
Click the Run button above.
Click the Step button in the overlay.
The HTML-based and SVG-based bar charts should both appear.
Try using different data, by scrolling down to either BarChart behavior on this page. Then click Refresh and Step.
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
]]></script>
<_-.XholonClass>
<!-- domain objects -->
<PhysicalSystem/>
<BarChart>
<BarChartHtml/>
<BarChartSvg/>
</BarChart>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<BarChartHtml/>
<BarChartSvg/>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<PhysicalSystembehavior implName="lang:webEditionjs:inline:"><![CDATA[
function postConfigure() {
this.xholoncreationservice('requireScript', 'd3.v2.min.js');
}
]]></PhysicalSystembehavior>
<BarChartHtmlbehavior implName="lang:webEditionjs:inline:"><![CDATA[
//println(this.siblings().length);
if (this.siblings().length == 0) {
//var data = [4, 8, 15, 16, 23, 42];
var data = [1,1,2,3,5,8,13,21,34,55,89,144,233]; // fibonacci series
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range(["0px", "420px"]);
var chart = d3.select("div.BarChartHtml").append("div").attr("class", "chart");
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", x)
.text(String)
.style("font","10px sans-serif")
.style("background-color","steelblue")
.style("text-align","right")
.style("padding","3px")
.style("margin","1px")
.style("color","white");
}
]]></BarChartHtmlbehavior>
<BarChartSvgbehavior implName="lang:webEditionjs:inline:"><![CDATA[
//println(this.siblings().length);
if (this.siblings().length == 0) {
//var data = [4, 8, 15, 16, 23, 42];
var data = [1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987]; // fibonacci series
var chart = d3.select("div.BarChartSvg").append("svg")
.attr("class", "chart")
.attr("width", 440)
.attr("height", 140)
.append("g")
.attr("transform", "translate(10,15)");
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
var y = d3.scale.ordinal()
.domain(data)
.rangeBands([0, 120]);
chart.selectAll("line")
.data(x.ticks(10))
.enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", 120)
.style("stroke", "#ccc");
chart.selectAll(".rule")
.data(x.ticks(10))
.enter().append("text")
.attr("class", "rule")
.attr("x", x)
.attr("y", 0)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand())
.style("stroke","white")
.style("fill","steelblue");
chart.selectAll("svg")
.data(data)
.enter().append("text")
.attr("x", x)
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(String);
chart.append("line")
.attr("y1", 0)
.attr("y2", 120)
.style("stroke", "#000");
}
]]></BarChartSvgbehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="1" height="1" xmlns="http://www.w3.org/2000/svg">
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>