LeeJMorel / MarvelVerse

MarvelVerse is an interactive visualization project that explores the Marvel Comics universe through dynamic network graphs. Gain insights into hero teams, their connections, and the evolution of Marvel over time. This repository contains the source code and data for the MarvelVerse website.

MarvelVerse

Welcome to MarvelVerse! Dive deep into the Marvel Universe with our visually stunning and informative data visualizations, meticulously curated and created for CSE442, a data visualization course at the University of Washington. Our final for this course was creatively built and proposed by our team to showcase the skills we learned in the course and beyond. You can learn more about this by reviewing our PROCESS page detailing what went into building the MarvelVerse.

Features

MarvelVerse has two possible views, one to explore the comic publications over time and the other to examine the social connections of characters. To better examine the hero teams that define so many comics we also include an array of filters for you to narrow down and view the social networks and timelines of the various Marvel teams.

1. Timeline of Comic Series: Travel back in time and track when each comic series was published with our easy-to-read interactive line graph.
2. Interactive Neural Network of Characters: Explore the intricate social connections between all your favorite Marvel characters with our dynamic and interactive neural network.

Getting Started

1. Visit MarvelVerse: Click on the link to be directed to the main website.
2. Navigate: Use the top navigation bar to switch between different visualizations. If you are on a mobile device this is located in the top of the left hand navigation bar.
3. Filter: Use the filtering options provided to refine the data shown in the visualizations.
4. Interact: The visualizations have a number of ways to zoom and examine each data point to let you explore the Marvel Universe in depth. We provide a video tutorial below for the network visualization interactions to demonstrate how to get started.

Built With

• Vite: React-TS: A blazingly fast and modern frontend tooling.
• Marvel API: The source of our rich Marvel universe data.
• Kaggle: Author Deep Contractor aggregated some of the Marvel API data into .csv files for ease of use.
• React SVG TimeLine: The magic behind our interactive and dynamic timeline visualizations.
• React Sigma.js: Working together with Gephi to build our engaging network visualizations.
• Material UI: A robust UI framework for accessible components and a smooth user experience.

Authors

• Lee Morel (ljanzen) - GitHub Profile
• Christopher Bendix (cbendix) - GitHub Profile
• Patrick Park (knu0815) - GitHub Profile

Acknowledgments

Special thanks to the teaching team of CSE442 at the University of Washington for guiding us through this project.

Feedback & Contributions

To start contributions:

1. Clone the repository
2. Navigate to the code directory
3. npm install
4. npm run build
5. To see your code progress type npm run preview, or use vite's built in hot reload feature with npm run dev

To submit contributions: Please do not submit your commits directly to main, create a new branch.

1. git checkout -b <newbranchname>
2. Work in your local branch, commit any major progress locally using: git commit -m "commit messsage"
3. When you are ready do a git pull
4. git push
5. Navigate to github and then submit a pull request for review of your given branch

If you have any feedback or would like to contribute to the project, please raise an issue or submit a pull request.

License

This project is licensed under the MIT License. Check LICENSE file for more details.

Further Information

For any further queries or information, reach out to [e-mail].