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