RJ Budzyński•8mo ago

Deno + Jupyter

I want to learn to use deno in jupyter notebooks, so I have a whole bunch of questions. Note that my experience with jupyter as such is not extensive. * how to use deno fmt on my notebook's cells? * how to make plots with plotly.js? or for that matter, any plotting lib that isn't @observablehq/plot or vega-lite-api? * how to make an animated plot with any plotting lib? * how to make an animated canvas2d drawing? and probably a few more. And let me observe that there is no "jupyter" tag available, so I'll just use "Unstable APIs".

19 Replies

Deno AI Helper•8mo ago

Great to hear you're interested in using Deno with Jupyter notebooks! 🦕 Let's go through your questions one by one based on what the documentation provides: 1. Using deno fmt on notebook cells: The documentation doesn't explicitly mention using deno fmt directly within Jupyter notebook cells. However, since Jupyter notebooks with Deno support JavaScript and TypeScript, you could format your code outside of the notebook using the deno fmt command in your terminal before pasting it into a cell. 2. Making plots with plotly.js or other plotting libraries: The documentation highlights that you can use npm modules directly in your notebook. This means you should be able to import plotly.js or any other JavaScript plotting library that is available as an npm module. You would import it as you normally would in a Deno script, using an import statement with the module's URL. 3. Creating animated plots with plotting libraries: While the documentation doesn't provide specific examples for creating animated plots, the process would be similar to using any plotting library in a JavaScript context. You would need to follow the library's documentation for creating animations and include the necessary JavaScript code in a notebook cell to execute it. 4. Making an animated canvas2d drawing: Again, the documentation doesn't provide specific details on creating canvas2d animations. However, since you have access to the full range of Web APIs in a Deno Jupyter notebook, you can use the canvas API as you would in a web browser. You would write the JavaScript code to manipulate the canvas element and create animations, then run that code in a notebook cell. For all of these tasks, you would use the Deno kernel in a Jupyter notebook to write and

Deno AI Helper•8mo ago

execute JavaScript or TypeScript code. The documentation mentions that you can provide rich output from your cells by returning an object that contains the Symbol.for("Jupyter.display") function, which could be useful for displaying plots or animations. Remember that deno jupyter is currently an unstable feature and requires the --unstable flag. You can start by running deno jupyter --unstable and follow the prompts to complete the installation. If you encounter any issues or have specific use cases, you might want to check out the examples provided in the documentation or seek help from the community, as the documentation may not cover every possible scenario in detail. As for the tags, "Unstable APIs" is indeed appropriate for questions related to the deno jupyter command at this time, given its unstable status. If you have more questions or need further clarification, feel free to ask! 🦕

Helpful Links: Deno 1.37: Modern JavaScript in Jupyter Notebooks Deno Docs Deno 1.38: HTML doc generator and HMR Blog | Deno

RJ BudzyńskiOP•8mo ago

I wouldn't say that those answers are helpful, at all

Leokuma•8mo ago

how to make plots with plotly.js?

Here's an example:

function plotly(data: object) {
  return {
    [Symbol.for("Jupyter.display")]() {
      return {
        "application/vnd.plotly.v1+json": data
      }
    }
  }
}

let myPlot = {
  data: [
    {
      x: [
        "giraffes",
        "orangutans",
        "monkeys"
      ],
      y: [
        20,
        14,
        23
      ],
      type: "bar"
    }
  ]
}

plotly(myPlot)

function plotly(data: object) {
  return {
    [Symbol.for("Jupyter.display")]() {
      return {
        "application/vnd.plotly.v1+json": data
      }
    }
  }
}

let myPlot = {
  data: [
    {
      x: [
        "giraffes",
        "orangutans",
        "monkeys"
      ],
      y: [
        20,
        14,
        23
      ],
      type: "bar"
    }
  ]
}

plotly(myPlot)

how to make an animated plot with any plotting lib?

If Jupyter doesn't support it natively, you could try to render it as an HTML page, with mimetype text/html, but I'm not sure if it works.

how to make an animated canvas2d drawing?

Same as the previous answer: try to output an HTML page.

how to use deno fmt on my notebook's cells?

I think it's currently not possible. You could open an issue about it.

RJ BudzyńskiOP•8mo ago

huh, did you actually verify if that (the plotly.js part) works? For me, it does nothing at all. Which is hardly surprising, since it doesn't invoke any function from the plotly.js lib. Thing is, every version of importing plotly.js I tried fails. Whether via npm: specifier, or from esm.sh. Don't know about other options.

RJ BudzyńskiOP•8mo ago

Got a really bizarre error in my jupyter notebook:

RJ BudzyńskiOP•8mo ago

no backtrace, no nothing. no log messages from jupyter. Of course there's no in operator or url in my cell's code. Totally analogous code in another cell runs fine. Found the bug in my code - not that it makes the message any less bizarre.

Leokuma•8mo ago

Yes I tested it in VSCode. Jupyter has builtin support for Plotly, so you don't need to import it I havent tested in JupyterLab though

RJ BudzyńskiOP•8mo ago

I'm getting pretty nice plots from vega-lite-api, but it takes too much effort, because the documentation is not good at all. I found that plotly support in jupyter lab is provided by an extension, which isn't available by default. I installed it, but your example still does nothing. .. and yes the plot does render in vscode.

RJ BudzyńskiOP•8mo ago

@Leokuma and the reason plotly plots render in vscode is this:

RJ BudzyńskiOP•8mo ago

I believe I never installed this extension in my vscode manually, seems like code pulled it in automatically on detecting I had jupyter on my system? dunno how this works @Leokuma | how to use deno fmt on my notebook's cells? I think it's currently not possible. You could open an issue about it. Deno lang server for vscode can work on notebooks, but it seems to be treating each cell as a separate module, so it generates loads of spurious warnings about undefined & unused symbols. Formatting seems to work okay though. Okay so plotly itself is very nice, but used with deno/jupyter has some shortcomings. * works in vscode, but not in jupyter lab or notebook * crashes with too much data (like 3e5 points in a scatter plot) But overall I like the api better than vega-lite-api; chaining all those method calls gets more tedious than just defining the plot via building an object in JS. Moreover, the docs for vega-lite-api def. suck worse than those for plotly.

Leokuma•8mo ago

Sorry for the late response. I'm off on weekends :fast_deno: My example actually doesn't work in Jupyter Lab. IDK why

RJ BudzyńskiOP•8mo ago

Right, I can't figure out what it would take to make it work. Info on the web is pretty confusing.

Leokuma•8mo ago

Maybe we need to have Node installed

RJ BudzyńskiOP•8mo ago

I do have Node installed.

Leokuma•8mo ago

Neither do I

RJ BudzyńskiOP•8mo ago

I do, and it makes no difference

Leokuma•8mo ago

😞

RJ BudzyńskiOP•8mo ago

OTOH Polars dataframes don't display in vscode, while they do in jupyterlab 😬 best I can do is console.log(df.toString()) Still trying different options for plotting in deno/jupyter. I pretty much gave up on plotly, now testing @observablehq/plot. All is pretty much nice as long as I don't throw too many datapoints at it. At 300k + points it basically no longer works. Sounds like a lot of points, but python/matplotlib handles that without a wink. Right now the deno kernel is hanging on this task for several minutes, funny that cpu usage is pretty much nil. Not running out of ram either, just stuck in some way. About 200k records seems to be the limit for some reason.