[ANN] mdarray-Sol Version 0.1.0

[Rodrigo Botafogo]

Announcement

MDArray-sol version 0.1.0 has been release. MDArray-sol, Sol for short, is a front-end platform for desktop application development based on the proprietary (yet free for open source) jxBrowser - https://www.teamdev.com/jxbrowser, a Chromium-based browser.

In a sense, Sol is similar to Opal in that it allows Ruby developers to code for the browser; however, differently from Opal, Sol does not compile its code to javascript; it implements a DSL that interfaces with javascript through jxBrowser java interface, more in line with what is provided by the javascript node-webkit, now called NW.js. To the Ruby developer, no javascript is ever required. Also, since there is no compilation there is no need to 'send' data from Ruby to Javascript. Data in Ruby, for instance, in a Ruby array or hash, is made available directly to the browser.

Since Sol is just a normal Ruby library, it can be used inside IRB or PRY, without the need of installing a web server to serve javascript. Once mdarray-sol is required, an empty browser window is automatically opened and any command in the command line that adds or removes data from the browser will do so interactively, for instance just copy and paste the following lines into IRB or PRY to get a simple, interactive bar chart:

• body = $d3.select("body")
• dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ]
• body.selectAll('div').data(dataset).enter(nil).append('div').style('display', 'inline-block').style('width', '20px').style('background-color', 'teal').style('margin-right', '2px').style('height') { |d, i| (d * 5).to_s + "px" }.on('mouseout') { $d3.select(@this).style('background-color', 'teal') }.on('mouseover') { $d3.select(@this).style('background-color', 'black') }

This is an initial version that focus on the integration of Ruby with the D3.js library. In order to test this integration we have implemented many of the examples of the excellent and highly recommended book by Scott Murray, "Interactive Data Visualization for the Web". As can be seen in the examples directory and on the MDArray-sol wiki at https://github.com/rbotafogo/mdarray-sol/wiki, quite complex behaviour is already possible in this version.

This version was tested on Cygwin, Windows and Linux64. It has not yet been tested on Linux32 nor Mac. Since Sol requires jxBrowser and this is a large download, the browser is not included directly into the RubyGem. However, requiring Sol will check for the appropriate version of the browser and automatically download it.

Bellow is an example of the integration of D3.js with Ruby that plots the US States map (following Scott Murray example):

require 'json'
require 'mdarray-sol'

class Map

  attr_reader :path
  attr_reader :svg
  attr_reader :us_states

  #------------------------------------------------------------------------------------
  # @param width [Number]: width of the chart
  # @param height [Number]: height of the chart
  #------------------------------------------------------------------------------------

  def initialize(width, height)

    @width = width
    @height = height

    # Create svg for the map
    @svg = $d3.select("body")
              .append("svg")
              .attr("width", @width)
              .attr("height", @height)

  end

  #------------------------------------------------------------------------------------
  # Parses a file in GeoJson format and saves it as @us_states
  # @param filename [String] the name of the file to parse
  #------------------------------------------------------------------------------------

  def json(filename)

    dir = File.expand_path(File.dirname(__FILE__))
    file_name = dir + "/#{filename}"
    file = File.read(file_name)

    # parse the json file
    @us_states = JSON.parse(file)

  end

  #------------------------------------------------------------------------------------
  #
  #------------------------------------------------------------------------------------

  def plot(projection)

    proj = projection
             .translate([@width/2, @height/2])
             .scale(500)

    @path = $d3.geo.path[].projection(proj);    

    @svg.selectAll("path")
        .data(@us_states["features"])
        .enter[]
        .append("path")
        .attr("d", @path)
        .style("fill", "steelblue")

  end

end

map = Map.new(500, 500)
map.json("us-states.json")
map.plot($d3.geo.albersUsa[])

And this is the final result... 

--

Rodrigo Botafogo