30:Tbe3,chart = { function draw() { /* * Example for FontAwesome */ var optionsFA = { groups: { usergroups: { shape: 'icon', icon: { face: 'FontAwesome', code: '\uf0f9', size: 50, color: '#57169a' } }, users: { shape: 'icon', icon: { face: 'FontAwesome', code: '\uf007', size: 50, color: '#aa00ff' } } } }; // create an array with nodes var nodesFA = [{ id: 1, label: 'User 1', group: 'users' }, { id: 2, label: 'User 2', group: 'users' }, { id: 3, label: 'Usergroup 1', group: 'usergroups' }, { id: 4, label: 'Usergroup 2', group: 'usergroups' }, { id: 5, label: 'Organisation 1', shape: 'icon', icon: { face: 'FontAwesome', code: '\uf1ad', size: 50, color: '#f0a30a' } }]; // create an array with edges var edges = [{ from: 1, to: 3 }, { from: 1, to: 4 }, { from: 2, to: 4 }, { from: 3, to: 5 }, { from: 4, to: 5 }]; // create a network var containerFA = document.getElementById('mynetworkFA'); var dataFA = { nodes: nodesFA, edges: edges }; var networkFA = new vis.Network(containerFA, dataFA, optionsFA); /* * Example for Ionicons */ var optionsIO = { groups: { usergroups: { shape: 'icon', icon: { face: 'Ionicons', code: '\uf47c', size: 50, color: '#57169a' } }, users: { shape: 'icon', icon: { face: 'Ionicons', code: '\uf47e', size: 50, color: '#aa00ff' } } } }; // create an array with nodes var nodesIO = [{ id: 1, label: 'User 1', group: 'users' }, { id: 2, label: 'User 2', group: 'users' }, { id: 3, label: 'Usergroup 1', group: 'usergroups' }, { id: 4, label: 'Usergroup 2', group: 'usergroups' }, { id: 5, label: 'Organisation 1', shape: 'icon', icon: { face: 'Ionicons', code: '\uf276', size: 50, color: '#f0a30a' } }]; // create a network var containerIO = document.getElementById('mynetworkIO'); var dataIO = { nodes: nodesIO, edges: edges }; var networkIO = new vis.Network(containerIO, dataIO, optionsIO); } draw(); }31:[] 2e:{"title":"Vis.js","cells":[{"id":0,"value":"md`# Vis.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\nHaving played around with [Graphviz](http://www.graphviz.org/) to discover that the HTML-based examples in the [Graphviz documentation](https://www.graphviz.org/doc/info/shapes.html) weren't rendering, I started looking into alternative JavaScript libraries for rendering a flowchart. I found a [Vis.js](http://visjs.org) network diagram [example using icons as nodes](http://visjs.org/examples/network/nodeStyles/icons.html), and decided to give it a whirl.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`\nThanks to Tom MacWright [for solving why icons weren't loading](https://talk.observablehq.com/t/newbie-question-js-icons-not-loading/731/2) in the [vis.js example](http://visjs.org/examples/network/nodeStyles/icons.html).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"html`\n

\n Use FontAwesome-icons for nodes

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`\n

\n Use Ionicons-icons for nodes

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"dot = require(\"@observablehq/graphviz@0.0.2/dist/graphviz.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"stylesheet1 = html``\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"stylesheet2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"stylesheet3 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"stylesheet4 = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`\n**NOTE:** I noticed that the FontAwesome flag icon from the example wasn't loading, so here are extra stylesheets for good measure: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"FontAwesome = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"ionicons = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"vis = {\n const response = await fetch(\"https://raw.githubusercontent.com/almende/vis/master/dist/vis-network.min.js\");\n const blob = await response.blob();\n return require(URL.createObjectURL(blob)).catch(() => window.visnetwork);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}