https://github.com/platers/mal-map

Cluster and visualize relationships between anime on MyAnimeList
https://github.com/platers/mal-map

anime clustering data-visualization

Last synced: 7 days ago
JSON representation

Cluster and visualize relationships between anime on MyAnimeList

• Host: GitHub
• URL: https://github.com/platers/mal-map
• Owner: platers
• Created: 2022-01-05T22:12:22.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-28T12:53:09.000Z (about 2 years ago)
• Last Synced: 2025-01-16T17:26:11.691Z (14 days ago)
• Topics: anime, clustering, data-visualization
• Language: TypeScript
• Homepage: https://www.malmap.net/
• Size: 26.1 MB
• Stars: 236
• Watchers: 3
• Forks: 14
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MAL Map

Cluster and visualize relationships between anime on [MyAnimeList](https://myanimelist.net/).

![](assets/overview.png)

## Description

MAL Map is a web application that visualizes anime relationships on [MyAnimeList](https://myanimelist.net/) and [AniList](https://anilist.co/home). Edges are extracted from the recomendations of users.

#### Clustering

The graph is clustered with multi-level modularity clustering. Some clusters are merged to produce a simpler visualization.

#### Layout

The map layout is generated by a [particle force simulation](https://github.com/d3/d3-force). 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](https://www.malmap.net/#animate=true).

## 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. Python3 is used for clustering. Install `networkx` and `cdlib` with `pip install -r requirements.txt`.

3. Run `npm run reset` to build and run the whole data pipeline. This will pull all data from MAL/Anilist and create various txt and json files for the frontend. Use `npm run layout` to skip the data collection step.

#### 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. http://localhost:8080/#animate=true will show a live view of the layout.

## Acknowledgements

#### Clustering

- https://cdlib.readthedocs.io/en/latest/

#### Layout

- [d3-force](https://github.com/d3/d3-force)

- [d3-force-reuse](https://github.com/twosixlabs/d3-force-reuse)

#### Frontend

- [PIXI.js](https://www.pixijs.com/)

- [PIXI Viewport](https://github.com/davidfig/pixi-viewport)

- [Svelte](https://svelte.dev/)

#### Data

- [MyAnimeList API](https://myanimelist.net/apiconfig/references/api/v2)

- [AniList API](https://anilist.gitbook.io/anilist-apiv2-docs/)