class SimpleD3::Template
Public Class Methods
new(placeholder, settings)
click to toggle source
# File lib/simple_d3/template.rb, line 22 def initialize(placeholder, settings) @placeholder = placeholder @settings = settings end
template(placeholder, settings)
click to toggle source
# File lib/simple_d3/template.rb, line 3 def self.template(placeholder, settings) template = new(placeholder, settings) javascript = template.send(settings[:type]) colors = settings[:colors].present? ? template.colors(settings[:colors]) : "d3.scale.category10()" graph = <<-EOJS <script type="text/javascript"> //Width and height var w = #{settings[:width]}; var h = #{settings[:height]}; //Easy colors accessible via a 10-step ordinal scale var colors = #{colors}; #{javascript} </script> EOJS end
Public Instance Methods
bar()
click to toggle source
# File lib/simple_d3/template.rb, line 35 def bar graph = <<-EOJS var xScale = d3.scale.ordinal() .domain(d3.range(data.length)) .rangeRoundBands([0, w], 0.05); var yScale = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, h]); //Create SVG element var #{@placeholder} = d3.select("##{@placeholder}") .append("svg") .attr("width", w) .attr("height", h); //Create bars #{@placeholder}.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d, i) { return colors(i); }) .on("mouseover", function(d) { //Get this bar's x/y values, then augment for the tooltip var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2; var yPosition = parseFloat(d3.select(this).attr("y")) + 14; //Create the tooltip label #{@placeholder}.append("text") .attr("id", "tooltip") .attr("x", xPosition) .attr("y", yPosition) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text(d); }) .on("mouseout", function() { //Remove the tooltip d3.select("#tooltip").remove(); }); EOJS end
colors(color_array)
click to toggle source
# File lib/simple_d3/template.rb, line 27 def colors(color_array) colors = <<-EOJS d3.scale.ordinal() .range(#{color_array.to_s}) .domain(d3.range(0,#{color_array.size})) EOJS end
pie()
click to toggle source
# File lib/simple_d3/template.rb, line 99 def pie pie = <<-EOJS var outerRadius = w / 2; var innerRadius = 0; var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var pie = d3.layout.pie(); //Create SVG element var #{@placeholder} = d3.select("##{@placeholder}") .append("svg") .attr("width", w) .attr("height", h); //Set up groups var arcs = #{@placeholder}.selectAll("g.arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc") .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); //Draw arc paths arcs.append("path") .attr("fill", function(d, i) { return colors(i); }) .attr("d", arc); //Labels arcs.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d) { return d.value; }); EOJS end