Overview zack-histogram

[l00mi]

Concept and Design related

• The more important point of the component is to show the context of time.

  • Important feature to show for the current selection the start point of the timeline and end point (interval where documents are situated in). Might need visual boost.
  • Documents will relate with arrows or intervals to it (to put them self into context on the timeline.)
  • [Low prio] Timeline is fixed in granularity of years, (ideally it would also scales down to months, days).

• The case that non of the documents provide a date, hence there are no buckets delivered to the visualisation needs to be gracefully handled.

• The black bars can be used to constrain the search query to a time interval. (Probably better user interface metaphor ? Drag over the constraining interval (click-start, drag, click-stop -> interval).

• [Low prio] An intuitive way to relax the constraint is searched after (minimal case, just remove the constraint completely).

• Lowest Target Browser IE11

Dev and Code related

• Fork the development branch to work in.
• Higher level options can be set like this: https://github.com/zazuko/zack-search/blob/develop/public/index.html#L113
• Filtering is provided by simply setting an attribute on the correct html element: https://github.com/zazuko/zack-search/blob/develop/lib/timeline.js#L43

[l00mi]

Die Anpassungen basierend auf dem develop branch.

Kann mit dem Projekt www.alod.ch getestet werden. Dazu die Abhängigkeit von zack-search auf das eigene Repo umbiegen und:

npm install
npm run start-local

[larsvers]

1. Handles: The black bars can be used to constrain the search query to a time interval. (Probably better user interface metaphor ? Drag over the constraining interval (click-start, drag, click-stop -> interval).

   The bespoke handler mechanic has been replaced with the D3 brush mechanic. Period ranges are now selected with a brushing rectangle.

2. Accentuate start/end of current selection

   I played with a few options like shifted start/end ticks and boosted tick-lines but would probably suggest bold labels..

3. Documents will relate with arrows or intervals to it (to put them self into context on the timeline.)

   This still seems out of whack, but I haven’t looked into this further. Might be that the margin is not considered properly.

4. The case that none of the documents provide a date, hence there are no buckets delivered to the visualisation needs to be gracefully handled.

   TBD

5. [Low prio] Timeline is fixed in granularity of years, (ideally it would also scales down to months, days).

   It currently flips between years and abreviated month + years, but granularity can be changed of course. I haven’t quite grasped what happens on very high date resolution.

6. [Low prio] An intuitive way to relax the constraint is searched after (minimal case, just remove the constraint completely).

   I’m misusing the result count (.zack-meta.pull-right element) as a reset button at the moment. I toyed with a few options here, but it seems a small button under the result count (saying ‘zurücksetzen’ or the shorter 'reset') or a reset icon might be best...

7. (New) Buckets are visible beyond axis end

   Requires clip-path

[larsvers]

Further refinements:

• Check problem with Firefox and IE11 (problem seemed to exist before histogram refinement [tested 5f0e405]: start date returns Invalid Date)
• Safari dates pear-shaped
• Increase histogram height to 120px and adapt element sizes appropriately
• Add reset button
• Hide histogram if data response is empty
• Add visual clue indicating histogram data load (spinner or similar)
• Reset chart on double-click
• Highlight the axis' start and end date values

All changes pending double-check on working database