WiViVi/implementation

Comments on implementation of WiViVi

Prerequisites for WiViVi:

• a modern browser
• javascript should be enabled

Adaptations to small screens

WiViVi author Erik Zachte tried hard to make the visualization adapt to any screen size. Unfortunately for very small screens (say compact mobile phones) some compromises can't be avoided: the user interface may be presented in a slightly different way, and for really small screens some functionality will even be disabled.

Adaptations have been mostly done in javascript (instead of CSS), and have been based on canvas width (cvw) and/or canvas height (cvh).
Read cvw:600- as canvas width less than 600 pixels, cvw:600+ as canvas width 600 pixels or more

Window title

The window title shrinks on small screens: so less info and more abbreviations.

Problem here is that text space needed depends on font type used. Ideally all elements are spaced dynamically. Some are, but most have absolute coordinates, as determining insertion point was rather tedious. I use a large font on my PC (Arial Unicode MS). Allowances for text space should be rather safe.

Map 1
cvw:1150+	‘Wikipedia pageviews, percentage to language’ (language name in listbox)
cvw:880+	‘Wikipedia views, % to language’ (same)
cvw:880-	‘% views to’ (same)
Map 2
cvw:1150+	‘Pageviews per capita to any Wikipedia in June 2017’
cvw:950+	‘Pageviews to any Wikipedia’
cvw:750+	‘Views to any Wikipedia’
cvw:550+	‘Views to any Wp’
cvw:350-	‘to any Wp’

Controls in title bar

The following buttons disappear:

• cvw:600- Button ‘Help’ not shown (not in title bar)

• cvw:600- Button ‘Hide region markers’ not shown (hide is actually mostly useful to prep for a screenshot, on a large screen)

• cvw:600- Button ‘Show metrics as icons’ (=toggle) not shown (use icons is always used on small screens)

 ⇔ 

(todo: cvw:900- to do: make this button much smaller)

• cvh:600- || cvw 800- No ‘Breakdown by country’ button (and no way to show those large breakdown panels at the right)

and

This 'Breakdown' panel can't be shown on a very small screen

This 'Breakdown' panel can't be shown a on very small screen

Legend, About, Status, Help

• cvw:1900- Meta and status info in footer merge into one column. (bug: status not shown in one column)
• cvw:800-

Info ‘migrates’ from footer texts to separate html files. Text-only buttons appear bottom left:
'Legend', 'About', 'Status' (shows script version, how many data read, canvas size), 'Help'

(some of these lead to more info than can be shown in the footer texts)

 

• cvh:850- Legend becomes more compact, one row
• cvh:820- Legend loses title (which echoes window title)

Splash screen

• cvw:900- No splash screen (too less space for useful intro, and ‘skip on next run’ should be visible always)

Miscellaneous

• cvw:900- Caption in button ‘Show metrics as icons’ shrinks (no icon)
• cvh:500- Mouseover on a country or region-marker leads to a more compact panel with less info
• cvh: 500- Onhover country info is compacted
• cvw:## Region marker (circle) depends on canvas width, and is shown larger for iOS, to ease touch control (add test for other handhelds?)
• cvh:## Panel ‘Breakdown by country’ calculates how many rows can be shown
• cvw:800- Panel Breakdown’ (?) has less detail ? (explain better)