Rendering JavaScript in Juno/Atom PlotPane

General Usage
,
1

I’m trying to get Vega to plot in the Juno plotting pane. I can define the method signature correctly, in that calling a Vega.jl barplot() function will trigger the Media.render function, but if I substitute valid JavaScript/HTML into my call, I don’t get a plot. Any help would be appreciated

using Vega
using Media

#Register what a VegaVisualization is
media(Vega.VegaVisualization, Media.Graphical)

#Define how to render a VegaVisualization and where
function Media.render(pane::Atom.PlotPane, v::VegaVisualization)

    #This does work as-is when uncommented and barplot() called
        #rand = randstring()
        #a = "<h1>Hello, World!!!$rand</h1>"

    #This renders a Vega plot when in a plain text .html file (i.e. in Chrome)
    a = """
    <script src="https://johnmyleswhite.github.io/Vega.jl/javascripts/d3.min.js"></script>
    <script src="https://johnmyleswhite.github.io/Vega.jl/javascripts/topojson.js"></script>
    <script src="https://johnmyleswhite.github.io/Vega.jl/javascripts/d3.layout.cloud.js"></script>
    <script src="https://johnmyleswhite.github.io/Vega.jl/javascripts/vega.min.js"></script>

    <div id="test"></div>
    <script type="text/javascript">
       // parse a spec and create a visualization view
       function parse(spec) {
           vg.parse.spec(spec, function(chart) { chart({el:"#test"}).update(); });
           }
           parse({"name":"Vega Visualization","height":450,"padding":"auto","marks":[{"properties":{"enter":{"x":{"field":"x","scale":"x"},"y2":{"field":"y2","scale":"y"},"width":{"offset":-1,"scale":"x","band":true},"fill":{"field":"group","scale":"group"},"y":{"field":"y","scale":"y"}}},"from":{"data":"table_cgr7d"},"type":"rect"}],"axes":[{"layer":"front","properties":{"title":{"fontSize":{"value":14}}},"title":"x","grid":false,"type":"x","scale":"x"},{"layer":"front","properties":{"title":{"fontSize":{"value":14}}},"title":"y","grid":false,"type":"y","scale":"y"}],"data":[{"name":"table_cgr7d","values":[{"x2":0,"x":1,"y2":0,"group":1,"y":1},{"x2":0,"x":2,"y2":0,"group":1,"y":2},{"x2":0,"x":3,"y2":0,"group":1,"y":3},{"x2":0,"x":4,"y2":0,"group":1,"y":2},{"x2":0,"x":5,"y2":0,"group":1,"y":1}]}],"scales":[{"name":"x","range":"width","domain":{"sort":true,"data":"table_cgr7d","field":"x"},"type":"ordinal"},{"name":"y","range":"height","domain":{"data":"table_cgr7d","field":"y"},"type":"linear"},{"name":"group","range":["rgb(166,206,227)","rgb( 31,120,180)","rgb(178,223,138)","rgb( 51,160, 44)","rgb(251,154,153)","rgb(227, 26, 28)","rgb(253,191,111)","rgb(255,127,  0)","rgb(202,178,214)","rgb(106, 61,154)","rgb(255,255,153)","rgb(177, 89, 40)"],"domain":{"data":"table_cgr7d","field":"group"},"type":"ordinal"}],"width":450});
    </script>
      """
    
    Media.render(pane, Atom.div(Atom.d(), Atom.HTML(stringmime(MIME("text/html"), a))))
    
end

#Returns a VegaVisualization, will trigger "Hello, World" but not make a Vega plot
barplot(x = [1,2,3], y = [4,5,7])
1 Like
2

Atom won’t let you load JS directly like this, so you have to go through the Blink.jl apis for it to work. You could look at PlotlyJS for an example.

It may be worth checking out @shashi’s WebIO.jl, which is designed to make this a bit easier.

3

Thanks for confirming @MikeInnes. Unfortunately, WebIO.jl doesn’t have the Atom/Blink functionality yet, and it seems that Blink.jl doesn’t work with 0.6 yet. So I’m stuck for now on a couple of fronts.

4

I downgraded to 0.5 and have been able to render the plot in the PlotPane, but I also get a blank pop-up Blink window. How do I suppress the pop-up window and just keep the output in the PlotPane?

using Vega
using Media
using Blink

#Register what a VegaVisualization is
media(Vega.VegaVisualization, Media.Graphical)

#Define how to render a VegaVisualization and where
function Media.render(pane::Atom.PlotPane, v::VegaVisualization)

    w = Juno.Atom.blinkplot()
    load!(w, "https://johnmyleswhite.github.io/Vega.jl/javascripts/d3.min.js")
    load!(w, "https://johnmyleswhite.github.io/Vega.jl/javascripts/topojson.js")
    load!(w, "https://johnmyleswhite.github.io/Vega.jl/javascripts/d3.layout.cloud.js")
    load!(w, "https://johnmyleswhite.github.io/Vega.jl/javascripts/vega.min.js")
    a = """<div id="test"></div>
                  <script type="text/javascript">
                     // parse a spec and create a visualization view
                     function parse(spec) {
                         vg.parse.spec(spec, function(chart) { chart({el:"#test"}).update(); });
                         }
                         parse({"name":"Vega Visualization","height":450,"padding":"auto","marks":[{"properties":{"enter":{"x":{"field":"x","scale":"x"},"y2":{"field":"y2","scale":"y"},"width":{"offset":-1,"scale":"x","band":true},"fill":{"field":"group","scale":"group"},"y":{"field":"y","scale":"y"}}},"from":{"data":"table_cgr7d"},"type":"rect"}],"axes":[{"layer":"front","properties":{"title":{"fontSize":{"value":14}}},"title":"x","grid":false,"type":"x","scale":"x"},{"layer":"front","properties":{"title":{"fontSize":{"value":14}}},"title":"y","grid":false,"type":"y","scale":"y"}],"data":[{"name":"table_cgr7d","values":[{"x2":0,"x":1,"y2":0,"group":1,"y":1},{"x2":0,"x":2,"y2":0,"group":1,"y":2},{"x2":0,"x":3,"y2":0,"group":1,"y":3},{"x2":0,"x":4,"y2":0,"group":1,"y":2},{"x2":0,"x":5,"y2":0,"group":1,"y":1}]}],"scales":[{"name":"x","range":"width","domain":{"sort":true,"data":"table_cgr7d","field":"x"},"type":"ordinal"},{"name":"y","range":"height","domain":{"data":"table_cgr7d","field":"y"},"type":"linear"},{"name":"group","range":["rgb(166,206,227)","rgb( 31,120,180)","rgb(178,223,138)","rgb( 51,160, 44)","rgb(251,154,153)","rgb(227, 26, 28)","rgb(253,191,111)","rgb(255,127,  0)","rgb(202,178,214)","rgb(106, 61,154)","rgb(255,255,153)","rgb(177, 89, 40)"],"domain":{"data":"table_cgr7d","field":"group"},"type":"ordinal"}],"width":450});
                  </script>
                    """
                    
    body!(w, a)
    
end

#Returns a VegaVisualization, renders in PlotPane but also pops up window
barplot(x = [3,2,3], y = [4,5,7])

2786×1756 444 KB