Skip to content

Instantly share code, notes, and snippets.

@aaronblondeau

aaronblondeau/DenoDemo.ipynb

Created November 8, 2024 16:56
Show Gist options
  • Save aaronblondeau/02f94256aab61f409d1f820cc80ea571 to your computer and use it in GitHub Desktop.
Save aaronblondeau/02f94256aab61f409d1f820cc80ea571 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
DenoDemo.ipynb
{
"cells": [
{
"cell_type": "markdown",
"id": "5a3a3e8b-b14d-48f7-9dfc-192df5da60f5",
"metadata": {},
"source": [
"# Deno 2 + Jupyter Demo"
]
},
{
"cell_type": "markdown",
"id": "c8daaf0b-b428-4f31-8e53-fa6076da3d8c",
"metadata": {},
"source": [
"## Create a chart with observable plot\n",
"\n",
"https://observablehq.com/plot/"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "62f2b479-ff39-4123-984f-861ea0119ff6",
"metadata": {},
"outputs": [],
"source": [
"import * as Plot from \"npm:@observablehq/plot\""
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "87882fe4-54a2-4b71-9a5b-6036582b79e1",
"metadata": {},
"outputs": [],
"source": [
"import * as d3 from \"npm:d3\""
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "7b1633ae-7604-4169-8fdc-9d18eb481949",
"metadata": {},
"outputs": [],
"source": [
"// Borrowed from https://jsr.io/@ry/jupyter-helper/0.2.0/mod.ts#L6\n",
"\n",
"// Another option? https://blog.logrocket.com/deno-jupyter-notebook-data-dashboard/\n",
"\n",
"import { DOMParser } from \"npm:[email protected]\";\n",
"\n",
"const document: any = new DOMParser().parseFromString(\n",
" `<!DOCTYPE html><html lang=\"en\"></html>`,\n",
" \"text/html\",\n",
");"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "26cf1e00-0ff3-4593-a4dc-1a45ab855f55",
"metadata": {},
"outputs": [
{
"data": {
"image/svg+xml": [
"<svg viewBox=\"0 0 640 400\" height=\"400\" width=\"640\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui, sans-serif\" fill=\"currentColor\" class=\"plot-d6a7b5\"><style>:where(.plot-d6a7b5) {\n",
" --plot-background: white;\n",
" display: block;\n",
" height: auto;\n",
" height: intrinsic;\n",
" max-width: 100%;\n",
"}\n",
":where(.plot-d6a7b5 text),\n",
":where(.plot-d6a7b5 tspan) {\n",
" white-space: pre;\n",
"}</style><g stroke=\"currentColor\" fill=\"none\" aria-hidden=\"true\" aria-label=\"y-axis tick\"><path d=\"M0,0L-6,0\" transform=\"translate(40,370)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,325.1282051282051)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,280.2564102564103)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,235.3846153846154)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,190.51282051282053)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,145.6410256410256)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,100.76923076923076)\" /><path d=\"M0,0L-6,0\" transform=\"translate(40,55.897435897435884)\" /></g><g transform=\"translate(-9,0)\" font-variant=\"tabular-nums\" text-anchor=\"end\" aria-label=\"y-axis tick label\"><text transform=\"translate(40,370)\" y=\"0.32em\">0</text><text transform=\"translate(40,325.1282051282051)\" y=\"0.32em\">100</text><text transform=\"translate(40,280.2564102564103)\" y=\"0.32em\">200</text><text transform=\"translate(40,235.3846153846154)\" y=\"0.32em\">300</text><text transform=\"translate(40,190.51282051282053)\" y=\"0.32em\">400</text><text transform=\"translate(40,145.6410256410256)\" y=\"0.32em\">500</text><text transform=\"translate(40,100.76923076923076)\" y=\"0.32em\">600</text><text transform=\"translate(40,55.897435897435884)\" y=\"0.32em\">700</text></g><g transform=\"translate(-37,-17)\" text-anchor=\"start\" aria-label=\"y-axis label\"><text transform=\"translate(40,20)\" y=\"0.71em\">↑ Frequency</text></g><g stroke=\"currentColor\" fill=\"none\" aria-hidden=\"true\" aria-label=\"x-axis tick\"><path d=\"M0,0L0,6\" transform=\"translate(83.5,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(156,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(228.5,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(301,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(373.5,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(446,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(518.5,370)\" /><path d=\"M0,0L0,6\" transform=\"translate(591,370)\" /></g><g transform=\"translate(0,9)\" font-variant=\"tabular-nums\" aria-label=\"x-axis tick label\"><text transform=\"translate(83.5,370)\" y=\"0.71em\">−3</text><text transform=\"translate(156,370)\" y=\"0.71em\">−2</text><text transform=\"translate(228.5,370)\" y=\"0.71em\">−1</text><text transform=\"translate(301,370)\" y=\"0.71em\">0</text><text transform=\"translate(373.5,370)\" y=\"0.71em\">1</text><text transform=\"translate(446,370)\" y=\"0.71em\">2</text><text transform=\"translate(518.5,370)\" y=\"0.71em\">3</text><text transform=\"translate(591,370)\" y=\"0.71em\">4</text></g><g fill=\"blue\" aria-label=\"rect\"><rect height=\"0.44871794871789916\" width=\"13.500000000000014\" y=\"369.5512820512821\" x=\"40.5\" /><rect height=\"1.794871794871824\" width=\"13.499999999999986\" y=\"368.2051282051282\" x=\"55.000000000000014\" /><rect height=\"3.141025641025635\" width=\"13.5\" y=\"366.85897435897436\" x=\"69.5\" /><rect height=\"3.5897435897435344\" width=\"13.500000000000028\" y=\"366.41025641025647\" x=\"84\" /><rect height=\"8.076923076923094\" width=\"13.499999999999972\" y=\"361.9230769230769\" x=\"98.50000000000003\" /><rect height=\"11.666666666666629\" width=\"13.500000000000014\" y=\"358.33333333333337\" x=\"113\" /><rect height=\"25.576923076923094\" width=\"13.499999999999986\" y=\"344.4230769230769\" x=\"127.50000000000001\" /><rect height=\"39.4871794871795\" width=\"13.5\" y=\"330.5128205128205\" x=\"142\" /><rect height=\"66.41025641025641\" width=\"13.5\" y=\"303.5897435897436\" x=\"156.5\" /><rect height=\"84.35897435897436\" width=\"13.5\" y=\"285.64102564102564\" x=\"171\" /><rect height=\"109.93589743589746\" width=\"13.5\" y=\"260.06410256410254\" x=\"185.5\" /><rect height=\"160.6410256410256\" width=\"13.500000000000028\" y=\"209.3589743589744\" x=\"200\" /><rect height=\"201.9230769230769\" width=\"13.499999999999972\" y=\"168.0769230769231\" x=\"214.50000000000003\" /><rect height=\"246.79487179487182\" width=\"13.5\" y=\"123.20512820512819\" x=\"229\" /><rect height=\"277.7564102564102\" width=\"13.5\" y=\"92.24358974358977\" x=\"243.5\" /><rect height=\"310.5128205128205\" width=\"13.5\" y=\"59.4871794871795\" x=\"258\" /><rect height=\"335.19230769230774\" width=\"13.5\" y=\"34.80769230769229\" x=\"272.5\" /><rect height=\"350\" width=\"13.5\" y=\"20\" x=\"287\" /><rect height=\"346.85897435897436\" width=\"13.5\" y=\"23.141025641025628\" x=\"301.5\" /><rect height=\"335.19230769230774\" width=\"13.5\" y=\"34.80769230769229\" x=\"316\" /><rect height=\"324.87179487179486\" width=\"13.5\" y=\"45.12820512820512\" x=\"330.5\" /><rect height=\"302.8846153846154\" width=\"13.5\" y=\"67.1153846153846\" x=\"345\" /><rect height=\"229.74358974358975\" width=\"13.5\" y=\"140.25641025641025\" x=\"359.5\" /><rect height=\"199.67948717948718\" width=\"13.5\" y=\"170.32051282051282\" x=\"374\" /><rect height=\"147.62820512820517\" width=\"13.5\" y=\"222.37179487179483\" x=\"388.5\" /><rect height=\"113.97435897435895\" width=\"13.5\" y=\"256.02564102564105\" x=\"403\" /><rect height=\"80.32051282051282\" width=\"13.5\" y=\"289.6794871794872\" x=\"417.5\" /><rect height=\"54.74358974358972\" width=\"13.5\" y=\"315.2564102564103\" x=\"432\" /><rect height=\"45.76923076923072\" width=\"13.500000000000057\" y=\"324.2307692307693\" x=\"446.5\" /><rect height=\"26.47435897435895\" width=\"13.499999999999943\" y=\"343.52564102564105\" x=\"461.00000000000006\" /><rect height=\"17.948717948717956\" width=\"13.5\" y=\"352.05128205128204\" x=\"475.5\" /><rect height=\"10.769230769230717\" width=\"13.5\" y=\"359.2307692307693\" x=\"490\" /><rect height=\"6.28205128205127\" width=\"13.5\" y=\"363.71794871794873\" x=\"504.5\" /><rect height=\"4.038461538461547\" width=\"13.5\" y=\"365.96153846153845\" x=\"519\" /><rect height=\"0.897435897435912\" width=\"13.5\" y=\"369.1025641025641\" x=\"533.5\" /><rect height=\"1.3461538461538112\" width=\"13.5\" y=\"368.6538461538462\" x=\"562.5\" /><rect height=\"0.44871794871789916\" width=\"13.5\" y=\"369.5512820512821\" x=\"606\" /></g></svg>"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"Plot.rectY({length: 10000}, Plot.binX({y: \"count\"}, {x: d3.randomNormal(), fill: \"blue\"})).plot({ document })"
]
},
{
"cell_type": "markdown",
"id": "fd9d0b73-8fff-43c1-bed7-37b669df1f6c",
"metadata": {},
"source": [
"## Use a Polars DataFrame"
]
},
{
"cell_type": "code",
"execution_count": 5,
"id": "7fa4515e-f131-498d-a3ee-908c93892e52",
"metadata": {},
"outputs": [],
"source": [
"import pl from \"npm:[email protected]\";"
]
},
{
"cell_type": "code",
"execution_count": 6,
"id": "3ee7f72e-bd22-40d1-b066-bfb31ec0721a",
"metadata": {},
"outputs": [],
"source": [
"const df = pl.DataFrame(\n",
"{\n",
" A: [1, 2, 3, 4, 5],\n",
" fruits: [\"banana\", \"banana\", \"apple\", \"apple\", \"banana\"],\n",
" B: [5, 4, 3, 2, 1],\n",
" cars: [\"beetle\", \"audi\", \"beetle\", \"beetle\", \"beetle\"],\n",
" }\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 7,
"id": "302854c2-6368-4762-9732-ec826f4fffc0",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.dataresource+json": {
"bytes": null,
"data": [
{
"A": 1,
"B": 5,
"cars": "beetle",
"fruits": "banana"
},
{
"A": 2,
"B": 4,
"cars": "audi",
"fruits": "banana"
},
{
"A": 3,
"B": 3,
"cars": "beetle",
"fruits": "apple"
},
{
"A": 4,
"B": 2,
"cars": "beetle",
"fruits": "apple"
},
{
"A": 5,
"B": 1,
"cars": "beetle",
"fruits": "banana"
}
],
"description": null,
"dialect": null,
"encoding": null,
"format": null,
"hash": null,
"homepage": null,
"licenses": null,
"mediatype": null,
"path": null,
"schema": {
"fields": [
{
"constraints": null,
"description": null,
"example": null,
"format": null,
"name": "A",
"rdfType": null,
"title": null,
"type": "number"
},
{
"constraints": null,
"description": null,
"example": null,
"format": null,
"name": "fruits",
"rdfType": null,
"title": null,
"type": "string"
},
{
"constraints": null,
"description": null,
"example": null,
"format": null,
"name": "B",
"rdfType": null,
"title": null,
"type": "number"
},
{
"constraints": null,
"description": null,
"example": null,
"format": null,
"name": "cars",
"rdfType": null,
"title": null,
"type": "string"
}
],
"foreignKeys": null,
"missingValues": null,
"primaryKey": null
},
"sources": null,
"title": null
},
"text/html": [
"<table><thead><tr><th>A</th><th>fruits</th><th>B</th><th>cars</th></tr></thead><tbody><tr><td>1</td><td>banana</td><td>5</td><td>beetle</td></tr><tr><td>2</td><td>banana</td><td>4</td><td>audi</td></tr><tr><td>3</td><td>apple</td><td>3</td><td>beetle</td></tr><tr><td>4</td><td>apple</td><td>2</td><td>beetle</td></tr><tr><td>5</td><td>banana</td><td>1</td><td>beetle</td></tr></tbody></table>"
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"df"
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "a04e4f7b-1487-4d86-9ef8-5a286e71379c",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"\u001b[33m3\u001b[39m"
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"df['A'].mean()"
]
},
{
"cell_type": "markdown",
"id": "3cbd5e74-f21c-4778-ad9b-b261ea01f175",
"metadata": {},
"source": [
"## Render HTML Output"
]
},
{
"cell_type": "code",
"execution_count": 9,
"id": "2669a807-76b2-47a1-a671-a0f744547130",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"// From : https://docs.deno.com/runtime/reference/cli/jupyter/#examples\n",
"Deno.jupyter.html`<ul><li>One</li><li>Two</li><li>Three</li></ul>`;"
]
},
{
"cell_type": "markdown",
"id": "94278fef-106f-4818-95ca-eb042070227e",
"metadata": {},
"source": [
"## Render SVG Output"
]
},
{
"cell_type": "code",
"execution_count": 10,
"id": "7b164ab8-6cd2-4331-a769-d47d9e73c368",
"metadata": {},
"outputs": [
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n",
" <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z\" />\n",
"</svg>\n"
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"// From HeroIcons : https://heroicons.com/\n",
"Deno.jupyter.svg`<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n",
" <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z\" />\n",
"</svg>\n",
"`;"
]
},
{
"cell_type": "markdown",
"id": "c5edb011-5295-4577-9b88-ba0ce5cd8f3e",
"metadata": {},
"source": [
"## Mermaid Chart?"
]
},
{
"cell_type": "code",
"execution_count": 11,
"id": "6769125f-dc6f-496f-bbd3-35e023eb1058",
"metadata": {},
"outputs": [
{
"ename": "TypeError",
"evalue": "[ERR_MODULE_NOT_FOUND] Cannot find module 'file:///Users/aaronblondeau/Library/Caches/deno/npm/registry.npmjs.org/khroma/2.1.0/dist/channels/utils/index.js' imported from 'file:///Users/aaronblondeau/Library/Caches/deno/npm/registry.npmjs.org/khroma/2.1.0/dist/channels//index.js'",
"output_type": "error",
"traceback": [
"Stack trace:",
"TypeError: [ERR_MODULE_NOT_FOUND] Cannot find module 'file:///Users/aaronblondeau/Library/Caches/deno/npm/registry.npmjs.org/khroma/2.1.0/dist/channels/utils/index.js' imported from 'file:///Users/aaronblondeau/Library/Caches/deno/npm/registry.npmjs.org/khroma/2.1.0/dist/channels//index.js'",
" at async <anonymous>:1:53"
]
}
],
"source": [
"import mermaid from 'npm:mermaid'"
]
},
{
"cell_type": "markdown",
"id": "8b33d244-55bc-4646-9c36-c8f70c3afc9f",
"metadata": {},
"source": [
"**:-( Deno strikes again : https://github.com/denoland/deno/issues/9427**"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "269fa154-252e-44a5-83f2-adbbb9ecfd38",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Deno",
"language": "typescript",
"name": "deno"
},
"language_info": {
"codemirror_mode": "typescript",
"file_extension": ".ts",
"mimetype": "text/x.typescript",
"name": "typescript",
"nbconvert_exporter": "script",
"pygments_lexer": "typescript",
"version": "5.6.2"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment