seiyuu-ranker Svelte Themes

Seiyuu Ranker

Visualise which seiyuus were the most prolific in a given year or season.

Seiyuu ranker

A form to determine which seiyuus (voice actors/actresses) were the most prolific in a given year or season. It gets all its information by querying the AniList database.

Example

Form Example output
Form Example output for whole of 2020

Get started

Install the dependencies...

cd seiyuu-ranker
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Usage

Just fill in the form and submit it! For whole-year queries, you will likely have to wait an extra minute for all the requests to complete due to AniList's rate-limiting. But don't worry; the app will tell you at the time if it does have to wait due to rate limiting.

Submitting this form executes a fair few queries; it's easy to go over 100, for example. So as not to pummel the AniList DB too hard, I run requests back-to-back and use mock data where possible during development (see the .json files in the public folder, which I don't guarantee to all follow the latest schema).

  • You can switch to using existing mock data by editing src/App.svelte to switch the mock param to true.
  • You can print out mock data of your own by editing src/App.svelte to switch the printResponse param to true. This will cause the response data to be written into an element at the start of the results section.

Top categories

Loading Svelte Themes