// This is an example Chiasm plugin based on HTML5 Canvas.
// This displays a wave simulation.
// Clicking on the canvas interacts with the simulation.
// Note that D3.js is not used at all here.
function Wave (){
var my = new ChiasmComponent();
my.el = document.createElement("div");
// Construct the SVG DOM.
var svg = d3.select(my.el).append("svg");
var g = marginConvention(my, svg);
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
svg
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
my.when(["box", "data"], function (box, data){
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + box.height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return box.height - y(d.frequency); });
}
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
function marginConvention(my, svg){
var g = svg.append("g");
my.addPublicProperty("margin", {top: 20, right: 20, bottom: 30, left: 20});
my.when(["box", "margin"], function (box, margin){
my.width = box.width - margin.left - margin.right;
my.height = box.height - margin.top - margin.bottom;
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
});
return g;
}
function xScaleLinear(my){
var scale = d3.scale.linear();
my.addPublicProperty("xScaleDomain", [0, 1000]);
my.when(["xScaleDomain", "width"], function (xScaleDomain, width){
my.xScale = scale
.domain(xScaleDomain)
.range([0, width]);
});
}
function xAxis(my, g){
var axisG = g.append("g").attr("class", "x axis");
var axis = d3.svg.axis();
my.when("xScale", function (xScale){
axis.scale(xScale);
axisG.call(axis);
});
my.when("height", function (height){
axisG.attr("transform", "translate(0," + height + ")");
});
}
return my;
}