Skip to content

Commit

Permalink
added ijulia integration
Browse files Browse the repository at this point in the history
  • Loading branch information
fredo-dedup committed Mar 14, 2016
1 parent b42de82 commit b202dc0
Show file tree
Hide file tree
Showing 8 changed files with 571 additions and 76 deletions.
26 changes: 15 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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

Expand All @@ -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() +
Expand Down
2 changes: 1 addition & 1 deletion assets/vega-lite.html
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 3 additions & 1 deletion src/VegaLite.jl
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
13 changes: 1 addition & 12 deletions src/escher_integration.jl
Original file line number Diff line number Diff line change
@@ -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))
Expand Down
79 changes: 79 additions & 0 deletions src/ijulia_integration.jl
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit b202dc0

Please sign in to comment.