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.
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.
- Timeline of Comic Series: Travel back in time and track when each comic series was published with our easy-to-read interactive line graph.
- Interactive Neural Network of Characters: Explore the intricate social connections between all your favorite Marvel characters with our dynamic and interactive neural network.
- Visit MarvelVerse: Click on the link to be directed to the main website.
- 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.
- Filter: Use the filtering options provided to refine the data shown in the visualizations.
- 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.
- 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.
- Lee Morel (ljanzen) - GitHub Profile
- Christopher Bendix (cbendix) - GitHub Profile
- Patrick Park (knu0815) - GitHub Profile
Special thanks to the teaching team of CSE442 at the University of Washington for guiding us through this project.
To start contributions:
- Clone the repository
- Navigate to the code directory
npm install
npm run build
- To see your code progress type
npm run preview
, or use vite's built in hot reload feature withnpm run dev
To submit contributions: Please do not submit your commits directly to main, create a new branch.
git checkout -b <newbranchname>
- Work in your local branch, commit any major progress locally using:
git commit -m "commit messsage"
- When you are ready do a
git pull
git push
- 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.
This project is licensed under the MIT License. Check LICENSE
file for more details.
For any further queries or information, reach out to lee@morels.me.