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.
That rel or property attribute is RDFa microdata. This can be scraped out of the HTML and turned into a JSON-LD object:
Using the very helpful jsonld.js package, we can transform that JSON-LD object into all sorts of useful things.
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.
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.
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.
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.
Source for this project is on GitHub!