Timeline Histogram

[joschne]

Functional Requirements

While the timeline component #54 is good for displaying a few events on a timeline, we need another component

• that can handle / print a large number of events consisting of start/end
• that allows to select a start and end date
• that emits the events of start/end date selection change (to be used to filter the data displayed on the map)

The POC #123 proves that the requirements can be met with Plotly.js

Technical Specs

Component inputs

Input data

Model, array of:

interface EventInterval { 
  eventUri: string
  start: string
  end: string
  type: string
 };

Example

eventUri (uri)	start (xsd:date)	end (xsd:date)	type (xsd:string)
<eventA>	1597-02-25	1597-08-11	Work
<eventB>	1599-01-12	1599-07-19	Work
<eventC>	1600-01-21	1600-01-21	Voyage
<eventD>	1600-01-01	1601-01-01	Work
<eventE>	1630-01-01	1630-12-31	Work

Input binSize

The binSize can be one of these values 'century' | 'decade' | 'year' | 'month' | 'day'
Default: 'year'

Visualization

The visualization is composed by a histogram chart and a select UI to manually change the binSize.

The chart has these axes:

• XAxis: Date
• YAxis: Count of events per bin

Depending on binSize, the bin size is one century, decade, year, month or day.

The chart has a range slider

Mapping event-intervals to bins

Each input event-interval consists of a start and end date. The bins as well consist of start and end dates. The mapping algorithm has to count the number of event-intervals per bin.

Component outputs

Event rangeChange

When the user changes the component emits a range consisting of this model:

interface RangeChangeEvent { start: Date, end: Date };