Mapping the Civic Education in Europe
The first European map of civic education organizations. A project of the Civics Innovation Hub
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
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.
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.