clojupyter icon indicating copy to clipboard operation
clojupyter copied to clipboard

maybe use requirejs for JS loading

Open behrica opened this issue 1 year ago • 1 comments

I played with this a little while ago. Instead of relying on add-javascript (which, if I understand it correctly, has to be the last form executed in a Jupyter cell for it to work), I wrote some code that wraps every Vega object with a div with a UUID and RequireJS call that pulls in the vega javascript.

The "magic" happens in this one string:

(def require-string

  "

<div id='uuid-%s'>

<script>

requirejs.config({

  baseUrl: 'https://cdn.jsdelivr.net/npm/',

  paths: {

    'vega-embed':  'vega-embed@3?noext',

    'vega-lib': 'vega-lib?noext',

    'vega-lite': 'vega-lite@2?noext',

    'vega': 'vega@3?noext'

  }

});



require(['vega-embed'], function(vegaEmbed) {

  let spec = %s;

  vegaEmbed('#uuid-%s', spec, {defaultStyle:true}).catch(console.warn);

  }, function(err) {

  console.log('Failed to load');

});

</script>

</div>

  ")

The rest of the code is just some helper functions and a defrecord to define the Vega type. I've pushed the code up to a repo in case the proof of concept is helpful.

https://github.com/jtcbrule/lyrae

Originally posted by @jtcbrule in #75

behrica avatar Feb 09 '25 23:02 behrica

or try clojupyter.javascript.alpha

behrica avatar Feb 09 '25 23:02 behrica