As part of a group project, my partner and I created an interactive visualisation that attempts to show how political views in Europe have changed over the last twenty years, and how some of these changes are correlated with major world events.
You can view the visualisation here: https://www.jbm.fyi/ess/.
The dataset used is the European Social Survey (ESS). The ESS is an is a cross-border academic survey conducted across Europe. Every two years, around 40,000 interviews are carried out face-to-face across a cross-sectional sample of European citizens. This visualisation aims to show visually how world events have affected the political views of Europeans over the last 20 years and uses data from all 9 rounds of the ESS. The world events were manually selected from the Wikipedia article: Timeline of the 21st century.
My primary focus was the implementation of the visualisation including processing the data; whilst my partner focused on the design of the visualisation and also wrote a short paper on the insights that could be gleamed from the dataset. The only external library used by the implementation is D3 .
A timeline slider was implemented to both allow the user to filter by year, and also to display major world events that happened during each year. The data for the timeline is taken from a CSV that was manually populated with the most interesting world events from Wikipedia . The slider is implemented as an SVG with event handlers allowing the indicators to be moved to adjust the year range. Figure 2 shows the completed timeline slider.
The bar chart area is also implemented as an SVG. The axes are drawn as arrows based on an example by The New Code . The data to be plotted is determined by the selected data series, selected countries and time range. The x-axis of the bar chart can be set to either countries or years. If countries are selected, country code is used instead of full country name. The mapping between country and code is provided by a second CSV . The data can be further broken down into a number of categories such as gender. If the “none” option is selected, the bars are coloured according to the same gradient as on the map. Otherwise, colour is used to indicate which category the bar belongs to and a legend is provided. D3 is used to calculate scaled sizes for the bars and, using event handlers, a tooltip showing the bar category and exact value is shown on the bottom left of the screen to help users obtain precise measurements. The implemented bar chart is shown in figure 3.
The code for the project is available here: https://git.jbm.fyi/jbm/ESS_Visualisation