Mapping the Civic Education in Europe

THE CIVICS is the first pan-European NGO promoting civic education in Europe by building networks, enabling exchange and empowering citizens.

It is engaged in a project to map and connect civic education organizations in Europe. To enable this, it has conducted a survey of organizations in that field.

"THE CIVICS" commissioned us to visualize the data collected in the survey and to develop a platform to explore the organizations and their connections.

The platform has different views:

• A home page map and description of all organizations
• A connection diagram of the organizations within each country
• A long-page story with the results of the survey https://mapping.thecivics.eu/reports

For those views, we developed a few custom visualizations and implemented some other more conventional ones.

Organizations are the main entity of the survey and are represented, consistently over the site, by a data-based fingerprint that represents three main aspects: the type of entity, the main field of work, and the civic education focus, in a sort of bubbly radial plot.

The most sophisticated visualization we created for this project is a radial network diagram that shows the connections (collaborations) among organizations for each country.

• Users can choose the criteria in which every node is distributed around the circle.
• A filter function allows for reducing the number of organizations displayed by pushing the non-selected ones to an orbit farther away from the center.
• Finally, by selecting one organization, the corresponding node moves to the center of the diagram, reshaping the network diagram, while a detail panel opens from the right. The sum of these three interactions creates a quite complete explorable device.

Tasks and challenges

We were tasked with the whole process of transforming the data into a web platform:

• Data architecture modeling
• Design
• Development

The platform is a multipurpose solution that enables the clients to display, update and reuse their data in different contexts. We designed a control panel to download the different visualizations to be used within a printed publication. The same charts used in the online report: have a "printed format" with some details ready to be used in a printed publication.

Technologies

For the frontend, we used our usual stack of technologies: Vue.js/Nuxt, D3.js

For the backend: the client needed to periodically update data and we developed our own integration with a "no-code Database" (Seatable). Seatable allows our client to update the data and also to create new polls to collect new data.