DEV Community

Cover image for Observable Graphs
Andreas Kollegger for Neo4j, Inc.

Posted on

Observable Graphs

Create graphs with gram then share them on ObservableHQ.

Gram makes writing graphs as easy as (a)-->(b)<--(c). But then what? Well, graphs are eminently visual data structures. Naturally, we should visualize them with d3.js. There's a convenient integration called d3-gram which we'll exercise on ObservableHQ.

Observe as I demonstrate...

To follow along you'll need to login or create an account on ObservableHQ. Conveniently, you can use github, google or twitter to sign in.

First, we'll create a notebook:

  1. Click the New button in the upper-right corner
  2. Give it a nice title like # Observable Graph by ABK

Next, import the graphOf function which parses gram then renders a graph.

  1. Create a new block using the + button
  2. Copy/paste the following code
  3. Hit shift-return or press the play/run button ▶️ to perform the import
import {graphOf} from "@akollegger/graph-input"
Enter fullscreen mode Exit fullscreen mode

Now creating a graph visualization is as easy as calling the graphOf function, passing in a Cypher-like gram pattern. Add a new block try this:

abc = graphOf("(a)-->(b)<--(c)");
Enter fullscreen mode Exit fullscreen mode

Neat, right? We can tweak the visualization a little by adding a zoom level and viewbox height:

abc = graphOf("(a)-->(b)<--(c)", {zoom:4, height: 60})
Enter fullscreen mode Exit fullscreen mode

Observe the graph

What is abc? The graphOf function returns an observable view, an input element with a current value. That's right, you can use the graph visualization like a slider or a text input field.

Modify the graphOf block, prepending viewof:

viewof abc = graphOf("(a)-->(b)<--(c)", {zoom:4, height: 60})
Enter fullscreen mode Exit fullscreen mode

Add another block which only contains abc:

abc
Enter fullscreen mode Exit fullscreen mode

When you run that block, notice the result is an object. That's the current value of the input element. It contains an array of all nodes, an array of links, and an array of the current selection. Shift-clicking the graph adds multiple nodes to the selected array.

Object {
  nodes: Array(3) [Object, Object, Object]
  links: Array(2) [Object, Object]
  selected: Array(1) [Object]
}
Enter fullscreen mode Exit fullscreen mode

The array elements are objects that mix d3-js properties for things like x,y coordinates along with the original graph data. Let's add another block to focus on the graph data:

selectedNode = abc.selected.length == 0 ? {} : Object.getPrototypeOf(abc.selected[0])
Enter fullscreen mode Exit fullscreen mode

That's better. Now we can add more details to the graph, which will influence the graph visualization and show up in the selectedNode.

Try this:

viewof abc = graphOf("(a:Person {name:"ABK"})-->(b)<--(c)", {zoom:4, height: 60})
Enter fullscreen mode Exit fullscreen mode

With all this in place, you can create your own graphs by editing the gram string passed into graphOf(). Or you could add a text field using form-input. Or load from an attached file or URL.

For fun, I re-created wikipedia's Gallery of Named Graphs.

A gram of graphs goes a long way. Have fun! :)


Footnotes:

[1] Observable Graph by ABK The complete notebook described in this post.

[2] Gram of Graphs - a collection of ObservableHQ notebooks about gram and graphs

[2] @akollegger/graph-input - the particular ObservableHQ notebook which provides the utility functions used in this post

Discussion (0)