rubyvis 0.1.5 → 0.1.6

data/History.txt

@@ -1,4 +1,12 @@
-=== 0.1.5 / 2010-10-22
+=== 0.1.6 / 2010-10-30
+
+* Improved documentation for examples. Added description from protovis site on the one borrowed from it and added commentary on new ones.
+* Distribution includes 'web' directory, with script to recreate the web site. Use as example of massive creation of graphics
+* Added explicitily "none" to  svg "fill" property. This allows to render properly with librsv (rsgv), without affecting the browser output
+* Added API documentation on many files.
+* Replaced all pv instances on code for Rubyvis
+
+=== 0.1.5 / 2010-10-22
 
 * Bug fix: styles considered properly, so font attribute works right now.
 * Bug fix: anchors have proper parent assignation.

data/Manifest.txt

@@ -8,7 +8,7 @@ examples/area.rb
 examples/bar_column_chart.rb
 examples/barley/barley.rb
 examples/barley/barley_data.rb
-examples/crimea/crimea.rb
+examples/crimea/crimea_data.rb
 examples/crimea/crimea_grouped_bar.rb
 examples/crimea/crimea_line.rb
 examples/dot.rb
@@ -16,6 +16,7 @@ examples/first.rb
 examples/grouped_charts.rb
 examples/line.rb
 examples/line_and_step.rb
+examples/nested_grid.rb
 examples/pie_and_donut.rb
 examples/scatterplot.rb
 examples/second.rb
@@ -30,7 +31,6 @@ lib/rubyvis/format/date.rb
 lib/rubyvis/format/number.rb
 lib/rubyvis/internals.rb
 lib/rubyvis/javascript_behaviour.rb
-lib/rubyvis/label.rb
 lib/rubyvis/layout.rb
 lib/rubyvis/layout/stack.rb
 lib/rubyvis/mark.rb
@@ -61,6 +61,7 @@ lib/rubyvis/scene/svg_scene.rb
 lib/rubyvis/scene/svg_wedge.rb
 lib/rubyvis/sceneelement.rb
 lib/rubyvis/transform.rb
+spec/anchor_spec.rb
 spec/bar_spec.rb
 spec/internal_spec.rb
 spec/javascript_behaviour_spec.rb
@@ -70,6 +71,7 @@ spec/nest_spec.rb
 spec/panel_spec.rb
 spec/scale_linear_datetime_spec.rb
 spec/scale_linear_spec.rb
+spec/scale_log_spec.rb
 spec/scale_ordinal_spec.rb
 spec/scale_spec.rb
 spec/spec.opts
@@ -168,5 +170,8 @@ vendor/protovis/src/text/DateFormat.js
 vendor/protovis/src/text/Format.js
 vendor/protovis/src/text/NumberFormat.js
 vendor/protovis/src/text/TimeFormat.js
-web/first.svg
-web/index.html
+web/Rakefile
+web/build_site.rb
+web/examples.haml
+web/index.haml
+web/style.css

data/README.txt

@@ -4,7 +4,7 @@
 
 == DESCRIPTION:
 
-Ruby port of Protovis, a great visualization toolkit
+Ruby port of Protovis[http://vis.stanford.edu/protovis/], a great visualization toolkit
 
 == FEATURES/PROBLEMS:
 
@@ -17,25 +17,23 @@ Basic protovis examples[http://vis.stanford.edu/protovis/ex/] works exactly like
 * Pie & Donut: Interaction with mouse not implemented
 * Line & Step Charts: Ok
 * Stacked Charts: Ok
-* Grouped Charts: Almost ok. Problems on data stack at third level.
+* Grouped Charts: Ok.
 
 Complex examples requires more works:
 
-* antibiotics: Almost ok. Missing center labels
-* barley: ok
+* antibiotics: Ok
+* barley: Ok
 * crimea: line and grouped line ok.
 
 
-I try to maintain, when posible, complete compatibility with Javascript API, including camel case naming of functions. Johnson [http://github.com/jbarnette/johnson] - the lovely Javascript wrapper inside Ruby embrace - is our friend. 
+I try to maintain, when posible, complete compatibility with Javascript API, including camel case naming of functions. Johnson [http://github.com/jbarnette/johnson] - the lovely Javascript wrapper inside Ruby embrace - is our friend to test implementation of basic object. 
 
 Until version 0.1.0, lambdas should always should created explicitly for method you may be temted to call it with a block.
 
-On a second stage, traditional block calling could be using maintaining backwards compatibily with Javascript API,
+On a second stage, traditional block calling could be using maintaining backwards compatibily with Javascript API. See TODO section for proposal of new API.
 
 User could use +pv+ freely, cause is defined as a global method which call Rubyvis.
 
-+self.parent.index+ doesn't work always as expected. +self.index+ works ok. I'm working on it
-
 == CURRENT PROGRESS
 
 * pv.js
@@ -83,7 +81,60 @@ User could use +pv+ freely, cause is defined as a global method which call Rubyv
     puts vis.to_svg
     
 See examples directory for original protovis examples adaptations.
+
+== TODO
+
+Implement a ruby-like API, like ReportBuilder[http://ruby-statsample.rubyforge.org/reportbuilder/] or Prawn [http://prawn.majesticseacreature.com/docs/] 
+
+The examples/area.rb script should like somethink like that
+
+    require 'rubyvis'
+    vis = Rubyvis::Panel.new {
+      width w 
+      height h 
+      bottom 20 
+      left 20 
+      right 10
+      top 5
+      # Y-axis
+      rule {
+        data y.ticks(5)
+        bottom y
+        stroke_style {|d| d!=0 ? "#eee" : "#000"}
+        anchor("left") {  
+          label {
+            text y.tick_format
+          }
+        }
+      }
+      # X-axis
+      rule {
+        data x.ticks
+        visible {|d| d!=0}
+        left x
+        bottom -5
+        height -5
+        label(:anchor=>'bottom') { # shortcut to create a mark inside an anchor
+          text x.tick_format
+        }
+      }
+      
+      # The area with top line.
+      area {
+        data(data)
+        bottom 1
+        left {|d| x.scale(d.x)}
+        height {|d| y.scale(d.y)}
+        fill_style "rgb(121,173,210)"
+        line(:anchor=>"top") {
+          line_width 3
+        }
+      }
+    }
     
+    puts vis.to_svg
+
+
 == REQUIREMENTS:
 
 Ruby 1.8.7 or 1.9.1

data/examples/antibiotics/antibiotics.rb

@@ -74,20 +74,28 @@ ytick.anchor("left").add(pv.Label)
     .text_align("center");
 
 #/* Dot plot. */
-dot = plot.add(pv.Dot)
-    .data($bacteria)
-    .stroke_style(lambda {|d| color.scale(d[:gram])})
-    .fill_style(lambda {|d| color.scale(d[:gram]).alpha(0.2)})
-    .left(lambda {|d, x, y|  z.scale(d[x.to_sym])})
-    .bottom(lambda {|d, x, y| z.scale(d[y.to_sym])})
-    .title(lambda {|d| d[:name]});
+dot = plot.add(pv.Dot).
+  data($bacteria).
+  stroke_style(lambda { |d|
+    color.scale(d[:gram])
+  }).
+  fill_style(lambda {|d|
+    color.scale(d[:gram]).alpha(0.2)
+  }).
+  left(lambda {|d, x, y|
+    z.scale(d[x.to_sym])
+  }).
+  bottom(lambda {|d, x, y|
+    z.scale(d[y.to_sym])
+  }).
+  title(lambda {|d| d[:name]})
 
 #/* Legend. */
 vis.add(pv.Dot)
     .extend(dot)
     .data([{gram:"positive"}, {gram:"negative"}])
     .bottom(-30)
-    .left(lambda { self.index * 100})
+    .left(lambda { index * 100})
     .title(nil)
   .anchor("right").add(pv.Label)
     .text(lambda {|d| "Gram-" + d[:gram]});

data/examples/area.rb

@@ -1,8 +1,12 @@
+# = Area Charts
+# This simple area chart is constructed using an area mark, with an added line for emphasis on the top edge. Next, rules and labels are added for reference values.
+# Although this example is basic, it provides a good starting point for adding more complex features. For instance, mouseover interaction can be added to allow precise reading of data values. Or multiple series of data can be added to produce a stacked area chart. 
+# Protovis version: http://vis.stanford.edu/protovis/ex/area.html
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 
-data = pv.range(0, 10, 1).map {|x| 
-  OpenStruct.new({:x=> x, :y=> Math.sin(x) + 2})
+data = pv.range(0, 10, 0.1).map {|x| 
+  OpenStruct.new({:x=> x, :y=> Math.sin(x) + 2+ rand()})
 }
 
 
@@ -54,50 +58,3 @@ vis.render();
 
 
 puts vis.to_svg
-
-=begin
-<svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="430" height="225">
-<g transform="translate(20, 5)">
-<line shape-rendering="crispEdges" x1="0" y1="200" x2="400" y2="200" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="150" x2="400" y2="150" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="100" x2="400" y2="100" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="50" x2="400" y2="50" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="0" x2="400" y2="0" stroke="rgb(238,238,238)" stroke-width="1"/>
-</g>
-<g transform="translate(20, 5)">
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 200)" fill="rgb(0,0,0)" text-anchor="end">0</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 150)" fill="rgb(0,0,0)" text-anchor="end">1</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 100)" fill="rgb(0,0,0)" text-anchor="end">2</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 50)" fill="rgb(0,0,0)" text-anchor="end">3</text>
-<text pointer-events="none" x="-3" dy="0.35em" fill="rgb(0,0,0)" text-anchor="end">4</text>
-</g>
-<g transform="translate(20, 5)">
-<line shape-rendering="crispEdges" x1="44.44444444444444" y1="200" x2="44.44444444444444" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="88.88888888888889" y1="200" x2="88.88888888888889" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="133.33333333333331" y1="200" x2="133.33333333333331" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="177.77777777777777" y1="200" x2="177.77777777777777" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="222.22222222222223" y1="200" x2="222.22222222222223" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="266.66666666666663" y1="200" x2="266.66666666666663" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="311.11111111111114" y1="200" x2="311.11111111111114" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="355.55555555555554" y1="200" x2="355.55555555555554" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="400" y1="200" x2="400" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-</g>
-<g transform="translate(20, 5)">
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(44.4444, 205)" fill="rgb(0,0,0)" text-anchor="middle">1</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(88.8889, 205)" fill="rgb(0,0,0)" text-anchor="middle">2</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(133.333, 205)" fill="rgb(0,0,0)" text-anchor="middle">3</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(177.778, 205)" fill="rgb(0,0,0)" text-anchor="middle">4</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(222.222, 205)" fill="rgb(0,0,0)" text-anchor="middle">5</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(266.667, 205)" fill="rgb(0,0,0)" text-anchor="middle">6</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(311.111, 205)" fill="rgb(0,0,0)" text-anchor="middle">7</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(355.556, 205)" fill="rgb(0,0,0)" text-anchor="middle">8</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(400, 205)" fill="rgb(0,0,0)" text-anchor="middle">9</text>
-</g>
-<g transform="translate(20, 5)">
-<path d="M0,99L44.44444444444444,56.92645075960516L88.88888888888889,53.535128658715905L133.33333333333331,91.94399959700664L177.77777777777777,136.8401247653964L222.22222222222223,146.94621373315692L266.66666666666663,112.9707749099463L311.11111111111114,66.15067006406053L355.55555555555554,49.53208766883091L400,78.39407573791217L400,199L355.55555555555554,199L311.11111111111114,199L266.66666666666663,199L222.22222222222223,199L177.77777777777777,199L133.33333333333331,199L88.88888888888889,199L44.44444444444444,199L0,199Z" fill="rgb(121,173,210)"/>
-</g>
-<g transform="translate(20, 5)">
-<path d="M0,99L44.44444444444444,56.92645075960516L88.88888888888889,53.535128658715905L133.33333333333331,91.94399959700664L177.77777777777777,136.8401247653964L222.22222222222223,146.94621373315692L266.66666666666663,112.9707749099463L311.11111111111114,66.15067006406053L355.55555555555554,49.53208766883091L400,78.39407573791217" stroke="rgb(31,119,180)" stroke-width="3"/>
-</g>
-</svg>
-=end

data/examples/bar_column_chart.rb

@@ -1,3 +1,7 @@
+# = Bar & Column Charts
+# This simple bar chart is constructed using a bar mark. A linear scale is used to compute the width of the bar, while an ordinal scale sets the top position and height for the categorical dimension. Next, rules and labels are added for reference values.
+# Bars can be used in a variety of ways. For instance, they can be stacked or grouped to show multiple data series, or arranged as vertical columns rather than bars. 
+
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 

data/examples/crimea/crimea_grouped_bar.rb

@@ -1,7 +1,7 @@
 $:.unshift(File.dirname(__FILE__)+"/../../lib")
 require 'rubyvis'
 require 'ostruct'
-load(File.dirname(__FILE__)+"/crimea.rb")
+load(File.dirname(__FILE__)+"/crimea_data.rb")
 
 
 w = 545
@@ -45,7 +45,7 @@ panel.anchor("bottom").add(pv.Label)
     .text_margin(10)
     .text(lambda {|d| format.format(d.date)})
     
-    
+  
 vis.add(pv.Rule)
     .data(y.ticks())
     .bottom(lambda {|d| y.scale(d)})

data/examples/crimea/crimea_line.rb

@@ -1,7 +1,7 @@
 $:.unshift(File.dirname(__FILE__)+"/../../lib")
 require 'rubyvis'
 require 'ostruct'
-load(File.dirname(__FILE__)+"/crimea.rb")
+load(File.dirname(__FILE__)+"/crimea_data.rb")
 
 
 w = 545

data/examples/dot.rb

@@ -1,3 +1,5 @@
+# = Dot and anchors
+# This example shows how looks differents positions of anchors on dots
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 
@@ -5,15 +7,12 @@ vis = pv.Panel.new().width(200).height(200);
 
 dot=vis.add(pv.Dot)
     .data([1,2,3,4,5,6])
-    .bottom(lambda {|d| return d*30})
-    .left(lambda { return 20+self.index*20} )
+    .bottom(lambda {|d| d*30})
+    .left(lambda { 20+index*40} )
     .shape_radius(10)
-    dot.anchor('top').add(pv.Label).text('a')
-    dot.anchor('bottom').add(pv.Label).text('b')
-    dot.anchor('left').add(pv.Label).text('l')
-    dot.anchor('right').add(pv.Label).text('r')
-    
-
+    %w{top bottom left right center}.each do |dir|
+      dot.anchor(dir).add(pv.Label).text(dir[0,1])
+    end
 vis.render()
 #puts vis.children_inspect
 puts vis.to_svg

data/examples/first.rb

@@ -1,3 +1,7 @@
+# = First example
+# This is the ruby version of "Getting Started" example of Protovis introduction.
+# On this example we show you how can you build a bar chart using panel and bar marks.
+# A mark represents a set of graphical elements that share data and visual encodings. Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 vis = Rubyvis::Panel.new.width(150).height(150);

data/examples/grouped_charts.rb

@@ -1,3 +1,6 @@
+# = Grouped charts
+# In this multi-series bar chart, we group bars together rather than stack them. A grouped chart allows accurate comparison of individual values thanks to an aligned baseline: a position, rather than length, judgment is used.
+# An ordinal scale positions the groups vertically; the bars are then replicated inside a panel, a technique that is also used for small multiples. 
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 

data/examples/line.rb

@@ -1,8 +1,11 @@
+# = Line Chart
+# This line chart is constructed a Line mark.
+# The second line, inside the first one, is created using an anchor.
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 
-data = pv.range(0, 10, 1).map {|x| 
-  OpenStruct.new({:x=> x, :y=> Math.sin(x) + 2})
+data = pv.range(0, 10, 0.1).map {|x| 
+  OpenStruct.new({:x=> x, :y=> Math.sin(x) + 2+rand()})
 }
 
 #p data
@@ -15,70 +18,25 @@ y = pv.Scale.linear(data, lambda {|d| d.y}).range(0, h);
 
 #/* The root panel. */
 vis = pv.Panel.new()
-    .width(w)
-    .height(h)
-    .bottom(20)
-    .left(20)
-    .right(10)
-    .top(5)
+  .width(w)
+  .height(h)
+  .bottom(20)
+  .left(20)
+  .right(10)
+  .top(5)
 
 #/* The area with top line. */
-vis.add(pv.Line)
-    .data(data)
-    .line_width(5)
-    .left(lambda {|d| x.scale(d.x)})
-    .bottom(lambda {|d| y.scale(d.y)}).anchor("bottom").add(pv.Line)
-    .stroke_style('red').line_width(1)
+vis.add(pv.Line).
+  data(data).
+  line_width(5).
+  left(lambda {|d| x.scale(d.x)}).
+  bottom(lambda {|d| y.scale(d.y)}).
+  anchor("bottom").add(pv.Line).
+    stroke_style('red').
+    line_width(1)
      
 
 vis.render();
 
 
 puts vis.to_svg
-
-=begin
-<svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="430" height="225">
-<g transform="translate(20, 5)">
-<line shape-rendering="crispEdges" x1="0" y1="200" x2="400" y2="200" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="150" x2="400" y2="150" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="100" x2="400" y2="100" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="50" x2="400" y2="50" stroke="rgb(238,238,238)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="0" y1="0" x2="400" y2="0" stroke="rgb(238,238,238)" stroke-width="1"/>
-</g>
-<g transform="translate(20, 5)">
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 200)" fill="rgb(0,0,0)" text-anchor="end">0</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 150)" fill="rgb(0,0,0)" text-anchor="end">1</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 100)" fill="rgb(0,0,0)" text-anchor="end">2</text>
-<text pointer-events="none" x="-3" dy="0.35em" transform="translate(0, 50)" fill="rgb(0,0,0)" text-anchor="end">3</text>
-<text pointer-events="none" x="-3" dy="0.35em" fill="rgb(0,0,0)" text-anchor="end">4</text>
-</g>
-<g transform="translate(20, 5)">
-<line shape-rendering="crispEdges" x1="44.44444444444444" y1="200" x2="44.44444444444444" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="88.88888888888889" y1="200" x2="88.88888888888889" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="133.33333333333331" y1="200" x2="133.33333333333331" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="177.77777777777777" y1="200" x2="177.77777777777777" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="222.22222222222223" y1="200" x2="222.22222222222223" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="266.66666666666663" y1="200" x2="266.66666666666663" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="311.11111111111114" y1="200" x2="311.11111111111114" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="355.55555555555554" y1="200" x2="355.55555555555554" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-<line shape-rendering="crispEdges" x1="400" y1="200" x2="400" y2="205" stroke="rgb(0,0,0)" stroke-width="1"/>
-</g>
-<g transform="translate(20, 5)">
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(44.4444, 205)" fill="rgb(0,0,0)" text-anchor="middle">1</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(88.8889, 205)" fill="rgb(0,0,0)" text-anchor="middle">2</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(133.333, 205)" fill="rgb(0,0,0)" text-anchor="middle">3</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(177.778, 205)" fill="rgb(0,0,0)" text-anchor="middle">4</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(222.222, 205)" fill="rgb(0,0,0)" text-anchor="middle">5</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(266.667, 205)" fill="rgb(0,0,0)" text-anchor="middle">6</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(311.111, 205)" fill="rgb(0,0,0)" text-anchor="middle">7</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(355.556, 205)" fill="rgb(0,0,0)" text-anchor="middle">8</text>
-<text pointer-events="none" y="3" dy="0.71em" transform="translate(400, 205)" fill="rgb(0,0,0)" text-anchor="middle">9</text>
-</g>
-<g transform="translate(20, 5)">
-<path d="M0,99L44.44444444444444,56.92645075960516L88.88888888888889,53.535128658715905L133.33333333333331,91.94399959700664L177.77777777777777,136.8401247653964L222.22222222222223,146.94621373315692L266.66666666666663,112.9707749099463L311.11111111111114,66.15067006406053L355.55555555555554,49.53208766883091L400,78.39407573791217L400,199L355.55555555555554,199L311.11111111111114,199L266.66666666666663,199L222.22222222222223,199L177.77777777777777,199L133.33333333333331,199L88.88888888888889,199L44.44444444444444,199L0,199Z" fill="rgb(121,173,210)"/>
-</g>
-<g transform="translate(20, 5)">
-<path d="M0,99L44.44444444444444,56.92645075960516L88.88888888888889,53.535128658715905L133.33333333333331,91.94399959700664L177.77777777777777,136.8401247653964L222.22222222222223,146.94621373315692L266.66666666666663,112.9707749099463L311.11111111111114,66.15067006406053L355.55555555555554,49.53208766883091L400,78.39407573791217" stroke="rgb(31,119,180)" stroke-width="3"/>
-</g>
-</svg>
-=end

data/examples/line_and_step.rb

@@ -1,3 +1,7 @@
+# = Line and Step Chart
+# Line charts are often used to visualize time series data, encoding the value of a variable over time using position. Typically, linear interpolation is used between samples. However, in some cases, the data does not vary smoothly, but instead changes in response to discrete events.
+# Using the interpolate property, it is easy to change this behavior for lines and areas. Rubyvis also supports various nonlinear interpolation methods, including cardinal spline, Catmull-Rom spline, B-spline, and monotone cubic.
+
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 

data/examples/nested_grid.rb

@@ -0,0 +1,53 @@
+# = Nested grid
+# Two level nested grid.
+# The first is created at random with n rows and m columns
+# The second level is a 9x9 grid inside the cell of first level
+$:.unshift(File.dirname(__FILE__)+"/../lib")
+require 'rubyvis'
+
+
+w = 600
+h = 600
+cs=pv.Colors.category20()
+rows=2.0+rand(3)
+cols=2.0+rand(3)
+row_h=h/rows
+col_w=w/cols
+cel_h=row_h/3.0
+cel_w=col_w/3.0
+
+letters=%w{a b c d e f g h i j k}
+
+    
+vis = pv.Panel.new()
+    .width(w)
+    .height(h);
+    
+p1=vis.add(pv.Panel).data(letters[0,rows]).
+  top(lambda {index*(row_h)}).
+  height(row_h)
+
+p2=p1.add(pv.Panel).data(letters[0,cols]).
+  width(col_w).
+  left(lambda {index*(col_w)})
+
+p2.anchor("center").add(pv.Label).
+  text(lambda {|d,a,b| return "#{b}-#{a}"}).
+  font("bold large Arial")
+
+
+p2.add(pv.Bar).data([1,2,3,4,5,6,7,8,9]).
+  width(-3+cel_w).
+  height(-3+cel_h).
+  visible(lambda {|d| d!=5}).
+  fillStyle(lambda {|d| cs.scale(d)}).
+  top(lambda { (index / 3.0).floor*cel_h}).
+  left(lambda { (index % 3)*cel_w}).
+  anchor('center').
+    add(pv.Label).
+      visible(lambda {|a,b,c| a!=5}).
+      text(lambda {|a,b,c| "#{c}-#{b}-#{a}"})
+
+vis.render();
+
+puts vis.to_svg

data/examples/scatterplot.rb

@@ -1,3 +1,5 @@
+# = Scatterplot
+# Scatterplots can facilitate visual analysis along multiple dimensions, though care should be taken to avoid interference. In this example, we encode three dimensions: two are encoded using position, while the third is redundantly encoded as both area and color. 
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 data = pv.range(100).map {|x| 

data/examples/second.rb

@@ -1,3 +1,6 @@
+# = Inheritance and labels
+# Second example of Protovis "Getting Started section"
+# The rule’s label inherits the data and bottom property, causing it to appear on the rule and render the value (datum) as text. The bar’s label uses the bottom anchor to tweak positioning, so that the label is centered at the bottom of the bar. 
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 
@@ -5,10 +8,19 @@ vis = pv.Panel.new()
 .width(150)
 .height(200)
 
-vis.add(pv.Rule).data(pv.range(0, 2, 0.5)).bottom(lambda {|d| d * 80 + 0.5}).add(pv.Label).left(0)
+vis.add(pv.Rule).
+  data(pv.range(0, 2, 0.5)).
+  bottom(lambda {|d| d * 80 + 0.5}).
+  add(pv.Label).left(0)
 
 
-vis.add(pv.Bar).data([1, 1.2, 1.7, 1.5, 0.7]).width(20).height(lambda {|d|  d * 80}).bottom(0).left(lambda { self.index * 25 + 25}).anchor('bottom').add(pv.Label)
+vis.add(pv.Bar).
+  data([1, 1.2, 1.7, 1.5, 0.7]).
+  width(20).height(lambda {|d|  d * 80}).
+  bottom(0).
+  left(lambda { index * 25 + 25}).
+  anchor('bottom').
+    add(pv.Label)
 
 
 vis.render();

data/examples/third.rb

@@ -1,18 +1,21 @@
+# = Using parent
+# This example shows how to group bars on groups and use the parent property to identify and color them
 $:.unshift(File.dirname(__FILE__)+"/../lib")
 require 'rubyvis'
 
 vis = pv.Panel.new().width(200).height(150);
 
-bar= vis.add(pv.Panel).data(["a","b"]).add(pv.Bar)
+bar= vis.add(pv.Panel).data(["a","b","c","d"]).add(pv.Bar)
     .data([1,2])
     .width(20)
-    .height(60)
+    .height(lambda {60+parent.index*20+index*5})
     .bottom(0)
-    .left(lambda {|d,t| self.parent.index*60+self.index*30})
+    .left(lambda {|d,t| parent.index*60+index*25})
     
-    
- bar.anchor("bottom").add(pv.Label).text(lambda {|d,t| "#{t}-#{d}"})
- bar.anchor("top").add(pv.Label).text(lambda {"#{self.parent.index}-#{index}"})
+ bar.anchor("bottom").add(pv.Label).
+   text(lambda {|d,t| "#{t}-#{d}"})
+ bar.anchor("top").add(pv.Label).
+   text(lambda {"#{parent.index}-#{index}"})
     
     
 vis.render()

data/lib/rubyvis/color/color.rb

@@ -1,4 +1,5 @@
 module Rubyvis
+  
   def self.color(format)
     return format.rgb if format.respond_to? :rgb
     if (format =~/([a-z]+)\((.*)\)/)
@@ -31,7 +32,7 @@ module Rubyvis
     named = Rubyvis::Color.names[format.to_sym]
 
 
-    return pv.color(named) if (named)
+    return Rubyvis.color(named) if (named)
 
     # Hexadecimal colors: #rgb and #rrggbb. */
     if (format[0,1]== "#")
@@ -50,6 +51,7 @@ module Rubyvis
     # Otherwise, pass-through unsupported colors. */
     return Rubyvis::Color.new(format, 1);
   end
+  
   def self.rgb(r,g,b,a=1)
     Rubyvis::Color::Rgb.new(r,g,b,a)
   end
@@ -238,16 +240,16 @@ module Rubyvis
         self.class==v.class and @r==v.r and @b==v.b and @g=v.g and @a=v.a
       end
       def red(r1)
-        pv.rgb(r1,g,b,a)
+        Rubyvis.rgb(r1,g,b,a)
       end
       def green(g1)
-        pv.rgb(r,g1,b,a)
+        Rubyvis.rgb(r,g1,b,a)
       end
       def blue(b1)
-        pv.rgb(r,g,b1,a)
+        Rubyvis.rgb(r,g,b1,a)
       end
       def alpha(a1)
-        pv.rgb(r,g,b,a1)
+        Rubyvis.rgb(r,g,b,a1)
       end
       
       def rgb
@@ -256,7 +258,7 @@ module Rubyvis
       def darker(*arguments)
         k,dummy=arguments
         k = 0.7 ** ( arguments.size>0 ? k : 1)
-        return pv.rgb(
+        return Rubyvis.rgb(
           [0, (k * self.r).floor].max,
           [0, (k * self.g).floor].max,
           [0, (k * self.b).floor].max,