rails-data-explorer 0.0.1 → 0.1.0

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

@@ -9,12 +9,22 @@ class RailsDataExplorer
 
       def compute_chart_attrs
         x_ds = @data_set.data_series.first
+        return false  if x_ds.nil?
+
         # compute histogram
-        h = x_ds.values.inject(Hash.new(0)) { |m,e| m[e] += 1; m }
+        quantizer = Utils::DataQuantizer.new(x_ds, :max_number_of_bins => 100)
+        quantized_values = quantizer.values
+        number_of_bars = quantizer.number_of_bins
+        width = 800
+        h = quantized_values.inject(Hash.new(0)) { |m,e| m[e] += 1; m }
         {
           values: h.map { |k,v| { x: k, y: v } },
+          width: width,
           x_axis_label: x_ds.name,
           x_axis_tick_format: x_ds.axis_tick_format,
+          x_scale_type: 'linear',
+          x_scale_nice: true,
+          bar_width: (width / number_of_bars.to_f) - 3,
           y_axis_label: 'Frequency',
           y_axis_tick_format: "d3.format('r')",
         }
@@ -23,8 +33,89 @@ class RailsDataExplorer
       def render
         return ''  unless render?
         ca = compute_chart_attrs
+        return ''  unless ca
+        render_vega(ca)
+      end
+
+      def render_vega(ca)
         %(
-          <div class="rde-chart rde-histogram">
+          <div class="rde-chart rde-histogram-quantitative">
+            <h3 class="rde-chart-title">Histogram</h3>
+            <div id="#{ dom_id }"></div>
+            <script type="text/javascript">
+              (function() {
+                var spec = {
+                  "width": #{ ca[:width] },
+                  "height": 200,
+                  "padding": {"top": 10, "left": 70, "bottom": 50, "right": 10},
+                  "data": [
+                    {
+                      "name": "table",
+                      "values": #{ ca[:values].to_json }
+                    }
+                  ],
+                  "scales": [
+                    {
+                      "name": "x",
+                      "type": "#{ ca[:x_scale_type] }",
+                      "range": "width",
+                      "zero": false,
+                      "nice": #{ ca[:x_scale_nice] },
+                      "domain": {"data": "table", "field": "data.x"}
+                    },
+                    {
+                      "name": "y",
+                      "range": "height",
+                      "domain": {"data": "table", "field": "data.y"}
+                    }
+                  ],
+                  "axes": [
+                    {
+                      "type": "x",
+                      "scale": "x",
+                      "title": "#{ ca[:x_axis_label] }",
+                      "format": #{ ca[:x_axis_tick_format] },
+                    },
+                    {
+                      "type": "y",
+                      "scale": "y",
+                      "title": "#{ ca[:y_axis_label] }",
+                      "titleOffset": 60,
+                      "format": #{ ca[:y_axis_tick_format] },
+                    }
+                  ],
+                  "marks": [
+                    {
+                      "type": "rect",
+                      "from": {"data": "table"},
+                      "properties": {
+                        "enter": {
+                          "x": {"scale": "x", "field": "data.x"},
+                          "width": { "value": #{ ca[:bar_width] } },
+                          "y": {"scale": "y", "field": "data.y"},
+                          "y2": {"scale": "y", "value": 0},
+                        },
+                        "update": {
+                          "fill": {"value": "#1F77B4"}
+                        },
+                      }
+                    }
+                  ]
+                };
+
+                vg.parse.spec(spec, function(chart) {
+                  var view = chart({ el:"##{ dom_id }" }).update();
+                });
+
+              })();
+            </script>
+          </div>
+        )
+      end
+
+      def render_nvd3(ca)
+        %(
+          <div class="rde-chart rde-histogram-quantitative">
             <h3 class="rde-chart-title">Histogram</h3>
             <div id="#{ dom_id }", style="height: 200px;">
               <svg></svg>
@@ -52,6 +143,12 @@ class RailsDataExplorer
                     .tickFormat(#{ ca[:y_axis_tick_format] })
                     ;
 
+                  chart.tooltipContent(
+                    function(key, x, y, e, graph) {
+                      return '<p>' + key + '</p>' + '<p>' +  y + ' at ' + x + '</p>'
+                    }
+                  );
+
                   d3.select('##{ dom_id } svg')
                     .datum(data)
                     .transition().duration(100)

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

@@ -1,78 +1,33 @@
+# TODO: could I use histogram_quantitative instead and just tweak the tick mark format?
 class RailsDataExplorer
   class Chart
-    class HistogramTemporal < Chart
-
-      def initialize(_data_set, options = {})
-        @data_set = _data_set
-        @options = {}.merge(options)
-      end
+    class HistogramTemporal < HistogramQuantitative
 
       def compute_chart_attrs
         x_ds = @data_set.data_series.first
+        return false  if x_ds.nil?
+
         # compute histogram
         h = x_ds.values.inject(Hash.new(0)) { |m,e|
           # Round to day
-          key = (e.beginning_of_day).to_i * 1000
+          key = e.nil? ? nil : (e.beginning_of_day).to_i * 1000
           m[key] += 1
           m
         }
+        width = 800
         {
           values: h.map { |k,v| { x: k, y: v } },
+          width: width,
           x_axis_label: x_ds.name,
           x_axis_tick_format: x_ds.axis_tick_format,
+          x_scale_type: 'time',
+          x_scale_nice: "'day'",
+          bar_width: 2,
           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/parallel_coordinates.rb

@@ -11,6 +11,8 @@ class RailsDataExplorer
       def render
         return ''  unless render?
         ca = compute_chart_attrs
+        return ''  unless ca
+
         %(
           <div class="rde-chart rde-parallel-coordinates">
             <h3 class="rde-chart-title">Parallel coordinates</h3>
@@ -50,6 +52,8 @@ class RailsDataExplorer
         dimension_data_series = @data_set.data_series.find_all { |ds|
           (ds.chart_roles[Chart::ParallelCoordinates] & [:dimension, :any]).any?
         }
+        return false  if dimension_data_series.empty?
+
         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|

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

@@ -13,6 +13,8 @@ class RailsDataExplorer
         dimension_data_series = @data_set.data_series.find_all { |ds|
           (ds.chart_roles[Chart::ParallelCoordinates] & [:dimension, :any]).any?
         }
+        return false  if dimension_data_series.empty?
+
         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|
@@ -34,6 +36,8 @@ class RailsDataExplorer
       def render
         return ''  unless render?
         ca = compute_chart_attrs
+        return ''  unless ca
+
         %(
           <div class="rde-chart rde-parallel-set">
             <h3 class="rde-chart-title">Parallel Set</h3>

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

@@ -9,25 +9,95 @@ class RailsDataExplorer
 
       def compute_chart_attrs
         x_ds = @data_set.data_series.first
+        return false  if x_ds.nil?
+
         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')",
+            { key: k, value: (v / total_count.to_f) }
+          }.sort(
+            &x_ds.label_sorter(
+              :key,
+              lambda { |a,b| b[:value] <=> a[:value] }
+            )
+          )
         }
       end
 
       def render
         return ''  unless render?
         ca = compute_chart_attrs
+        return ''  unless ca
+        render_vega(ca)
+      end
+
+      def render_vega(ca)
+        %(
+          <div class="rde-chart rde-pie-chart">
+            <h3 class="rde-chart-title">Pie Chart</h3>
+            <div id="#{ dom_id }"></div>
+            <script type="text/javascript">
+              (function() {
+                var spec = {
+                  "width": 300,
+                  "height": 300,
+                  "padding": {"top": 10, "left": 10, "bottom": 10, "right": 100},
+                  "data": [
+                    {
+                      "name": "table",
+                      "values": #{ ca[:values].to_json }
+                    }
+                  ],
+                  "scales": [
+                    {
+                      "name": "color",
+                      "domain": {"data": "table", "field": "data.key"},
+                      "range": "category10",
+                      "type": "ordinal"
+                    },
+                  ],
+                  "axes": [],
+                  "marks": [
+                    {
+                      "type": "arc",
+                      "from": {
+                        "data": "table",
+                        "transform": [{"type": "pie", "value": "data.value"}]
+                      },
+                      "properties": {
+                        "enter": {
+                          "x": {"group": "width", "mult": 0.5},
+                          "y": {"group": "height", "mult": 0.5},
+                          "endAngle": {"field": "endAngle"},
+                          "innerRadius": {"value": 100},
+                          "outerRadius": {"value": 150},
+                          "startAngle": {"field": "startAngle"},
+                          "stroke": {"value": "white"},
+                          "fill": {"field": "data.key", "scale": "color"}
+                        }
+                      }
+                    }
+                  ],
+                  "legends": [
+                    {
+                      "fill": "color",
+                    }
+                  ],
+                };
+
+                vg.parse.spec(spec, function(chart) {
+                  var view = chart({ el:"##{ dom_id }" }).update();
+                });
+
+              })();
+            </script>
+          </div>
+        )
+      end
+
+      def render_nvd3(ca)
         %(
           <div class="rde-chart rde-pie-chart">
             <h3 class="rde-chart-title">Pie Chart</h3>
@@ -45,6 +115,11 @@ class RailsDataExplorer
                   chart.valueFormat(d3.format('.1%'))
                        .donut(true)
                     ;
+                  chart.tooltipContent(
+                    function(key, y, e, graph) {
+                      return '<p>' + key + '</p>' + '<p>' +  y + '</p>'
+                    }
+                  );
 
                   d3.select('##{ dom_id } svg')
                     .datum(data)
@@ -62,6 +137,12 @@ class RailsDataExplorer
         )
       end
 
+      # Render PieChart only if there is a fairly small number of
+      # distinct values.
+      def render?
+        !@data_set.data_series.first.has_many_uniq_vals?
+      end
+
     end
   end
 end

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

@@ -25,6 +25,7 @@ class RailsDataExplorer
         y_ds = (y_candidates - [x_ds]).first
         color_ds = (color_candidates - [x_ds, y_ds]).first
         size_ds = (size_candidates - [x_ds, y_ds, color_ds]).first
+        return false  if x_ds.nil? || y_ds.nil?
 
         ca = case @data_set.dimensions_count
         when 0,1
@@ -37,7 +38,7 @@ class RailsDataExplorer
             r
           }
           {
-            values: [ { key: key, values: values_hash } ],
+            values: values_hash,
             x_axis_label: x_ds.name,
             x_axis_tick_format: x_ds.axis_tick_format,
             y_axis_label: y_ds.name,
@@ -54,7 +55,7 @@ class RailsDataExplorer
             data_series_hash[visual_attr_ds.values[idx]] << { x: x_ds.values[idx], y: y_ds.values[idx] }
           }
           {
-            values: data_series_hash.map { |k,v| { key: k, values: v } },
+            values: data_series_hash,
             x_axis_label: x_ds.name,
             x_axis_tick_format: x_ds.axis_tick_format,
             y_axis_label: y_ds.name,
@@ -67,7 +68,108 @@ class RailsDataExplorer
 
       def render
         return ''  unless render?
-        chart_attrs = compute_chart_attrs
+        ca = compute_chart_attrs
+        return ''  unless ca
+        render_vega(ca)
+      end
+
+      def render_vega(ca)
+        %(
+          <div class="rde-chart rde-scatterplot">
+            <h3 class="rde-chart-title">Scatterplot</h3>
+            <div id="#{ dom_id }"></div>
+            <script type="text/javascript">
+              (function() {
+                var spec = {
+                  "width": 800,
+                  "height": 200,
+                  "data": [
+                    {
+                      "name": "table",
+                      "values": #{ ca[:values].to_json }
+                    },
+                  ],
+                  "scales": [
+                    {
+                      "name": "x",
+                      "nice": true,
+                      "range": "width",
+                      "zero": false,
+                      "domain": {"data": "table", "field": "data.x"}
+                    },
+                    {
+                      "name": "y",
+                      "nice": true,
+                      "range": "height",
+                      "zero": false,
+                      "domain": {"data": "table", "field": "data.y"}
+                    },
+                    // {
+                    //   "name": "c",
+                    //   "type": "ordinal",
+                    //   "domain": {"data": "iris", "field": "data.species"},
+                    //   "range": ["#800", "#080", "#008"]
+                    // }
+                  ],
+                  "axes": [
+                    {
+                      "type": "x",
+                      "scale": "x",
+                      "offset": 5,
+                      "title": "#{ ca[:x_axis_label] }",
+                    },
+                    {
+                      "type": "y",
+                      "scale": "y",
+                      "offset": 5,
+                      "title": "#{ ca[:y_axis_label] }",
+                    }
+                  ],
+                  // "legends": [
+                  //   {
+                  //     "fill": "c",
+                  //     "title": "Species",
+                  //     "offset": 0,
+                  //     "properties": {
+                  //       "symbols": {
+                  //         "fillOpacity": {"value": 0.5},
+                  //         "stroke": {"value": "transparent"}
+                  //       }
+                  //     }
+                  //   }
+                  // ],
+                  "marks": [
+                    {
+                      "type": "symbol",
+                      "from": {"data": "table"},
+                      "properties": {
+                        "enter": {
+                          "x": {"scale": "x", "field": "data.x"},
+                          "y": {"scale": "y", "field": "data.y"},
+                          //"fill": {"scale": "c", "field": "data.species"},
+                          "fill": { "value": "#1F77B4" },
+                          "fillOpacity": {"value": 0.4},
+                        },
+                        "update": {
+                          "size": {"value": 30},
+                          "stroke": {"value": "transparent"}
+                        },
+                      }
+                    }
+                  ]
+                };
+
+                vg.parse.spec(spec, function(chart) {
+                  var view = chart({ el:"##{ dom_id }" }).update();
+                });
+
+              })();
+            </script>
+          </div>
+        )
+      end
+
+      def render_nvd3(ca)
         %(
           <div class="rde-chart rde-scatterplot">
             <h3 class="rde-chart-title">Scatterplot</h3>
@@ -76,7 +178,7 @@ class RailsDataExplorer
             </div>
             <script type="text/javascript">
               (function() {
-                var data = #{ chart_attrs[:values].to_json };
+                var data = #{ ca[:values].to_json };
 
                 nv.addGraph(function() {
                   var chart = nv.models.scatterChart()
@@ -87,12 +189,12 @@ class RailsDataExplorer
                                 .transitionDuration(300)
                                 ;
 
-                  chart.xAxis.tickFormat(#{ chart_attrs[:x_axis_tick_format] })
-                             .axisLabel('#{ chart_attrs[:x_axis_label] }')
+                  chart.xAxis.tickFormat(#{ ca[:x_axis_tick_format] })
+                             .axisLabel('#{ ca[:x_axis_label] }')
                              ;
 
-                  chart.yAxis.tickFormat(#{ chart_attrs[:y_axis_tick_format] })
-                             .axisLabel('#{ chart_attrs[:y_axis_label] }')
+                  chart.yAxis.tickFormat(#{ ca[:y_axis_tick_format] })
+                             .axisLabel('#{ ca[:y_axis_label] }')
                              ;
 
                   chart.tooltipContent(function(key) {