added ijulia integration

README.md

@@ -7,18 +7,22 @@ _Julia bindings to Vega-Lite_
 |[![VegaLite](http://pkg.julialang.org/badges/VegaLite_0.4.svg)](http://pkg.julialang.org/?pkg=VegaLite&ver=0.4) | N/A | [![Build Status](https://travis-ci.org/fredo-dedup/VegaLite.jl.svg?branch=master)](https://travis-ci.org/fredo-dedup/VegaLite.jl) | [![Coverage Status](https://coveralls.io/repos/github/fredo-dedup/VegaLite.jl/badge.svg?branch=master)](https://coveralls.io/github/fredo-dedup/VegaLite.jl?branch=master) |
 
 
-This package provides access to the Vega-Lite high-level visualization grammar (http://vega.github.io/vega-lite/) from within Julia . Install with
-`Pkg.add("VegaLite")` (or `Pkg.clone("https://github.com/fredo-dedup/VegaLite.jl.git")`
-until it hasn't reached the official repository). You can use the integrated documentation (e.g. `? config_mark`) to get the full list of properties.
+This package provides access to the Vega-Lite high-level visualization grammar (http://vega.github.io/vega-lite/) from Julia.
 
-Vega-Lite is a simpler version of the Vega grammar allowing smaller and more expressive chart specifications. If you don't find this library powerful enough for your needs you can turn to Vega.jl (https://github.com/johnmyleswhite/Vega.jl) on which this project is largely based (thanks !).
+Vega-Lite is a simpler version of the Vega grammar allowing smaller and more expressive chart specifications. If you don't find this library powerful enough for your needs you can turn to Vega.jl (https://github.com/johnmyleswhite/Vega.jl) on which this project is partially based (thanks !).
 
-##TODO:
-- IJulia/Jupyter integration
-- More tests
-- Implement missing sub-specs : `transform`, `bin`,..
+Install with `Pkg.add("VegaLite")` (or `Pkg.clone("https://github.com/fredo-dedup/VegaLite.jl.git")`
+until it reaches the official repository). You can use the integrated documentation, e.g. `? config_mark` to get the full list of properties of the `config_mark` function.
 
-Any contribution, PR or issue, is welcome !
+The julia functions follow pretty closely the Vega-Lite JSON format: `data_values()` creates the `{"data": {values: { ...} }}` part of the spec file, etc.
+Only two functions are added:
+- `svg(Bool)` : sets the drawing mode of the plots, SVG if `true`, canvas if `false`. Default = `true`
+- `buttons(Bool)` : indicates if the plot should be accompanied with links 'Save as PNG', 'View source' and 'Open in Vega Editor'.
+
+Currently, VegaLite.jl works with IJulia/Jupyter, Escher and in the standard REPL (a browser window will open).
+
+
+All contributions, PR or issue, are welcome !
 
 
 ##Examples:
@@ -38,7 +42,7 @@ v = data_values(time=ts, res=ys) +    # add the data vectors & assign to symbols
 
 ![plot1](examples/png/vega (1).png)
 
-- Scatterplot from a DataFrame:
+- Scatterplot, using a DataFrame as the source:
 ```julia
 using RDatasets
 
@@ -52,7 +56,7 @@ data_values(mpg) +            # add values
 
 ![plot1](examples/png/vega (2).png)
 
-- A scatterplot, with colors and size settings:
+- A scatterplot, with colors and size settings for the plot:
 ```julia
 data_values(mpg) +
   mark_point() +

assets/vega-lite.html

@@ -27,7 +27,7 @@
           var embedSpec = {
             mode: "vega-lite",
             renderer: this.svg ? "svg" : "canvas",
-            actions: false, //this.actions,
+            actions: this.actions,
             spec: this.json
           }
           vg.embed(this, embedSpec, function(error, result) {

src/VegaLite.jl

@@ -8,6 +8,8 @@ module VegaLite
 
     export VegaLiteVis, scale, axis, legend
 
+    export svg, buttons
+
     export data_values
 
     export config_grid, config_facet_axis, config_facet_cell,
@@ -51,6 +53,6 @@ module VegaLite
     Pkg.installed("DataFrames") != nothing && include("dataframes_integration.jl")
 
     ### Integration with IJulia - Jupyter
-    # Pkg.installed("IJulia") != nothing && include("ijulia_integration.jl")
+    Pkg.installed("IJulia") != nothing && include("ijulia_integration.jl")
 
 end

src/escher_integration.jl

@@ -1,25 +1,14 @@
 import Escher: Elem, Tile, render
 import Base: convert
 
-ESCHER_SVG = true
-ESCHER_BUTTONS = true
-
-export svg, buttons
-
-svg() = ESCHER_SVG
-svg(b::Bool) = (global ESCHER_SVG ; ESCHER_SVG = b)
-buttons() = ESCHER_BUTTONS
-buttons(b::Bool) = (global ESCHER_BUTTONS ; ESCHER_BUTTONS = b)
-
-
 type VegaLiteTile <: Tile
   json::AbstractString
   svg::Bool
   actions::Bool
 end
 
 function VegaLiteTile(vis::AbstractString)
-  VegaLiteTile(vis, ESCHER_SVG, ESCHER_BUTTONS)
+  VegaLiteTile(vis, SVG, SAVE_BUTTONS)
 end
 
 convert(::Type{Tile}, v::VegaLiteVis) = VegaLiteTile(JSON.json(v.vis))

src/ijulia_integration.jl

@@ -0,0 +1,79 @@
+######################################################################
+#
+#     IJulia Integration
+#
+#     - consist in defining a writemime(::IO, m::MIME"text/html", v::VegaLiteVis)
+#       including scripts that load the required libraries (D3, vega, vega-lite)
+#     - Will it work with other html backends ?  probably not.
+#
+######################################################################
+
+import Base.writemime
+
+# FIXME : Apparently, loading local js files is not allowed by the browser
+#   => libraries are loaded externally in the `require.config`
+
+# function jslibpath(url...)
+#   libpath = Pkg.dir("VegaLite", "assets", "bower_components", url...)
+#   replace(libpath, "\\", "/")  # for windows...
+# end
+# // d3: "$(jslibpath("d3","d3.min.js"))",
+# // vega: "$(jslibpath("vega", "vega.js"))",
+# // vegalite: "$(jslibpath("vega-lite", "vega-lite.js"))",
+# // vegaembed: "$(jslibpath("vega-embed", "vega-embed.js"))"
+
+
+function writemime(io::IO, m::MIME"text/html", v::VegaLiteVis)
+  divid = "vl" * randstring(10) # generated id for this plot
+
+  fh = """
+  <div>
+    <div id="$divid"></div>
+
+    <meta charset="utf-8">
+
+    <script type="text/javascript">
+      require.config({
+        paths: {
+          d3:        "https://d3js.org/d3.v3.min",
+          vega:      "https://vega.github.io/vega/vega",
+          vegalite:  "https://vega.github.io/vega-lite/vega-lite",
+          vegaembed: "https://vega.github.io/vega-editor/vendor/vega-embed"
+        }
+      });
+
+      require(["d3"], function(d3){
+        window.d3 = d3;
+
+        require(["vega"], function(vg) {
+          window.vg = vg
+
+          require(["vegalite"], function(vgl) {
+
+            var embedSpec = {
+              mode: "vega-lite",
+              renderer: "$(SVG ? "svg" : "canvas")",
+              actions: $SAVE_BUTTONS,
+              spec: $(JSON.json(v.vis))
+            }
+
+            var vgSpec = vgl.compile(embedSpec.spec).spec;
+            vg.parse.spec(vgSpec, function(chart) { chart({el:\"#$divid\"}).update(); });
+
+          });
+        });
+      });
+
+    </script>
+
+  </div>
+  """
+  # FIXME : understand why vega-embed can't be loaded
+  #   SVG and SAVE_BUTTONS flags are ignored
+  # vg.embed("#$divid", embedSpec, function(error, result) {
+
+  write(io, fh)
+end
+
+
+export writemime