[WIP] Add maps for location, gender, ethnicity and age

[SamAI-Software]

Website preview is here

• [x] Fix maps flicking
  • [x] Render all maps on page load and hide them
  • [x] Load world-geo3-min.json only one time for all maps
• [x] Fix the height for big screens
• [x] Find better color palette
  • [x] Revert tabs colors for consistency
  • [x] Bottom section set background-color to transparent (should be white)
  • [x] Change "water" color to transparent (should be white)
• [x] Find a better position for map description
• [x] Fix mobile version
  • [x] Legend
  • [x] Padding/margin
  • [x] Tool tip position
• [x] Fix scrolling (when scroll a page and hover a map, it starts zooming in/out)
  • Add +/- buttons for zooming like here
  • [x] Disable zooming with a mouse on mobile devices
  • Find any other solution, especially for mobile devices
• [x] Increase readability for Gender, Ethnicity, Age with colors
  • [x] Set minimum group size to 20 to be colored on the map
  • [x] Add small note to the legend, that on the map colored countries with at least 20 responses.
  • [x] Change percentage groups according to new "leaders"
  • [x] Edit color palette for Ethnicity and Age
• [x] Increase readability for age
  • [x] Reorder pie charts for consistency
  • [x] Find a way to avoid repeating aged
• [ ] Make a user research about section all, because it has weird logic
• [ ] QC

[krisgesling]

I've fixed the excessive file loading and the flickering has stopped even thought I haven't put any transitions in, so looks like the DOM is quick enough. Have changed the colors, not quite to your suggestion but see what you think. Tweaked the sizing further and added an additional breakpoint. Let me know if it's still too big on your screen. Changed the tooltip descriptions for age but it doesn't look that great, so I'll keep thinking about different wording. Changed the 'All' map to be called 'Location' and changed the descriptive text to make it clearer for the user. Does that help with the weird logic?

[SamAI-Software]

<- back to checklist

@krisgesling looks great and I like tabs colors! And yes, it fits my screen now. Also after my PR the navbar will be even smaller, so all good :+1:

Changed the 'All' map to be called 'Location' and changed the descriptive text to make it clearer for the user. Does that help with the weird logic?

Yes, it's better, but as I said, user research will be the best decision. We can just ask campers about it, when it's done.

Also we can change the "water" color to transparent, and put the color legend inside the map.

Map 1

Map 2

Map 3

Map 4

I like map 1 & 3, but others also good.

[SamAI-Software]

<- back to checklist

Btw, we need to work a bit more on mobile version. Don't worry abt nav, it's already fixed in my PR.

If we set "water" color to transparent, the problem with Location tab should be fixed by itself.

And you can probably make map wider. Definitely left side 10px, may be right, too.

[krisgesling]

Changes made:

• Changed water color
• Removed margin for screens under 900px
• Moved legend to sit on map in line with bottom right corner.
• Rezise legend on smaller screens.
• Moved description below legend
• Turned off the default pie sorting in D3
• Added minimum response size of 20 and new groupings based on the change. Also changed the final legend to be 26+% instead of 26-100% as it seemed like it was suggesting some country was in the 50+ higher range.

In regard to scroll zoom this is currently what allows mobile users to pinch zoom. Also on mobile devices while scrolling down the page a similar thing happens when you try swiping on the map you move the map instead of scrolling the page. So I can replace them with arrows and +/- buttons but it will be very slow navigating the map particularly on a mobile device.

[SamAI-Software]

<- back to checklist

Great! Looks awesome on all my screens! :+1:

A few small issues:

Groups

Change percentage groups according to new "leaders"

Probably for ethnicity map we can separate Canada(27%), USA (31%) and Nepal (30%) from South Africa (63%), Thailand (52%), Malaysia (58%), South Korea (54%), etc.

E.g. 0-10%, 11-15%, 16-20%, 21%-35%, 36+%

---

Colors

Also colors are very similar at ethnicity and gender maps, which makes it hard to read. (Especially last 2 colors)

Good example is Age map, because it goes from very light color to very dark one, so it's very easy to spot the differences between countries, and that's exactly the reason to make a country breakdown.

[SamAI-Software]

<- back to checklist

Better make it right side & smaller & italic & opacity same like at the bar charts v2.1