smartdown-gallery

### Using GraphViz to create clickable navigation maps This document explores the use of [viz.js](https://github.com/mdaines/viz.js), which provides Graphviz capability in the browser. Specifically, we explore the use of the `URL` attribute and the ability have clickable nodes, edges, and graphs. #### Inline Diagrams with Clickable Nodes The following example demonstrates the use of an *inline* Graphviz playable, and the use of the `URL` attribute to attach link behaviors to nodes. - `URL=#README` will use Smartdown tunneling to load the `README.md` document - `URL=#Markdown#philosophy` will load `Markdown.md`, and then go to the `philosophy` anchor within that document - `URL=#GraphvizClickable#gallery-digraph-with-clusters` will go to the `gallery-digraph-with-clusters` anchor within this document. - `URL=javascript:alert('You clicked Hello');` will put up a `Hello` alert - `URL=javascript:smartdown.setVariable('Goodbye', true);` will set the Smartdown variable `Goodbye` to `true`, and a Javascript playable will react to this change by displaying `Goodbye` in its div. Can we do inline graphviz? Let's see... ```graphviz/playable/autoplay/inline digraph "unix" { rankdir=LR; // Left to Right, instead of Top to Bottom graph [ size = "4,1", ]; node [ fontsize = 30, color = lightblue, style = filled, ]; "Readme" [URL="#README"]; "Markdown" [URL="#Markdown#philosophy"]; "Math" [URL="#Math"]; "Clustered Digraph" [URL="#GraphvizClickable#gallery-digraph-with-clusters"]; "Readme" -> "Markdown"; "Markdown" -> "Math"; "Math" -> "Clustered Digraph"; } ``` and here is another one... ```graphviz/playable/autoplay/inline digraph "unix" { rankdir=LR; // Left to Right, instead of Top to Bottom graph [ size = "3,1", ]; node [ fontsize = 30, color = lightyellow, style = filled, ]; "Hello" [URL="javascript:alert('Hello'); smartdown.setVariable('Goodbye', false);"]; "Goodbye" [URL="javascript:smartdown.setVariable('Goodbye', true);"]; "Hello" -> "Goodbye"; } ``` It appears that we can do inline Graphviz playables. The `Goodbye` playable is below, and will react to changes in the `Goodbye` variable. ```javascript /playable/autoplay this.dependOn.Goodbye = () => { this.div.innerHTML = env.Goodbye ? `<h1>Goodbye</h1>` : ''; }; ``` #### Gallery Digraph A first attempt at displaying the various Gallery examples in a more graphical format. Clicking on a node should tunnel to that node's content. ```graphviz/playable/autoplay digraph "unix" { rankdir=LR; // Left to Right, instead of Top to Bottom graph [ fontname = "Helvetica-Oblique", fontsize = 36, label = "\n\n\n\nSmartdown Gallery Map", size = "12,12", ]; node [ shape = polygon, sides = 6, distortion = "0.0", orientation = "0.0", skew = "0.0", color = lightblue, style = filled, fontname = "Helvetica-Outline", fontsize = "36" ]; "Media" [color=pink, shape=circle]; "Readme" [URL="#README"]; "Markdown" [URL="#Markdown"]; "Math" [URL="#Math"]; "Images" [URL="#Images"]; "Multicards" [URL="#Multicards"]; "Video" [URL="#Video"]; "GIF/Audio" [URL="#GIFAndAudio"]; "Decorations" [URL="#Decorations"]; "Cells" [URL="#Cells"]; "Disclosables" [URL="#Disclosables"]; "SVG" [URL="#SVG"]; "Disclosables++" [URL="#DisclosablesPlus"]; "Tweets" [URL="#Tweets"]; "Media" -> "Readme"; "Media" -> "Markdown"; "Media" -> "Math"; "Media" -> "Images"; "Media" -> "Multicards"; "Media" -> "Video"; "Media" -> "GIF/Audio"; "Media" -> "Decorations"; "Media" -> "Cells"; "Media" -> "Disclosables"; "Media" -> "SVG"; "Media" -> "Disclosables++"; "Media" -> "Tweets"; "Data/Science" [color=pink, shape=circle]; "Graphviz" [URL="#Graphviz"]; "Graphviz Maps" [URL="#GraphvizClickable"]; "D3" [URL="#D3"]; "Data" [URL="#Data"]; "Plotly" [URL="#Plotly"]; "Maps" [URL="#Maps"]; "Stdlib" [URL="#Stdlib"]; "Processes" [URL="#Processes"]; "ThreeJS" [URL="#Three"]; "P5JS" [URL="#P5JS"]; "Mermaid" [URL="#Mermaid"]; "jsPsych" [URL="#JSPsych"]; "Sankey" [URL="#Sankey"]; "Crossword" [URL="#Crossword"]; "Data/Science" -> "Graphviz"; "Data/Science" -> "Graphviz Maps"; "Data/Science" -> "D3"; "Data/Science" -> "Data"; "Data/Science" -> "Plotly"; "Data/Science" -> "Maps"; "Data/Science" -> "Stdlib"; "Data/Science" -> "Processes"; "Data/Science" -> "ThreeJS"; "Data/Science" -> "P5JS"; "Data/Science" -> "Mermaid"; "Data/Science" -> "jsPsych"; "Data/Science" -> "Sankey"; "Data/Science" -> "Crossword"; "Toys" [color=pink, shape=circle]; "MadLibs" [URL="#MadLibs"]; "Cuneiform" [URL="#Cuneiform"]; "Mobius" [URL="#Mobius"]; "Temperature" [URL="#Temperature"]; "Vector Field" [URL="#VectorField"]; "Tree" [URL="#Tree"]; "Conic" [URL="#Conic"]; "Vector Tree" [URL="#VectorTree"]; "Dungeon" [URL="#Dungeon"]; "Dungeon3D" [URL="#Games"]; "Music" [URL="#Music"]; "WordCloud" [URL="#WordCloud"]; "Mathigon" [URL="#Mathigon"]; "JSXGraph" [URL="#JSXGraph"]; "Toys" -> "MadLibs"; "Toys" -> "Cuneiform"; "Toys" -> "Mobius"; "Toys" -> "Temperature"; "Toys" -> "Vector Field"; "Toys" -> "Tree"; "Toys" -> "Conic"; "Toys" -> "Vector Tree"; "Toys" -> "Dungeon"; "Toys" -> "Dungeon3D"; "Toys" -> "Music"; "Toys" -> "WordCloud"; "Toys" -> "Mathigon"; "Toys" -> "JSXGraph"; "Advanced" [color=pink, shape=circle]; "Typescript" [URL="#Typescript"]; "Javascript" [URL="#Javascript"]; "Gists" [URL="#Gists"]; "Extensions" [URL="#Extensions"]; "Brython" [URL="#Brython"]; "YouTube" [URL="#YouTube"]; "ES6" [URL="#ES6"]; "Mandelbrot" [URL="#Mandelbrot"]; "LDF" [URL="#LDF"]; "OpenJSCAD" [URL="#OpenJSCAD"]; "Inlines" [URL="#Inlines"]; "Kiosk" [URL="#Kiosk"]; "React" [URL="#React"]; "Media" -> "Data/Science" -> "Toys" -> "Advanced" [style=invis]; "Advanced" -> "Typescript"; "Advanced" -> "Javascript"; "Advanced" -> "Gists"; "Advanced" -> "Extensions"; "Advanced" -> "Brython"; "Advanced" -> "YouTube"; "Advanced" -> "ES6"; "Advanced" -> "Mandelbrot"; "Advanced" -> "LDF"; "Advanced" -> "OpenJSCAD"; "Advanced" -> "Inlines"; "Advanced" -> "Kiosk"; "Advanced" -> "React"; "P5JS" -> "Conic"; "P5JS" -> "Mobius"; "P5JS" -> "Tree"; "P5JS" -> "Vector Field"; "P5JS" -> "Vector Tree"; "P5JS" -> "Dungeon3D"; "P5JS" -> "Mandelbrot"; "D3" -> "Processes"; "D3" -> "Maps"; } ``` #### Gallery Digraph with Clusters Here, I took the original Gallery table of examples and structured it using Graphviz clusters instead of table columns. ```graphviz/playable/autoplay digraph "unix" { rankdir=LR; // Left to Right, instead of Top to Bottom graph [ fontname = "Helvetica-Oblique", fontsize = 36, label = "\n\n\n\nSmartdown Gallery Map", size = "20,12", ]; node [ shape = polygon, sides = 6, distortion = "0.0", orientation = "0.0", skew = "0.0", color = lightblue, style = filled, fontname = "Helvetica-Outline", fontsize = "36" ]; subgraph cluster_1 { label="Media"; rankdir="TB"; "top1" [style=invis]; "Readme" [URL="#README"]; "Markdown" [URL="#Markdown"]; "Math" [URL="#Math"]; "Images" [URL="#Images"]; "Multicards" [URL="#Multicards"]; "Video" [URL="#Video"]; "GIF/Audio" [URL="#GIFAndAudio"]; "Decorations" [URL="#Decorations"]; "Cells" [URL="#Cells"]; "Disclosables" [URL="#Disclosables"]; "SVG" [URL="#SVG"]; "Disclosables++" [URL="#DisclosablesPlus"]; "Tweets" [URL="#Tweets"]; } subgraph cluster_2 { label="Data/Science"; rankdir="TB"; "top2" [style=invis]; "Graphviz" [URL="#Graphviz", sides=9, color=lemonchiffon]; "Graphviz Maps" [URL="#GraphvizClickable", sides=9, color=aquamarine2]; "D3" [URL="#D3"]; "Data" [URL="#Data"]; "Plotly" [URL="#Plotly"]; "Maps" [URL="#Maps"]; "Stdlib" [URL="#Stdlib"]; "Processes" [URL="#Processes"]; "ThreeJS" [URL="#Three"]; "P5JS" [URL="#P5JS"]; "Mermaid" [URL="#Mermaid"]; "jsPsych" [URL="#JSPsych"]; "Sankey" [URL="#Sankey"]; "Crossword" [URL="#Crossword"]; } subgraph cluster_3 { label="Toys"; rankdir="TB"; "top3" [style=invis]; "MadLibs" [URL="#MadLibs"]; "Cuneiform" [URL="#Cuneiform"]; "Mobius" [URL="#Mobius"]; "Temperature" [URL="#Temperature"]; "Vector Field" [URL="#VectorField"]; "Tree" [URL="#Tree"]; "Conic" [URL="#Conic"]; "Vector Tree" [URL="#VectorTree"]; "Dungeon" [URL="#Dungeon"]; "Dungeon3D" [URL="#Games"]; "Music" [URL="#Music"]; "WordCloud" [URL="#WordCloud"]; "Mathigon" [URL="#Mathigon"]; "JSXGraph" [URL="#JSXGraph"]; } subgraph cluster_4 { label="Advanced"; rankdir="TB"; "top4" [style=invis]; "Typescript" [URL="#Typescript"]; "Javascript" [URL="#Javascript"]; "Gists" [URL="#Gists"]; "Extensions" [URL="#Extensions"]; "Brython" [URL="#Brython"]; "YouTube" [URL="#YouTube"]; "ES6" [URL="#ES6"]; "Mandelbrot" [URL="#Mandelbrot"]; "LDF" [URL="#LDF"]; "OpenJSCAD" [URL="#OpenJSCAD"]; "Inlines" [URL="#Inlines"]; "Kiosk" [URL="#Kiosk"]; "React" [URL="#React"]; } "top1" -> "top2" -> "top3" -> "top4" [style=invis]; "P5JS" -> "Conic"; "P5JS" -> "Mobius"; "P5JS" -> "Tree"; "P5JS" -> "Vector Field"; "P5JS" -> "Vector Tree"; "P5JS" -> "Dungeon3D"; "P5JS" -> "Mandelbrot"; "D3" -> "Processes"; "D3" -> "Maps"; } ``` --- [Gallery Home](:@Home)