Timeline view (ask.chaipat.cc)

The timeline view in src/timeline.js draws his roles and every piece of work on one time axis. It is plain JavaScript drawing SVG, styled with HTML and CSS.

Reading it

• Roles are bars along the top.
• Work is grouped in lanes by theme. Each piece is a line from its first commit to its last, or a dot when it all happened within a few days; key work is drawn as a ring and labelled.
• Hovering a piece shows what it is, its dates and its commit count; clicking opens a card beside the chart.

As a filter

Clicking a year, a role or a theme lights up what was active then and lists it in the card, key work first. The card's button asks the matching question ("What did he work on in 2024?"), so the answer and its sources come from the question engine. On phones the chart becomes a list, newest first, with the same filters.

The works come from the inferred worked on relation, so anything he made, contributed to or mentored appears without being listed twice.

@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:SiteTimeline
    a cj:Component ;
    rdfs:label "Timeline view (ask.chaipat.cc)" ;
    cj:shortLabel "Timeline view" ;
    cj:componentOf id:ThisSite ;
    cj:sourceFile "src/timeline.js" ;
    cj:uses id:JavaScript , id:HTMLCSS ;
    cj:description "Draws every role and every piece of work on one time axis, each work as a line from its first commit to its last; years, roles and themes are filters." ;
    cj:article "https://ask.chaipat.cc/wiki/SiteTimeline"^^xsd:anyURI ;
    cj:implementationDigest "sha256:bfaf0c85abb7ee045ecc8497eb7929e429ab9ae7f0df53653d748840cc813477" .