Investigate map chart libaries

[bartaz]

Geodata shape proposal and wireframes: https://docs.google.com/document/d/1dACEHFER9Z0S1lOdm_vyOnpT3uMo87-Ak7Hf5zrX3wo/edit

Snap details map visual design: https://github.com/CanonicalLtd/snapcraft-design/issues/54#issuecomment-324969516

[bartaz]

Work in progress POC (using d3.js): https://jsfiddle.net/9gx7m457/4/

Demo: http://jsfiddle.net/9gx7m457/14/embedded/result/

[bartaz]

Investigation

List of different map libraries: https://onextrapixel.com/8-javascript-libraries-for-interactive-map-visualizations/

GeoChart (by Google)

https://developers.google.com/chart/interactive/docs/gallery/geochart

Pros:

• map data based on Google Maps
• quite well documented (with other parts of their charts library)

Cons:

• quite limited interactivity, very little control over map tooltips

amCharts JavaScript Maps

https://www.amcharts.com/javascript-maps/

Pros:

• part of the bigger charts library
• nice and detailed documentation and examples

Cons:

• paid (free option with their branding)
• tooltips available, but not not much control over their content or styling

AnyMap (by AnyCharts)

https://www.anychart.com/products/anymap/overview/

Similar to amCharts

Pros:

• part of the bigger charts library
• nice and detailed documentation and examples
• quite flexible support for map tooltips (custom HTML possible)

Cons:

• paid (free only as trial)

Leaflet

http://leafletjs.com/

Pros:

• open source
• quite well documented

Cons:

• it's a library mostly meant to showing maps, not really charts on maps - it is possible, but it's not the main focus of this library

d3.js

https://d3js.org

Pros:

• well known open source charting library
• big community
• very flexible and extensible

Cons:

• quite low level (many things need to be coded on top of their API)
• a bit messy documentation and examples (different ways of implementing things, different versions of library and plugins, etc)

datamaps (for D3)

http://datamaps.github.io/

Mapping tools for D3

Pros:

• gives nicer API for maps on top of d3

Cons:

• maintained quite slowly
• latest version of d3 (v4) not yet supported

d3.geomap (for D3)

https://d3-geomap.github.io/

Pros:

• gives nicer API for maps on top of d3

Cons:

• currently very limited to specific interactions

Summary

AnyMap looked very promising, but as it's only a paid option I skipped it for now. Maybe it would be worth considering if we would also be using their other charts, but quite likely the same can ba achieved with d3 (but maybe with more work or less organised community support).

Mapping tools on top of d3 would be nice, but they had their own issues and incompatibilities so for the prototype d3.js was chosen. It was a bit hard at first to find relevant (and up to date) examples, but in the end it turned out pretty well. For sure it gives us most flexibility about what we want to do with maps (or charts). It will require some tweaking before going to production (currently we need 2 data files: topography.json and country codes/names mapping).

Prototype map in d3 on jsFiddle: http://jsfiddle.net/9gx7m457/14/embedded/result/

[bartaz]

It's not a PR, so I can't really request a code review, but if you could have a look at the comments @nottrobin it would be great.

There are some bits to discuss later about map data (topography and countries, etc), how we can maybe prepare it better on server side, not to download and process it all in JavaScript, but we can talk about it when we start implementing it in the app.