This is a dashboard which displays a variety of European gender equality statistics across different graph types. All data was originally collected by the European Commission and the European Institute for Gender Equality.

The graphs display and consist of data relating to the following issues in Europe: The division of men and women who make up CEO and Executive level employee positions; the percentage of males and females having attained tertiary level education; the pay gap that exists between men and women; and various opinions of people in Europe on such issues. There is also a graph representing a Gender Equality Index (data for which was generated by the European Institute for Gender Equality and is based on data from the following domains: work, money, knowledge, time, power, health violence and intersecting inequalities).

The purpose of this dashboard is to provide and display information to the user about gender equality issues within Europe. The information is displayed across different graphs, providing a visual representation of statistics and figures for the user in a simple and easy to navigate format. The user can view statistics on any country/countries of their choice or of all countries at once should they wish to compare.

In terms of colour, the white background keeps the design minimalist and clean and makes the colourful graphs pop - an attractive visual for the user.

This dashboard is divided between two navigation tabs on this site, meaning that the user can navigate between the graphs very easily and efficiently.

The first tab, Stats, displays 4 graphs in one table from which the user can select the graph they want to view. Only one graph is visible at a time; the idea of this being to make efficient use of space and not to over-load to user with too much information.

The second tab, Questions, displays 3 graphs laid out in 3 rows. This means that only one graph is displayed at a time to the user who can simply scroll down the page to see the other graphs. This layout is very user friendly and attractive to the user’s eye as they are not over-loaded with too much information or graphics.

By default, all countries are on display at once on every graph. However, the interactive graphs mean that the user can select the country (or countries) of interest and this country will be the only one on display when they navigate through all the graphs on the page. This can easily be undone by selecting the reset button which enables the user to go back to the default position easily. The user has an option to select the country by either clicking the country’s bar or by selecting the country from the dropdown list of countries.

As a user, I want to compare the gender pay gap and gender division of management level employees for both Ireland and Sweden. I simply select Ireland and Sweden’s bars in any of the graphs, and I can now navigate throughout the graphs on the page to view various statistics for both Ireland and Sweden - the bars quickly displaying any disparities between the two countries.

Once done, I can then select the reset button to display all countries should I wish to compare or simply view different countries.

Wireframes were drawn manually and can be found in the wireframes folder.

• linkable sections on the site from the navbar
• dc Bar Charts
• dc Row Charts
• dc Composite Chart
• dc JavaScript Reset All Button (allows the user to reset all graphs back to default position)
• dc Select All dropdown (allows the user to select a country to view)
• home page which informs the user about the dashboard and how to use it.

• HTML
• CSS
• Bootstrap - front-end framework used due to its user experience focus and ease of use (https://getbootstrap.com/).
• Google Fonts for downloading different font styles (https://fonts.google.com/).
• D3.js - a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS (https://d3js.org/).
• JQuery - used to simplify DOM manipulation.
• JavaScript language used to create and execute the graphs (https://www.javascript.com/).
• Popper.js - a JavaScript library for enabling dropdown.

The site was tested on 21" monitors, 15" and 13" laptop screens and on the following phone screens: iPhone 6/7/8; Galaxy S5, Pixel 2; Pixel 2XL; iPhone 5/SE; iPhone x; . It was also tested on iPad and iPad Pro screen sizes. The site is responsive and working on all screen sizes.

The site was also tested using Internet Explorer and Firefox as well as Chrome.

Manual testing was performed to ensure that the following features worked effectively:

• All navbar links work correctly.
• The site is responsive across all screen sizes and devices.
• The graphs are all interactive:
• When one or more county is selected on any of the graphs or by using the drop-down menu, all other graphs on the page display only the selected country/countries.
• The reset button resets all graphs and the countries go back to default position(all displaying).
• The select dropdown menu works across all graphs.

The site is hosted on github pages (https://katiemodonnell.github.io/gender_equality_europe_dashboard/).

It is deployed from the master branch.

To run this site locally, in your terminal enter: git clone katiemodonnell/gender_equality_europe_dashboard

The photo used on the home page of this site was obtained from https://unsplash.com/.

All data came from the European Commission and the European Institute for Gender Equality.

Gender pay gap

https://ec.europa.eu/eurostat/statistics-explained/index.php?title=Gender_pay_gap_statistics https://ec.europa.eu/eurostat/tgm/table.do?tab=table&plugin=1&language=en&pcode=sdg_05_20

Education level

http://appsso.eurostat.ec.europa.eu/nui/submitViewTableAction.do

Management Levels

https://eige.europa.eu/gender-statistics/dgs/indicator/wmidm_bus_bus__wmid_comp_compex/datatable

Gender equality perceptions

https://eige.europa.eu/gender-statistics/dgs/indicator/ta_attperc_equal__eb_spec_priority/datatable https://eige.europa.eu/gender-statistics/dgs/indicator/ta_attperc_equal__eb_spec_equalagree/datatable https://eige.europa.eu/gender-statistics/dgs/indicator/ta_attperc_equal__eb_spec_workwomen/datatable