Question: how to load other javascript libraries

[blackfist]

I'd like to use d3 to make a choropleth using http://datamaps.github.io/. In a basic html doc I would just script src="blahblahblah". How do I do that in Beaker? I tried putting that line in an HTML block before the javascript but I still can't use functions that are in the library.

[anglee]

Hi~ Sorry, it is not clear what you meant by an HTML block. If you just need d3, d3 is should already be loaded by Beaker by default. If you want other JS librarys you can add a HTML cell (a code cell with evaluator set to HTML, note this is a different cell, not the javascript code cell) and do <script src="http://some/js/library.js"></script> or use a helper function provided by beaker in a JavaScript cell: bkHelper.loadJS("http://some/js/library.js");

[scottdraves]

Hi Kevin that's a good question, thank you for asking. Unfortunately it's less than obvious how to do this right now (to put it mildly). Here's a notebook that does it: http://sharing.beakernotebook.com/gist/anonymous/7b70db4917f2f03c5fe2

In order for that to work, you need to download datamaps.all.js and copy it into the beaker application into the vendor directory. On Mac if you installed in the usual way that would be /Applications/Beaker.app/Contents/Resources/dist/src/main/web/vendor/

If you have your own web server you can use an absolute URL like the example does for topojson. Unfortunately the JS files that datamaps hosts through github are not executable. Beaker should make it easier to host random files like this, see https://github.com/twosigma/beaker-notebook/issues/430

Then start Beaker, load the notebook, and execute the HTML cell and then the Javascript cell. Executing the HTML creates the div that will contain the map. Executing the Javascript loads the libraries you need and then creates the interactive map in the container. The defined = undefined; line is a hack that tricks topojson and datamaps into installing themselves into the global namespace, instead of trying to define themselves as modules, which will not work since that would interfere with Beaker's use of the module system.

This is definitely harder than it should be and we will fix that in a future release, see https://github.com/twosigma/beaker-notebook/issues/429

In addition, we have the problem that after you make the map, if you share the notebook, the map is lost. This is also a bug, see https://github.com/twosigma/beaker-notebook/issues/407

[jkanche]

How do i achieve a similar thing if i have to host the js files myself ?

any idea how i do the same thing if i'm using a docker container ?

define = undefined; bkHelper.loadList(["http://d3js.org/topojson.v1.min.js", THIS PART ----> "/beaker/vendor/datamaps.all.js"], function() { var map = new Datamap({element: document.getElementById('container')}); });

updated i should have been more clear with my question.

[scottdraves]

use bkHelper.loadList, like this: http://sharing.beakernotebook.com/gist/anonymous/44e82316e785746165a6