In this post, we share the positive experience of working with Zalando’s Tech4Good Guild, whose members collaborated with WikiRate to explore ways to create data-visualizations fed by WikiRate’s live API. As a first output, they have developed the Emissions Widget, an embeddable dynamic chart that displays the yearly amount of direct and indirect emissions of companies that are among the world’s largest corporate greenhouse gas emitters. The visualization uses open-source code, so anyone can access the code or embed the emissions widget into a webpage or blog.
A Tech4Good-WikiRate Collaboration
The Tech4Good Guild is an employee initiative and an open platform where Zalando employees with diverse professional backgrounds — ranging from Product Management, Engineering, UX to Business centered roles — come together every second week and contribute with their skills to projects that have a positive impact on people and planet. In 2019, WikiRate joined the Guild as its first collaboration partner.
The challenge that WikiRate brought to the Tech4Good Guild was to develop an open-source widget that would help to contextualize companies emissions data.
The Emissions Widget
In 2019, WikiRate launched an open data project to collect environmental impact data on the 100 most greenhouse-gas-emitting companies in the world, as set out in the Climate 100+ list. As a result, the platform hosts several datasets that are used and built upon by researchers, but to reach people beyond this circle of experts, the Guild members considered that it would be useful to create a tool that would:
- Deliver a ready-to-use JavaScript-based widget that visualizes a sample of WikiRate data in a dynamic chart, and which can be easily integrated by anyone into their own website, whether it’s an article on a NGO blog or a journalistic essay or even into a very scientific context.
- Kickstart a broader community effect by publishing the widget open source so people can explore and get inspired to do the same for their own use cases. To enable that, the community should be able to fork and modify the code of the widget so it matches their own use cases, both in terms of the actual domain and related WikiRate datasets as well as the visual representation of it.
- Identify gaps and issues in the WikiRate API.
The Process
During the second half of 2019, the Guild worked in bi-weekly meetings to design and develop the open-source widget that would pull in data in real-time from the WikiRate platform. The first work sessions were mainly centered around deciding what type of widget could be designed and what UX features would be desired.
At the time, one of the most completed datasets contained information on the amount of GHG emissions of the world’s hundred largest corporate greenhouse gas emitters in 2017 and 2018.
The Guild members decided to go for an interactive chart that would make it easy to identify the performance of companies each year separately and in-comparison to visually communicate if their performance is better or worse in comparison to the previous year.
The next step was the technology selection. Initially, the team chose to use the React framework, but then switched to Vue.js since it proved to be more lightweight. In the end, the engineers even considered removing the library in its entirety, since the final UX concept turned out to be less interactive and complex than initially planned. For the actual charting functionality, the open source library ECharts was chosen.
Next, the efforts focused on integrating the data into the visualization. The data integration involved frequent communication between Daniel Spaude and Jonny Velez, two software engineers members of the Guild, and Ethan McCutchen, WikiRate’s Chief Architect.
Both teams benefited from these conversations. On the one hand, the Guild members learned about WikiRate data structure, while WikiRate received valuable feedback on its API’s performance. The identified API problems included its payload size, slow performance, and data duplication. In this sense, an additional outcome of the Tech4Good Guild-WikiRate collaboration was the development of a more compact API for the widget.
Currently, the first version of the Emissions Widget is completed and can be embed in any website or blog:
Distribution of the widget as open source
Besides being a fun and interesting collaboration, the Guild’s work has made a big contribution to the WikiRate community since the widget can be replicated, forked or used as template or inspiration for other use cases that want to visualize WikiRate datasets.
Watch this short demo on how you can access or modify the widget code and integrate it into a webpage:
If you want to embed the widget you can place this iframe into your site and your visualization will appear!
<iframe src="https://widgets.wikirate.org/emissions" width="750px" height="700px"/><iframe>This collaboration between WikiRate and the ZGuild volunteer community was presented at RightsCon in its online version during the last week of July 2020, demonstrating how the WikiRate platform is not a mere online database, but a practical tool that can engage different audiences including the more tech savvy!
Interested in developing your dynamic data widget?
If you are Interested in setting up your own research project to collect data or if you’d like to develop another kind of dynamic data widget, we invite you to explore WikiRate Labs, our community site for developers to share code, ideas, resources, or feedback.
You can also write to us at info@wikirate.org — we’d be happy to ideate a data collection project or interface to engage your community in the most impactful way.
WRITTEN BY Lucía Ixtacuy, in collaboration with Daniel Spaude and Jonny Velez.
