Gender breakdown per country

[QuincyLarson]

We could use a D3 map visualization to show the proportion of male to female developers in each major country.

[krisgesling]

To show the rough proportion for each country at a glance, shall we have them filled using a colour scale indicating proportion eg strong blue for 100% male through to strong pink for female (or can use non-stereotypical colours)?
Could then have the country name and stats eg Australia - 43% female : 57% male shown either when you zoom in close enough or as a tooltip on hover.

[QuincyLarson]

@krisgesling Yes - I think that is good. We can put a note that less than 1% of respondents answered other than male or female, so we've left them out of this visualization. I don't blueness or pinkness will be sufficiently clear but you could try.

[krisgesling]

Hey I started working on this today. In case anyone else is lurking you can see the current version here:
http://codepen.io/krisgesling/pen/GZwYKV?editors=0010
Just used 4 starkly different colours for the moment to make sure the code was working and based on a non-male:male ratio

• White = no data (or not seeing the data due to country name mismatch between geoJSON and surveyData)
• Blue < 0.34
• Yellow < 0.67
• Pink >= 0.67
  As you'd expect with the tech sector, the map is looking very blue.

I thought having each country multiple colours would make things very confusing so thinking I'll add a tooltip with the relevant info for each country - number of female; number of agender, trans or genderqueer; number of male; number who didn't respond.

Also wondering if I should vary the opacity of the colours based upon the number of people in each country. Just trying to find a way to show that USA's ratio is based on thousands of coders so is statistically stronger than say Mozambique who have two coders who identify as different genders making it an even split.

Also worth noting I based 'country' on citizenship rather than current residence.

Any suggestions or collaborations most welcome.

[krisgesling]

Changelog:

• pie chart on mouseover to display gender breakdown per country
• zoom to enable users to find their country
• changed country fill colour to a scale of the total number of responses received

To do:

• responsive sizing and centering of geo paths
• limit panning to bounds of map
• mobile considerations - mouseover events work on touch, but it will be difficult to navigate on a small screen, maybe add a close button to the tooltip div and make it fill the screen for smaller devices.

http://codepen.io/krisgesling/pen/GZwYKV?editors=0010

[krisgesling]

Fully responsive layout added and cleaned up the code a lot.
Still no pan limiting but no one has mentioned it yet so maybe it doesn't matter that much?
Hosted on Github pages if anyone is looking to fork it
https://github.com/krisgesling/FCC-Gender-Map

[SamAI-Software]

Shortlist to improve this visualization:

• Recover a previous map with amount or respondents per country (set it to default)
• Add buttons feature to switch between maps (CountryLive, Gender, Age)
• Add avg. Age map