Comments (6)
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
from 2016-new-coder-survey.
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
from 2016-new-coder-survey.
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.
from 2016-new-coder-survey.
@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.
from 2016-new-coder-survey.
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.
from 2016-new-coder-survey.
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
from 2016-new-coder-survey.
Related Issues (20)
- What makes someone more or less likely to prefer remote work?
- What are some interesting observations about parents learning to code, esp. single parents/primary caregivers? HOT 2
- Feedback on Survey and Future Survey Questions HOT 4
- List of interesting facts HOT 1
- List of interesting visualizations HOT 5
- Which country pays more to software development and IT employee who is 25 - 30 years old? HOT 1
- Podcast breakdowns: hoursLearning, TimeProgramming? Demographics? HOT 4
- Preferred Podcast by Role?
- Cross data visualization
- What drives you to become a developer? HOT 2
- Bear
- Add FCC favicon
- Check map data HOT 5
- are minorities landing jobs during / after completing a code camp?
- Problems with Expected Earning HOT 3
- The meaning of the field IsSoftwareDev? HOT 2
- Population data in 2016? HOT 1
- Competence
- Why are older applicants decreasingly likely to get a job after bootcamp?
- I am new here and want to learn coding HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 2016-new-coder-survey.