Skip to content

Commit

Permalink
Add bokeh to spark-notebook. Had to change responses to html instead …
Browse files Browse the repository at this point in the history 
…of xhtml, because bokeh contains some non-xhtml code
  • Loading branch information
@bbossy
bbossy committed Nov 6, 2014
1 parent dd7a427 commit 8b6debd
Show file tree
Hide file tree
Showing 4 changed files with 76,920 additions and 1 deletion.

7 comments on commit 8b6debd

@andypetrella
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea! I didn't knew about bokeh.
It sounds like by writing the right Codec on the server side to publish data to the Browser world with the right shape, the notebook would leverage great visu capabilities!

Would you mind creating a PR out of this fork? The changes are simple and clean but you did them.
And that's cool!

cheers

@bbossy
Copy link
Owner Author

@bbossy bbossy commented on 8b6debd Nov 9, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Glad you like it!

I think it's not quite ready for prime time yet. Unfortunately I am quite busy at the moment, but I will keep working on it.

I chose bokeh, because there is also an API in scala for it (and I find it less awkward to use then JFreeChart..): [https://github.com/bokeh/bokeh-scala]

The whole thing is a bit of a hack right now. I prepared this for demo. The cool thing is, it allows users to create plots without any knowledge of Javascript, as bokeh by default creates HTML documents. I added bokeh.js (tried to get it working in XHTML, but the minification step of the build removes the tag, AFAIK) and bokeh.css (changed the z-index of the gmap plot styles, such that they are showing in the cells)

resolveAndAddToJars("io.continuum.bokeh","bokeh_2.10","0.2").foreach(println _)
:cp // copy-paste list from above. Would be great if there was a shortcut for adding dependencies to the notebook's classpath, but I think you already hinted at that

import io.continuum.bokeh._

val xs = Seq.fill(10)(scala.util.Random.nextDouble())
val ys = Seq.fill(10)(scala.util.Random.nextDouble())

val xSym = Symbol("lon") // One can also use 'lon , but the editor (??) chokes on it and highlighting is broken after
val ySym = Symbol("lat")

val source = new ColumnDataSource()
  .addColumn(xSym, xs)
  .addColumn(ySym, ys)

val xRange = new Range1d()
val yRange = new Range1d()

val mapPlot = new GMapPlot().title("GMap example")
  .x_range(xRange)
  .y_range(yRange)
  .map_options(new MapOptions().lat(0.0).lng(0.0).zoom(7).map_type(MapType.Roadmap)) 

val glyphs = new Glyph()
  .data_source(source)
  .glyph(new Circle().x(xSym).y(ySym).radius(0.01))

val xAxis = new LinearAxis().plot(mapPlot)
val yAxis = new LinearAxis().plot(mapPlot)

val panTool = new PanTool().plot(mapPlot)
val zoomTool = new WheelZoomTool().plot(mapPlot)
val resizeTool = new ResizeTool().plot(mapPlot)

mapPlot.below <<= (xAxis :: _)
mapPlot.left <<= (yAxis :: _)

mapPlot.renderers(glyphs :: Nil)
mapPlot.tools(panTool :: zoomTool :: resizeTool :: Nil)

// hack to get just the plot element of the DOM  
val writer = new HTMLFileWriter(List(new PlotContext().children(mapPlot :: Nil)), None)
writer.renderPlots(writer.specs())(0)

^^ puts some dots in the ocean (there's nothing interesting at 0/0..)

What I plan to do:

  • Have a look bokeh-scala and see if there are things missing that are present in bokeh-0.6.1
  • Check whether my changes to bokehjs can be integrated (would be nice not to have to entertain a fork)
  • Integrate bokeh more cleanly (I think I broke some CSS here and there). Maybe using require.js?? No clue actually..

Also, for common plots (Histogram, Scatter, ...) a factory method would be helpful (think python's histogram()), as even creating a simple scatter plot is still quite tedious.

The changes you made the past few days look interesting. WIll have to try it out.

Cheers

@andypetrella
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your ideas are pretty coll, I must say.

I had a look at bokeh-scala, it has a very good quality (code wise). The interesting thing being that it's maintained by the bokeh team itself!

Looking at the code, in orther to have reactive pattern (see JSBus) with the current architecture, some tweaks will have to be done: bokeh uses play-json, the notebook json4s.
Note: in the core lib there are some macro magics, where play json is used within strings... (hopefully they are macro so it'll complain at compile time, however it's always hard to debug macro :-D)/

I already thought migrating to play-json, but didn't had the real incentive doing it. It might be worth considering it.

For the css, yeah, that happened several time, we can manage that.

For the inclusion of the bokehjs, I see that bokeh-scala is itself wrapping a bokeh-js version, so it would be more sustainable (I guess) to stick this one.

And finally, require.js. It would be great to use it, bu,sadly, the initial architecture is using curljs with which I stick for the moment. But again, I wouldn't mind change that (curljs is a bit tedious to use -- lack of doc f.i.).

I'd be glad if you'd consider some help from me, only even if it's discussion on "how tos".

Cheers

@uberwach
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, I found you guys, because I had similar ideas as you do and integrated bokeh into the spark-notebook. I used parts of bbossys solution 👍

@andypetrella
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@uberwach cool ! Did you already had a chance to start a branch on that? I'd love to start one actually, based on the awesome work @bbossy already provided here!

@uberwach
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andypetrella Well, look in my repository on the forked project. Actually, I merged the changes of @bbossy in there. I still have to cleanup some stuff (did it as a project in a hackathon, but I am definitely interested to work further on it).

@andypetrella
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool!

Please sign in to comment.