folkertjan/RAUTZ

Storytelling website explaining the livelyhood of ghanaian cocoa farmers

RAUTZ - Story of Ghanaian cocoa farmers

Summary

Interactive vue storytelling website which shows insights in the livelyhood of Ghanaian cocoa farmers.
check the live prototype here

Table of Contents

• Install
• Prototype
• Process
  • Concept
  • Code
• To do
• Credits
• Sources

Install

# Install necessary packages
npm install

# Compiles and hot-reloads for development
npm run serve

# Compiles and minifies for production
npm run build

Prototype

check the live prototype here

Process

Concept

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.

Code Journey

While the concept was taking shape and the first designs were created, I made a list of code features the live prototype should have. The designs showed lots of potential for reusable components. Furthermore, there were multiple forms and graphs in the designs that responded to eachother. This called for a way of state management. Both these aspects prompted me to choose for a javascript framework, namely vue.js. I choose that particular one because I've done multiple projects with it already.
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.

To do

• 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

Credits

• Matthias Leuhof - Illustrations, data editing & concepting
• Sam Hofman - UI Design & concepting
• Angelique Janssen - UI Design & data editing

Sources

Dataset

• 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