imshentastic / journey-of-arabica

Journey of Arabica is a guided visualization of how Arabica coffee is created and made, as well as offering insight on various properties of Arabica coffee from around the world. The website features a single-page app that immerses the user in the creation of coffee while offering valuable statistics. Coffee bean review dataset was gathered from https://database.coffeeinstitute.org/

1. Background and Overview

Journey of Arabica is a guided visualization of how Arabica coffee is created and made, as well as offering insight on various properties of Arabica coffee from around the world. The website features a single-page app that immerses the user in the creation of coffee while offering valuable statistics. Coffee bean review dataset was gathered from https://database.coffeeinstitute.org/

2. Functionality

In Journey of Arabica, users will be able to scroll up and down through the website, observing DOM elements moving around the screen depicting the life cycle of a coffee bean. They will also reach an interactive graph visualization that will show reviews of Arabica coffee by country and region. They'll also see a chart visualization showing reviews of the coffee by processing method.

--Features--

1. Create simple lifecycle of coffee bean as user scrolls through website
2. Create interactive graph showcasing reviews of Arabica coffee by country and region
3. Create interactive graph showcasing reviews by processing method

3. Wireframes

4. Architecture and Technology

• D3.js for interactive visualization
• Javascript
• HTML + SCSS
• Webpack & Babel to bundle and serve up various scripts

5. Implementation Timeline

Day 1:

• Set up project's webpack
• Go through D3 tutorials

Day 2:

• Set up scrolling infographic with DOM elements

Day 3:

• Set up barchart for coffee bean review per country/region
• Set up chart for coffee bean review per processing method

Day 4:

• Clean up features and fix additional CSS

6. (Bonus Features)

• Add additional graph visualization for comparison against robusta and kona type beans
• Allow user to select options while scrolling through page to make interactive choices
• Allow user to toggle between options for additional columns when visualizing dataset