rails-data-explorer 0.0.1

data/lib/rails-data-explorer/chart/descriptive_statistics_table.rb

@@ -0,0 +1,22 @@
+class RailsDataExplorer
+  class Chart
+    class DescriptiveStatisticsTable < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def render
+        return ''  unless render?
+        content_tag(:div, :id => dom_id, :class => 'rde-chart rde-descriptive-statistics-table') do
+          @data_set.data_series.map { |data_series|
+            content_tag(:h3, "Descriptive Statistics", :class => 'rde-chart-title') +
+            render_html_table(data_series.descriptive_statistics_table)
+          }.join.html_safe
+        end
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/histogram_categorical.rb

@@ -0,0 +1,73 @@
+class RailsDataExplorer
+  class Chart
+    class HistogramCategorical < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def compute_chart_attrs
+        x_ds = @data_set.data_series.first
+        # compute histogram
+        h = x_ds.values.inject(Hash.new(0)) { |m,e| m[e] += 1; m }
+        {
+          values: h.map { |k,v| { x: k, y: v } }.sort { |a,b| b[:y] <=> a[:y] },
+          x_axis_label: x_ds.name,
+          x_axis_tick_format: "",
+          y_axis_label: 'Frequency',
+          y_axis_tick_format: "d3.format('r')",
+        }
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-histogram">
+            <h3 class="rde-chart-title">Histogram</h3>
+            <div id="#{ dom_id }", style="height: 200px;">
+              <svg></svg>
+            </div>
+            <script type="text/javascript">
+              (function() {
+                var data = [
+                  {
+                    values: #{ ca[:values].to_json },
+                    key: '#{ ca[:x_axis_label] }'
+                  }
+                ];
+
+                nv.addGraph(function() {
+                  var chart = nv.models.discreteBarChart()
+                    ;
+
+                  chart.xAxis
+                    .axisLabel('#{ ca[:x_axis_label] }')
+                    .tickFormat(#{ ca[:x_axis_tick_format] })
+                    ;
+
+                  chart.yAxis
+                    .axisLabel('#{ ca[:y_axis_label] }')
+                    .tickFormat(#{ ca[:y_axis_tick_format] })
+                    ;
+
+                  d3.select('##{ dom_id } svg')
+                    .datum(data)
+                    .transition().duration(100)
+                    .call(chart)
+                    ;
+
+                  nv.utils.windowResize(chart.update);
+
+                  return chart;
+                });
+              })();
+            </script>
+          </div>
+        )
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/histogram_quantitative.rb

@@ -0,0 +1,73 @@
+class RailsDataExplorer
+  class Chart
+    class HistogramQuantitative < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def compute_chart_attrs
+        x_ds = @data_set.data_series.first
+        # compute histogram
+        h = x_ds.values.inject(Hash.new(0)) { |m,e| m[e] += 1; m }
+        {
+          values: h.map { |k,v| { x: k, y: v } },
+          x_axis_label: x_ds.name,
+          x_axis_tick_format: x_ds.axis_tick_format,
+          y_axis_label: 'Frequency',
+          y_axis_tick_format: "d3.format('r')",
+        }
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-histogram">
+            <h3 class="rde-chart-title">Histogram</h3>
+            <div id="#{ dom_id }", style="height: 200px;">
+              <svg></svg>
+            </div>
+            <script type="text/javascript">
+              (function() {
+                var data = [
+                  {
+                    values: #{ ca[:values].to_json },
+                    key: '#{ ca[:x_axis_label] }'
+                  }
+                ];
+
+                nv.addGraph(function() {
+                  var chart = nv.models.historicalBarChart()
+                    ;
+
+                  chart.xAxis
+                    .axisLabel('#{ ca[:x_axis_label] }')
+                    .tickFormat(#{ ca[:x_axis_tick_format] })
+                    ;
+
+                  chart.yAxis
+                    .axisLabel('#{ ca[:y_axis_label] }')
+                    .tickFormat(#{ ca[:y_axis_tick_format] })
+                    ;
+
+                  d3.select('##{ dom_id } svg')
+                    .datum(data)
+                    .transition().duration(100)
+                    .call(chart)
+                    ;
+
+                  nv.utils.windowResize(chart.update);
+
+                  return chart;
+                });
+              })();
+            </script>
+          </div>
+        )
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/histogram_temporal.rb

@@ -0,0 +1,78 @@
+class RailsDataExplorer
+  class Chart
+    class HistogramTemporal < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def compute_chart_attrs
+        x_ds = @data_set.data_series.first
+        # compute histogram
+        h = x_ds.values.inject(Hash.new(0)) { |m,e|
+          # Round to day
+          key = (e.beginning_of_day).to_i * 1000
+          m[key] += 1
+          m
+        }
+        {
+          values: h.map { |k,v| { x: k, y: v } },
+          x_axis_label: x_ds.name,
+          x_axis_tick_format: x_ds.axis_tick_format,
+          y_axis_label: 'Frequency',
+          y_axis_tick_format: "d3.format('r')",
+        }
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-histogram">
+            <h3 class="rde-chart-title">Histogram</h3>
+            <div id="#{ dom_id }", style="height: 200px;">
+              <svg></svg>
+            </div>
+            <script type="text/javascript">
+              (function() {
+                var data = [
+                  {
+                    values: #{ ca[:values].to_json },
+                    key: '#{ ca[:x_axis_label] }'
+                  }
+                ];
+
+                nv.addGraph(function() {
+                  var chart = nv.models.historicalBarChart()
+                    ;
+
+                  chart.xAxis
+                    .axisLabel('#{ ca[:x_axis_label] }')
+                    .tickFormat(#{ ca[:x_axis_tick_format] })
+                    ;
+
+                  chart.yAxis
+                    .axisLabel('#{ ca[:y_axis_label] }')
+                    .tickFormat(#{ ca[:y_axis_tick_format] })
+                    ;
+
+                  d3.select('##{ dom_id } svg')
+                    .datum(data)
+                    .transition().duration(100)
+                    .call(chart)
+                    ;
+
+                  nv.utils.windowResize(chart.update);
+
+                  return chart;
+                });
+              })();
+            </script>
+          </div>
+        )
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/multi_dimensional_charts.rb

@@ -0,0 +1 @@
+# http://dc-js.github.io/dc.js/

data/lib/rails-data-explorer/chart/parallel_coordinates.rb

@@ -0,0 +1,89 @@
+# TODO: add :color chart_role (test first if it makes sense, e.g., for 'pay')
+class RailsDataExplorer
+  class Chart
+    class ParallelCoordinates < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-parallel-coordinates">
+            <h3 class="rde-chart-title">Parallel coordinates</h3>
+            <div id="#{ dom_id }" class="rde-chart-parallel-coordinates parcoords" style="height: 400px; width: 100%"></div>
+            <script type="text/javascript">
+              (function() {
+                var parcoords = d3.parcoords()("##{ dom_id }")
+                                  .dimensions(#{ ca[:dimensions ].to_json })
+                                  .types(#{ ca[:types].to_json })
+                                  .alpha(#{ ca[:alpha] })
+                                  ;
+
+                parcoords.data(#{ ca[:values].to_json })
+                         .render()
+                         .createAxes() // has to come before other methods that rely on axes (e.g., brushable)
+                         // .shadows() // they don't redraw after reordering, so I'm turning them off for now.
+                         .reorderable()
+                         .brushable()
+                         ;
+
+              })();
+            </script>
+          </div>
+        )
+      end
+
+      # Render ParallelCoordinates only when there is at least one data series
+      # with DataType Quantitative. If it's all Categorical, then ParallelSet
+      # is much better suited.
+      def render?
+        @data_set.data_series.any? { |ds|
+          ds.data_type.is_a?(RailsDataExplorer::DataType::Quantitative)
+        }
+      end
+
+      def compute_chart_attrs
+        dimension_data_series = @data_set.data_series.find_all { |ds|
+          (ds.chart_roles[Chart::ParallelCoordinates] & [:dimension, :any]).any?
+        }
+        dimension_names = dimension_data_series.map(&:name)
+        number_of_values = dimension_data_series.first.values.length
+        dimension_values = number_of_values.times.map do |idx|
+          dimension_data_series.inject({}) { |m,ds|
+            m[ds.name] = if ds.data_type.is_a?(RailsDataExplorer::DataType::Quantitative::Temporal)
+              ds.values[idx].to_i * 1000
+            else
+              ds.values[idx]
+            end
+            m
+          }
+        end
+        dimension_types = dimension_data_series.inject({}) { |m,ds|
+          m[ds.name] = case ds.data_type
+          when RailsDataExplorer::DataType::Categorical
+            'string'
+          when RailsDataExplorer::DataType::Quantitative::Temporal
+            'date'
+          when RailsDataExplorer::DataType::Quantitative::Integer,
+               RailsDataExplorer::DataType::Quantitative::Decimal
+            'number'
+          else
+            raise "Unhandled data_type: #{ ds.data_type.inspect }"
+          end
+          m
+        }
+        {
+          :dimensions => dimension_names,
+          :values => dimension_values,
+          :types => dimension_types,
+          :alpha => 1 / ([Math.log([number_of_values, 2].max), 10].min) # from 1.0 to 0.1
+        }
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/parallel_set.rb

@@ -0,0 +1,65 @@
+# http://www.jasondavies.com/parallel-sets/
+# Suitable when all data series are categorical
+class RailsDataExplorer
+  class Chart
+    class ParallelSet < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def compute_chart_attrs
+        dimension_data_series = @data_set.data_series.find_all { |ds|
+          (ds.chart_roles[Chart::ParallelCoordinates] & [:dimension, :any]).any?
+        }
+        number_of_values = dimension_data_series.first.values.length
+        dimension_names = dimension_data_series.map(&:name)
+        dimension_values = number_of_values.times.map do |idx|
+          dimension_data_series.inject({}) { |m,ds|
+            m[ds.name] = if ds.data_type.is_a?(RailsDataExplorer::DataType::Quantitative::Temporal)
+              ds.values[idx].to_i * 1000
+            else
+              ds.values[idx]
+            end
+            m
+          }
+        end
+        {
+          :dimensions => dimension_names,
+          :values => dimension_values
+        }
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-parallel-set">
+            <h3 class="rde-chart-title">Parallel Set</h3>
+            <div id="#{ dom_id }" class="rde-chart-parallel-set" style="height: 600px; width: 100%"></div>
+            <script type="text/javascript">
+              (function() {
+                var parset = d3.parsets()
+                               .dimensions(#{ ca[:dimensions ].to_json })
+                               ;
+
+                var vis = d3.select("##{ dom_id }")
+                            .append("svg")
+                            .attr("width", parset.width())
+                            .attr("height", parset.height())
+                            ;
+
+                vis.datum(#{ ca[:values].to_json })
+                   .call(parset)
+                   ;
+
+              })();
+            </script>
+          </div>
+        )
+      end
+
+    end
+  end
+end

data/lib/rails-data-explorer/chart/pie_chart.rb

@@ -0,0 +1,67 @@
+class RailsDataExplorer
+  class Chart
+    class PieChart < Chart
+
+      def initialize(_data_set, options = {})
+        @data_set = _data_set
+        @options = {}.merge(options)
+      end
+
+      def compute_chart_attrs
+        x_ds = @data_set.data_series.first
+        total_count = x_ds.values.length
+        # compute histogram
+        h = x_ds.values.inject(Hash.new(0)) { |m,e| m[e] += 1; m }
+        {
+          values: h.map { |k,v|
+                    { x: k, y: (v / total_count.to_f) }
+                  }.sort { |a,b|
+                    b[:y] <=> a[:y]
+                  },
+          x_axis_label: x_ds.name,
+          x_axis_tick_format: "",
+          y_axis_label: 'Frequency',
+          y_axis_tick_format: "d3.format('r')",
+        }
+      end
+
+      def render
+        return ''  unless render?
+        ca = compute_chart_attrs
+        %(
+          <div class="rde-chart rde-pie-chart">
+            <h3 class="rde-chart-title">Pie Chart</h3>
+            <div id="#{ dom_id }", style="height: 400px; width: 400px;">
+              <svg></svg>
+            </div>
+            <script type="text/javascript">
+              (function() {
+                var data = #{ ca[:values].to_json };
+
+                nv.addGraph(function() {
+                  var chart = nv.models.pieChart()
+                    ;
+
+                  chart.valueFormat(d3.format('.1%'))
+                       .donut(true)
+                    ;
+
+                  d3.select('##{ dom_id } svg')
+                    .datum(data)
+                    .transition().duration(100)
+                    .call(chart)
+                    ;
+
+                  nv.utils.windowResize(chart.update);
+
+                  return chart;
+                });
+              })();
+            </script>
+          </div>
+        )
+      end
+
+    end
+  end
+end