/MAL-Map

Cluster and visualize relationships between anime on MyAnimeList

Primary LanguageTypeScript

MAL Map

Cluster and visualize relationships between anime on MyAnimeList.

Description

MAL Map is a web application that visualizes anime relationships on MyAnimeList and AniList. Edges are extracted from the recomendations of users.

Clustering

The graph is clustered with multi-level modularity clustering, using code by Fabrice Rossi. Some clusters are merged to produce a simpler visualization.

Layout

The map layout is generated by a particle force simulation. At first all of the nodes are represented by a single particle. The simulation is then run for a number of iterations. Each iteration all particles are split into new particles, one for each sub-cluster. Appropriate forces are applied between particles to attract related clusters together. This process results in a visually pleasing layout. The layout process can be seen live here.

Future work

Manga, Books, Movies, etc.

It should be reasonably easy to adapt this application to other domains, feel free to extend this project.

Contributing

Pull requests are welcome!

Building

MAL Map is two projects: a backend node app for collecting data and clustering, and a svelte frontend client. The frontend depends on some files in the backend and its outputs.

Building the backend

  1. Open the /data-collection directory and run npm ci to install all dependencies.
  2. Run npm run all to build and run the whole data pipeline. This takes a minute or two and will create various txt and json files for the frontend.

Building the frontend

  1. Open the /svelte directory and run npm ci to install all dependencies.
  2. Run npm run dev to start a localhost server with live reloading.

Acknowledgements

Clustering

Layout

Frontend

Data