RDFa Visualizer

Start with HyperText.

Here is a pile of HTML files, all in a list. They link to each other and it's pretty cool. Each link has a rel or property attribute that defines the nature of the link – that is, what kind of relationship it is.

Convert hyper-text to JSON-LD via RDFa.

That rel or property attribute is RDFa microdata. This can be scraped out of the HTML and turned into a JSON-LD object:

Use JSON-LD for good.

Using the very helpful jsonld.js package, we can transform that JSON-LD object into all sorts of useful things.

Cast to a Tree

JSON-LD framing is a method o defining a shape you want on your array of nodes. For instance, we could be interested in the Human and their Friends, and want a tree of those friendly relationships. Frames are a way to get those structures.

Expand URIs

The @context object in the JSON-LD is for expanding the keys into full URIs. It can also convert them back from full URIs to keys.

Convert to Triples

Lastly, JSON-LD is just a serialization of your classic semantic triple statement that goes "subject predicate object." You can then stick these into a triplestore and run complex graph queries on em. I like Oxigraph.

Graph 'em!

Now we can plug this in to a regular Observable or D3 network graph.

There are a lot of rad ways to make graph network charts. This is pulled from the standard d3 Les Mis example.

The End

Source for this project is on GitHub!