Observable Graphs

Create graphs with gram then share them on ObservableHQ, or use d3-gram to render graphs to SVG anywhere.

Gram makes writing graphs as easy as (a)–>(b)<–(c). But then what? Well, graphs are eminently visual data structures. Naturally, we could visualize them with d3.js.

Gram: a data graph format

There’s a convenient integration called d3-gram which we’ll exercise on ObservableHQ.

Observe as I Demonstrate

To observe, watch this incredibly short video:

https://www.youtube.com/watch?v=FXZrX3nzKdo&feature=youtu.be

To follow along, login to ObservableHQ. No, really, do it!

Observable – Make sense of the world with data, together / Observable

First, 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”

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)");

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})

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})

Add another block which only contains abc:

abc

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]
}

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])

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})

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:

d3-gram — the js integration library driving the rendering with d3
Observable Graph by ABK — the complete notebook described in this post
Gram of Graphs — a collection of notebooks about gram and graphs
@akollegger/graph-input — the particular ObservableHQ notebook which provides the utility functions used in this post

• d3-gram
• Observable Graph by ABK
• Gram of Graphs
• Graph Inputs

Observable Graphs was originally published in Neo4j Developer Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.