Graph view (ask.chaipat.cc)

The graph view at /graph draws ask.chaipat.cc's knowledge graph as a network you can search, walk and tour. It lives in src/graph.js and src/graph-model.js, is plain JavaScript drawing on a canvas, and reads the same Turtle files, reasoned over by the same reasoner, as the rest of the site.

Two views

• Knowledge graph. Every thing in the graph, coloured by kind (works, skills, techniques, themes, people and places, services, datasets, games) and sized by how many links it has; key work is ringed. It opens on an overview of about sixty: him, his key work, the themes, and the skills that several key works share. Opening a thing brings its neighbours in around it, and Everything shows all of it.
• Ontology. The classes of the cj: vocabulary, sized by how many things they have, with subclass links and the properties between them. A class lists its properties, inherited ones too, and its instances.

Walking

Clicking a thing opens a panel with every relation it has, grouped, the inferred ones marked; each is a step to the next thing, and a path at the bottom keeps the way back. A search box finds things by any of their names, and a tour walks through his key work in his own order.

Layout

Places come from a force-directed layout: springs along the links, every pair of nodes pushing apart, and each kind of thing drawn toward its own region, works in the middle. The layout is settled once at deploy time by the page builder, with a seeded random so it doesn't reshuffle when one fact changes, and written to data/graph-layout.json; the page places the nodes from it and opens at once. A phone held upright gets its own taller overview.

@prefix id: <https://ask.chaipat.cc/id/> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix cj: <https://ask.chaipat.cc/ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

id:SiteGraph
    a cj:Component ;
    rdfs:label "Graph view (ask.chaipat.cc)" ;
    cj:shortLabel "Graph view" ;
    cj:componentOf id:ThisSite ;
    cj:sourceFile "src/graph.js" ;
    cj:uses id:JavaScript , id:HTMLCSS ;
    cj:description "Draws the whole knowledge graph, or the classes of its ontology, as a network to search, walk and tour, opening on an overview of his key work; the layout is settled at deploy time." ;
    cj:implements id:ForceDirectedLayout ;
    cj:article "https://ask.chaipat.cc/wiki/SiteGraph"^^xsd:anyURI ;
    cj:implementationDigest "sha256:18c63e821920429cd5e4a8de25ffbaccbab2840afb63ce2ce67a9f45bde27774" .