Skip to content

Instantly share code, notes, and snippets.

@bvarberg

bvarberg/deno_dot.ipynb

Created October 16, 2024 03:21
Show Gist options
  • Save bvarberg/f5adb11efd09848f0edec44df947cf0f to your computer and use it in GitHub Desktop.
Save bvarberg/f5adb11efd09848f0edec44df947cf0f to your computer and use it in GitHub Desktop.
Download ZIP
Render dot/graphviz within a Deno Jupyter notebook
Display the source blob
Display the rendered blob
Raw
deno_dot.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [
{
"data": {
"image/svg+xml": [
"<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n",
"<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
"<!-- Generated by graphviz version 12.1.1 (20240910.0053)\n",
" -->\n",
"<!-- Pages: 1 -->\n",
"<svg width=\"350pt\" height=\"264pt\"\n",
" viewBox=\"0.00 0.00 350.00 264.00\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
"<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 260)\">\n",
"<g id=\"a_graph0\"><a xlink:title=\"Max heap example\">\n",
"<polygon fill=\"white\" stroke=\"none\" points=\"-4,4 -4,-260 346,-260 346,4 -4,4\"/>\n",
"</a>\n",
"</g>\n",
"<!-- 23 -->\n",
"<g id=\"node1\" class=\"node\">\n",
"<title>23</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"180,-219.5 180,-255.5 234,-255.5 234,-219.5 180,-219.5\"/>\n",
"<text text-anchor=\"middle\" x=\"206.75\" y=\"-232.45\" font-family=\"Times,serif\" font-size=\"14.00\">23</text>\n",
"</g>\n",
"<!-- 17 -->\n",
"<g id=\"node2\" class=\"node\">\n",
"<title>17</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"144,-146.5 144,-182.5 198,-182.5 198,-146.5 144,-146.5\"/>\n",
"<text text-anchor=\"middle\" x=\"170.75\" y=\"-159.45\" font-family=\"Times,serif\" font-size=\"14.00\">17</text>\n",
"</g>\n",
"<!-- 23&#45;&gt;17 -->\n",
"<g id=\"edge1\" class=\"edge\">\n",
"<title>23&#45;&gt;17</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M198.29,-219.31C194.22,-211.29 189.28,-201.55 184.73,-192.57\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"187.96,-191.21 180.32,-183.88 181.72,-194.38 187.96,-191.21\"/>\n",
"</g>\n",
"<!-- 14 -->\n",
"<g id=\"node3\" class=\"node\">\n",
"<title>14</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"216,-146.5 216,-182.5 270,-182.5 270,-146.5 216,-146.5\"/>\n",
"<text text-anchor=\"middle\" x=\"242.75\" y=\"-159.45\" font-family=\"Times,serif\" font-size=\"14.00\">14</text>\n",
"</g>\n",
"<!-- 23&#45;&gt;14 -->\n",
"<g id=\"edge2\" class=\"edge\">\n",
"<title>23&#45;&gt;14</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M215.71,-219.31C219.78,-211.29 224.72,-201.55 229.27,-192.57\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"232.28,-194.38 233.68,-183.88 226.04,-191.21 232.28,-194.38\"/>\n",
"</g>\n",
"<!-- 6 -->\n",
"<g id=\"node4\" class=\"node\">\n",
"<title>6</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"72,-73.5 72,-109.5 126,-109.5 126,-73.5 72,-73.5\"/>\n",
"<text text-anchor=\"middle\" x=\"98.88\" y=\"-86.45\" font-family=\"Times,serif\" font-size=\"14.00\">6</text>\n",
"</g>\n",
"<!-- 17&#45;&gt;6 -->\n",
"<g id=\"edge3\" class=\"edge\">\n",
"<title>17&#45;&gt;6</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M153.57,-146.31C144.88,-137.74 134.2,-127.21 124.6,-117.74\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"127.17,-115.37 117.6,-110.84 122.26,-120.35 127.17,-115.37\"/>\n",
"</g>\n",
"<!-- 13 -->\n",
"<g id=\"node5\" class=\"node\">\n",
"<title>13</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"144,-73.5 144,-109.5 198,-109.5 198,-73.5 144,-73.5\"/>\n",
"<text text-anchor=\"middle\" x=\"170.75\" y=\"-86.45\" font-family=\"Times,serif\" font-size=\"14.00\">13</text>\n",
"</g>\n",
"<!-- 17&#45;&gt;13 -->\n",
"<g id=\"edge4\" class=\"edge\">\n",
"<title>17&#45;&gt;13</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M171,-146.31C171,-138.73 171,-129.6 171,-121.04\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"174.5,-121.04 171,-111.04 167.5,-121.04 174.5,-121.04\"/>\n",
"</g>\n",
"<!-- 10 -->\n",
"<g id=\"node6\" class=\"node\">\n",
"<title>10</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"216,-73.5 216,-109.5 270,-109.5 270,-73.5 216,-73.5\"/>\n",
"<text text-anchor=\"middle\" x=\"242.75\" y=\"-86.45\" font-family=\"Times,serif\" font-size=\"14.00\">10</text>\n",
"</g>\n",
"<!-- 14&#45;&gt;10 -->\n",
"<g id=\"edge5\" class=\"edge\">\n",
"<title>14&#45;&gt;10</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M243,-146.31C243,-138.73 243,-129.6 243,-121.04\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"246.5,-121.04 243,-111.04 239.5,-121.04 246.5,-121.04\"/>\n",
"</g>\n",
"<!-- 1 -->\n",
"<g id=\"node7\" class=\"node\">\n",
"<title>1</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"288,-73.5 288,-109.5 342,-109.5 342,-73.5 288,-73.5\"/>\n",
"<text text-anchor=\"middle\" x=\"314.88\" y=\"-86.45\" font-family=\"Times,serif\" font-size=\"14.00\">1</text>\n",
"</g>\n",
"<!-- 14&#45;&gt;1 -->\n",
"<g id=\"edge6\" class=\"edge\">\n",
"<title>14&#45;&gt;1</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M260.43,-146.31C269.12,-137.74 279.8,-127.21 289.4,-117.74\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"291.74,-120.35 296.4,-110.84 286.83,-115.37 291.74,-120.35\"/>\n",
"</g>\n",
"<!-- 5 -->\n",
"<g id=\"node8\" class=\"node\">\n",
"<title>5</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"0,-0.5 0,-36.5 54,-36.5 54,-0.5 0,-0.5\"/>\n",
"<text text-anchor=\"middle\" x=\"26.88\" y=\"-13.45\" font-family=\"Times,serif\" font-size=\"14.00\">5</text>\n",
"</g>\n",
"<!-- 6&#45;&gt;5 -->\n",
"<g id=\"edge7\" class=\"edge\">\n",
"<title>6&#45;&gt;5</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M81.57,-73.31C72.88,-64.74 62.2,-54.21 52.6,-44.74\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"55.17,-42.37 45.6,-37.84 50.26,-47.35 55.17,-42.37\"/>\n",
"</g>\n",
"<!-- 4 -->\n",
"<g id=\"node9\" class=\"node\">\n",
"<title>4</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"72,-0.5 72,-36.5 126,-36.5 126,-0.5 72,-0.5\"/>\n",
"<text text-anchor=\"middle\" x=\"98.88\" y=\"-13.45\" font-family=\"Times,serif\" font-size=\"14.00\">4</text>\n",
"</g>\n",
"<!-- 6&#45;&gt;4 -->\n",
"<g id=\"edge8\" class=\"edge\">\n",
"<title>6&#45;&gt;4</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M99,-73.31C99,-65.73 99,-56.6 99,-48.04\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"102.5,-48.04 99,-38.04 95.5,-48.04 102.5,-48.04\"/>\n",
"</g>\n",
"<!-- 12 -->\n",
"<g id=\"node10\" class=\"node\">\n",
"<title>12</title>\n",
"<polygon fill=\"none\" stroke=\"black\" points=\"144,-0.5 144,-36.5 198,-36.5 198,-0.5 144,-0.5\"/>\n",
"<text text-anchor=\"middle\" x=\"170.75\" y=\"-13.45\" font-family=\"Times,serif\" font-size=\"14.00\">12</text>\n",
"</g>\n",
"<!-- 13&#45;&gt;12 -->\n",
"<g id=\"edge9\" class=\"edge\">\n",
"<title>13&#45;&gt;12</title>\n",
"<path fill=\"none\" stroke=\"black\" d=\"M171,-73.31C171,-65.73 171,-56.6 171,-48.04\"/>\n",
"<polygon fill=\"black\" stroke=\"black\" points=\"174.5,-48.04 171,-38.04 167.5,-48.04 174.5,-48.04\"/>\n",
"</g>\n",
"</g>\n",
"</svg>\n"
],
"text/plain": [
"\n",
"digraph {\n",
" tooltip=\"Max heap example\"\n",
" node [shape=record]\n",
" 23->17\n",
" 23->14\n",
" 17->6\n",
" 17->13\n",
" 14->10\n",
" 14->1\n",
" 6->5\n",
" 6->4\n",
" 13->12\n",
"}\n"
]
},
"execution_count": 1,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import { Graph } from \"./graph.ts\";\n",
"\n",
"const src = `\n",
"digraph {\n",
" tooltip=\"Max heap example\"\n",
" node [shape=record]\n",
" 23->17\n",
" 23->14\n",
" 17->6\n",
" 17->13\n",
" 14->10\n",
" 14->1\n",
" 6->5\n",
" 6->4\n",
" 13->12\n",
"}\n",
"`;\n",
"\n",
"const graph = new Graph(src);\n",
"graph;\n"
]
}
],
"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": 2
}
Raw
graph.ts
import { toStream } from "npm:ts-graphviz/adapter";
import { toText } from "jsr:@std/streams";
/**
* Creates an object from `dot` input that can be displayed in a Jupyter
* notebook as an SVG.
*/
export class Graph {
dot: string;
constructor(dot: string) {
this.dot = dot;
}
async [Deno.jupyter.$display]() {
const svg = await toStream(this.dot).then(toText);
return {
"text/plain": this.dot,
"image/svg+xml": svg,
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment