https://jasongrout.github.io/medium-archive/pelican/2024-02-13T16:02:00+00:00The Project Jupyter blog: news, releases, and community stories, archived from blog.jupyter.org.2023-09-24T03:34:00+00:002024-02-13T16:02:00+00:00Kyle Kelleytag:jasongrout.github.io,2023-09-24:/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/

<p>The Deno kernel is the freshest runtime for Jupyter</p>

<figure> <img alt="Visualizing Data via Deno, TypeScript, and VegaLite in JupyterLab" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/001-1_dioQ00ymlsIb1PPH_SBdjg.mp4" loading="lazy" data-body-image=""> <figcaption>Visualizing Data via Deno, TypeScript, and VegaLite in JupyterLab</figcaption> </figure> <p>I never expected <a href="https://deno.com/blog/v1.37">this</a>.</p> <blockquote> <p>using modern JS, TS, and npm in jupyter notebooks</p> <p>👇</p> <p><img src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/009-F6k0IzXbQAA1afQ.jpg" alt="" loading="lazy" data-body-image=""></p> <p>— <a href="https://x.com/deno_land">Deno (@deno_land)</a>, <a href="https://x.com/deno_land/status/1704978299615957200">September 21, 2023</a></p> </blockquote> <p><a href="https://deno.land">Deno</a> brings TypeScript, JavaScript, npm, and ES Modules to Jupyter with an easy to install kernel.</p> <blockquote> <p>The Deno Kernel is the first language runtime with a builtin jupyter kernel.</p> </blockquote> <p>There’s no better time to <a href="https://docs.deno.com/runtime/manual/getting_started/installation">get started with Deno</a> than now. Once deno is installed, run the <a href="https://docs.deno.com/runtime/manual/tools/jupyter">deno jupyter kernel installation</a>:</p> <div class="highlight"><pre><span></span><code>deno<span class="w"> </span>jupyter<span class="w"> </span>--unstable<span class="w"> </span>--install </code></pre></div> <figure> <img alt="Screen recording of clicking to select a kernel in VS Code. The users clicks “Select Kernel” in their notebook and a “Select Kernel” dialog comes up in the top middle. They click “Jupyter Kernel” and a listing of several Python kernels comes up. They select Deno and it drops them into the notebook. They type in console.log(“HOORAY!”) and run it. Out pops HOORAY!" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/002-1__KUkFmq1lO3H-tx4XJPNew.mp4" loading="lazy" data-body-image=""> <figcaption>Enabling Deno in VS Code</figcaption> </figure> <p>Since Deno supports web standards like <code>fetch</code> out of the box, loading data is simple and easy.</p> <figure> <img alt="That’s so fetch" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/003-1_ndB49_FE9Mq8-9YSNFLuWw.webp" loading="lazy" data-body-image=""> <figcaption>That’s so fetch</figcaption> </figure> <p>Not only is this a fast &amp; secure runtime, it’s fun. The timing is great too — <a href="https://platform.noteable.io/blog/dataframes-answers-for-solutions">DataFrames</a> aren’t just for <a href="https://dataframes.juliadata.org/stable/">Julia</a>, <a href="https://pandas.pydata.org/">Python</a>, <a href="https://cran.r-project.org/doc/manuals/r-release/R-intro.html#Data-frames">R</a>, and <a href="https://www.pola.rs/">Rust</a>. <a href="https://github.com/pola-rs/nodejs-polars">Polars provides DataFrames for JavaScript</a>.</p> <figure> <img alt="Manipulating DataFrames in JavaScript" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/004-1_m6aEUA3UifW-qNnPu8etPw.webp" loading="lazy" data-body-image=""> <figcaption>Manipulating DataFrames in JavaScript</figcaption> </figure> <p>What’s surprising me is how easily I can use <a href="https://github.com/rgbkrk/denotebooks/blob/main/10.2_Polar%20DataFrames.ipynb">D3 with DataFrames</a>.</p> <figure> <img alt="D3 and Polars playing well together in a notebook" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/005-1_BBPR6Od9aEwZanntimfkTA.webp" loading="lazy" data-body-image=""> <figcaption>D3 and Polars playing well together in a notebook</figcaption> </figure> <p>We can draw plots directly to a canvas.</p> <p><img src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/006-1_ZF4Q_S9RVCcf_fLe191kQw.webp" alt="" loading="lazy" data-body-image=""></p> <p>as well as use any library that emits SVG</p> <p><img src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/007-1_i8svfV32WtGxOxKCQv0-UA.webp" alt="" loading="lazy" data-body-image=""></p> <p>This enables a broad range of JavaScript developers and data professionals to iterate in a notebook <strong>writing documentation that runs</strong>.</p> <hr> <p>If you want to explore and visualize data with JavaScript/TypeScript, check out <a href="https://deno.com">Deno</a> and their <a href="https://docs.deno.com/runtime/manual/tools/jupyter">docs on getting started with Jupyter</a>.</p> <p>If you know Rust, come <a href="https://github.com/denoland/deno">hack on Deno</a>. If you don’t know rust, like me, come hack on Deno anyway. You can learn. The Deno team is a friendly group of people who believe deeply in the power of TypeScript, Jupyter, and standards.</p> <p>You can also contribute by <a href="https://github.com/denoland/deno/issues">filing bugs</a>, writing notebooks, and sharing the Deno kernel with others.</p> <figure> <img alt="Jupyter Denos" src="https://jasongrout.github.io/medium-archive/pelican/posts/2023/bringing-modern-javascript-to-the-jupyter-notebook/images/008-1_Lq2UGOudjDsPyzNFtHXr2Q.webp" loading="lazy" data-body-image=""> <figcaption>Jupyter Denos</figcaption> </figure> <p>Happy Notebooking!</p>