RAUTZ - Story of Ghanaian cocoa farmers
Table of Contents
# Install necessary packages npm install # Compiles and hot-reloads for development npm run serve # Compiles and minifies for production npm run build
The Amsterdam office of UTZ asked us to create an interactive product based on a dataset of Ghanaian Farmers by KIT. Their main envisioned goal was to end op with a product that showed insights in the lives of these farmers and ended with an income per family member.
The choices made in the design process can be read here.
Now that we had a framework to write the frontend of the website in, I had to make a decision about the graphs. I’ve looked at a couple of different ways to make graphs in js, namely D3.js and chart.js. The difference between these two is that D3 works with SVG elements and chart.js works with canvas elements. I decided to go for D3, since this library allows for a lot of data editing, calculating and dynamic updating of data. Everytime the state changes in Vue, the D3 charts update with it, which adds a nice flow to the editing of the filters.
- Default select all filter options to prevent people from selecting a too small selection of farmers
- More testing to fix user experience issues
- Some more code cleanup
- Matthias Leuhof - Illustrations, data editing & concepting
- Sam Hofman - UI Design & concepting
- Angelique Janssen - UI Design & data editing
- Bymolt, R., Laven, A., & Tyszler, M. (2018) [dataset]. Demystifying the cocoa sector in Ghana and Côte d’Ivoire. Retrieved from https://doi.org/10.7910/DVN/82TWZJ, Harvard Dataverse, V2