geovistory/design-system

Entity Timeline

Closed this issue · 7 comments

joschne commented

Why

The conceptual data model of geovistory, based on CIDOC-CRM, is event centered: The persistent items (persons, places) are related to each other and to literals describing their attributes through time referenced temporal entities (birth, death, occupations, appellations, localizations, etc.). Thus, the events and their time are very central in the data. This issue is about bringing the time referenced data to a visual form.

The goal is to allow readers to quickly see events in chronological order. For example: The events in the life of a person.

What

Time in data

Each temporal entity can have a time span. Each time span can have 6 time properties in order to narrow down its localization and duration within a temporal reference system (calendar and time).

property label in diagram
crm:P82 at some time within At some time within
crm:P81 ongoing throughout Ongoing throughout
crm:P82a begin of the begin Earliest possible begin
crm:P81a end of the begin Begin
crm:P81b begin of the end End
crm:P82b end of the end Latest possible end

Image

Time in visualisation

To visualise this kind of data on a timeline, a number of questions has to be answered:

Do we use an Absolute chronology or Relative chronology?
An Absolute chronology is a chronological order which outlines events in terms of their absolute time span. A relative chronology is a chronological order that outlines events relative to other events. It can be used to compare different periods, or to analyze and understand the sequence of events in a specific period.

How to deal with the 6 time span properties?
The visualization of a time span could display all 6 properties in a visually distinguishable way (as on the diagram above), it could reduce the 6 props to 2 (start and end) or to one (point in time).

How to display time spans in a relative chronology?
Assumed we have two simplified time spans A and B with start and end, they can have different relationships:

  • no overlap: A ends before B starts
  • overlap: A starts before B, B starts before A ends, A ends before B ends
  • contains: A starts before B and ends after B
    The visualization would either reduce every event to a simple point in time (which is good for short events like a Birth, but bad for longer phases) or it would have to visualize the relationships sketched above.

Decision
After the discussion (see below) we create a time line visualization in the style of a Gantt chart, with an absolute chronology referencing the start and end dates of time spans.

joschne commented

Some Java Script libraries / examples:

Absolute chronology

Time points

This example uses timeline js (in an old version) to display clickable points in time together with a label:
http://srs.symogih.org/correspondences/letters-timeline.html

Time spans with start and end (often referred to as Gantt chart)

Charts.js is a very popular charting library with a lot of documentation. It creates beautiful charts and seems to have good DX. This video explains, how to create a time line / gantt chart. In addition, there is a series about gantt charts for charts.js.

This example uses d3 (in an Angular Component) to create a Gantt chart.
https://stackblitz.com/edit/d3-gantt-chart-basic?file=src%2Fapp%2Fapp.component.ts

Mermaid js allows to create Gantt chats (can the elements be clickable?)
example

This is a Gantt implementation without dependencies (like d3) wrapped in web components, see the live example.

There are many more libraries on npmjs under a name containing "gantt"

Relative chronology

none found so far

joschne commented

regarding the questions above and the available libraries (especially Charts.js and the linked tutorial videos) I would propose:

  • we so absolute chronology
  • we use start and end time per time span (using the algorithm in geov-time-span)

@perrauda what is your opinion?

perrauda commented

regarding the questions above and the available libraries (especially Charts.js and the linked tutorial videos) I would propose:

  • we so absolute chronology
  • we use start and end time per time span (using the algorithm in geov-time-span)

@perrauda what is your opinion?

In view of the elements you've written and the information you've been able to compile, I can only agree with the use of a Gantt chart, with an absolute chronology using the start and end dates.

I agree, @joschne

joschne commented

Ok, I updated the spec accordingly, @perrauda.

joschne commented

Rests the technical spec: How should this be implemented?

I propose to use charts.js to create a standalone geov-timeline-gantt component.

input:

  • data: {entityLabel: string, entityClassLabel: string, entityUri: string, startDate: string, endDate: string}[]

features:

  • zooms to temporal extend on init
  • scroll y when higher than container (to deal with large data)
  • on each bar, shows ${entityClassLabel}, ${entityLabel}
  • click on bar opens entityUri in new window

In addition, there is a wrapper component geov-entity-timeline that executes a sparql query and injects the data into geov-timeline-gantt.

In addition, a yasgui plugin for geov-timeline-gantt is developed (as it is done for geov-yasgui-map-circles).

@perrauda do you agree? unclarities? can we add it to the specs?

perrauda commented

@joschne Sorry, I hadn't seen that comment.

As you indicate, I'm going to develop the webcomponent in the same way as I did for map-circles, because it's really practical.

So, yes I agree

joschne commented

This query could serve as an example:

PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX owl: <http://www.w3.org/2002/07/owl#>
PREFIX xml: <http://www.w3.org/XML/1998/namespace>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX geo: <http://www.opengis.net/ont/geosparql#>
PREFIX time: <http://www.w3.org/2006/time#>
PREFIX ontome: <https://ontome.net/ontology/>
PREFIX geov: <http://geovistory.org/resource/>

SELECT ?event (MIN(?date) as ?start) (MAX(?date) as ?end) (SAMPLE(?l) as ?label)
WHERE {
  # event is a Ship voyages
  ?event a ontome:c523 . 
  # event -> has -> time span 
  ?event ontome:p4 ?timespan.
  # time span -> timeprop -> date time description 
  ?timespan ontome:p71|ontome:p72|ontome:p150|ontome:p151|ontome:p152|ontome:p153 ?dtd.
  # date time description -> year;month;day 
  ?dtd time:year ?y ; time:month ?m  ; time:day ?d .
  FILTER regex(str(?y), '^-') # necessary because of https://github.com/geovistory/toolbox-streams/issues/124 
  # parse to xsd:date
  bind(xsd:date(concat(replace(str(?y), "^-", "" ), replace(str(?m), "^-", "" ),replace(str(?d), "^--", "" ))) as ?date)
  # event -> has -> label
  ?event rdfs:label ?l . 
}
GROUP BY ?event

Copy it here to get results: https://www.geovistory.org/project/84760/sparql