Rick and Morty Data Viz for representing characters screen time. Using a stacked area chart and treemaps, in a rick and morty themed react based website.
Process book link: https://docs.google.com/document/d/10QZLrAD1B8KyROV4MddCoAbmHzg4DHS3jWi8olJR0mQ/edit?usp=sharing
All of the code is our own except a simple skeleton for a treemap(in d3.js) and dropdown bar(in js). We also used the d3 library and a simple library for icons we use throughout our websites from fontawesome.com.
- Open a terminal in the project directory
- In the terminal type the command "cd react-app-files"
- If this is the first time running the website locally type the command "npm i"
- Lastly type the command "npm start"
- The website should pop-up, if not it is located in local host 3000
The website is made with React and Material UI. Besides D3, there was also a Chart JS code in the early versions of the app. The code architecture follows the classic structure with components for each section of the website. Our main website runs on node.js server. For our secondary websites we used glitch to host them, running them on http server.
The introduction section contains the title and a background gif.
Staked area chart
Tree map chart
Footer
Website for treemaps
Link to main website: https://dacs30.github.io/final/
Link to website with just treemaps: https://rickandmortyfp.glitch.me/
Link to video: https://drive.google.com/file/d/1SRcv2gGc4mXVZa7gMXJ80TmX6y1y9Kez/view?usp=sharing
Inspiration: https://towardsdatascience.com/the-office-story-thats-what-the-data-said-224e8a6f47e
Dropdown: https://www.youtube.com/watch?v=f_E5d9Gt5nM&ab_channel=BeforeSemicolon
Treemap: https://www.d3-graph-gallery.com/graph/treemap_basic.html
- This final project is adapted from https://www.dataviscourse.net/2020/project/
Data: https://www.kaggle.com/andradaolteanu/rickmorty-scripts