theteacat/lastfm-tag-cloud

A last.fm tag cloud generator, built with Vue!

lastfm-tag-cloud

A last.fm tag cloud generator built with Vue!

Give it a whirl: https://tagcloud.rainosullivan.com/

How are the tags chosen & scaled?

A sample of your artists (up to the size and from the time period you specify) is taken from last.fm via the user.getTopArtists endpoint. For each artist, their top tags are fetched, using artist.getTopTags.

Each tag has a count on each artist that has a maximum value of 100. This count is a percentage of the people who have tagged that artist that tagged it this tag (e.g. if one person tags an artist "Lo-Fi", and a hundred people tag that artist, then "Lo-Fi" would have a count of 1 on that artist.).

Consider the following three example artists, with the following three sample tags and their corresponding counts on each artist:

Artist	Scrobbles	Tag 1: Count	Tag 2: Count	Tag 3: Count
Tennis	2019	Lo-Fi: 100	Indie Pop: 100	Chillwave: 70
Men I Trust	1330	Dream Pop: 100	Indie: 67	Indie Pop: 60
Thundercat	700	Funk: 100	Electronic: 91	Jazz: 74

Before we move on, the sum of each tag's count over all the artists in your sample is calculated, and used as a razor - only up to the top 100 tags by this metric are kept, the rest are discarded to avoid reaching the last.fm API's rate limits.

Two metrics are then taken about each tag from last.fm using the tag.getInfo endpoint: the tag's reach, which is defined as the number of users who have used the tag; and the tag's total (last.fm call this taggings in their docs but it's labelled as total in the actual data???), which is the total amount of times the tag has been used over all artists on last.fm.

Here are some reach and total/taggings values for the tags used above:

Tag	Reach	Total/Taggings
Lo-Fi	32892	160851
Indie Pop	64939	367857
Chillwave	7922	31368
Dream Pop	24113	118911
Indie	253595	2017702
Funk	82092	422156
Electronic	254177	2372062
Jazz	146580	1150923

Now we have all the data, we can start using it.

A score is created for each tag as the sum of the products of the scores of the tag (divided by 100) on each artist, and your scrobbles of that artist. For example, "Indie Pop" from the example above would have a score of (100/100 * 2019) + (60/100 * 1330) = 2541.4.

This score of each tag is then scaled (multiplied) by:

• The sum of the count of that tag on the artists in your sample, divided by the total of that tag from the tag.getInfo endpoint (this is intended to capture how much of the total uses of that tag fall within your sample).
• The number of artists within your sample that are tagged that tag, squared.
• The base-10 logarithm of the reach of that tag from the tag.getInfo endpoint (so, a tag gets twice as big for every factor of 10 people that use it - 1 would be half the size of 10, 10 half the size of 100, 100 of 1000...).

For "Indie Pop", this would be 2541.4 * ((100 + 60) / 367857) * 2^2 * log_10(64939) = ~21.28.

This value is arbitrary, before it is passed to timdream's word cloud generator they're all scaled non-linearly to be in the range of 25-200. If you want to see exactly how this is done, check the CloudBox component's Mounted function. It's not that exciting.

I've tried to make this take into account the "uniqueness" of the tag to a user's library, as if they were all just scored by frequency the biggest tag on everyone's clouds would probably just be "all". If this causes issues for you, I know. See here. I don't care. 🚣

What does the tag filter do?

The tag filter checks tags against an offensive word list, "all", "seen live" and a geohash filter to remove tags that are overly generic/obscene.

The source of the tag filter's offensive word list is Ofcom's September 2016 Attitudes to potentially offensive language and gestures on TV and radio research report. Those used are the medium, strong, and stronger words that are not marked as "least recognised".

Acknowledgements

I'm using timdream's word cloud generator.

lastfm-tag-cloud's Issues

Download button is broken

Must've gotten broken in refactor. Oops.

Add a "download image" button

Create "apply changes" button in the tags list; currently the UX isn't great.

Errors aren't displayed; simply says a non-existent user hasn't listened to something in the last 6 months.

Create a nice favicon

Make artists/tags lists collapsible

Tag ranking system should be more formally defined.

Currently the tag ranking system (as described in README.md under "How are the tags chosen & scaled?") has some reasoning behind it, but nothing too formal. I'd like to have a proper sit down and think about the logic behind the factors currently used and how they should be adjusted.

Add "how does it work?" section to explain why tags are the size they are etc.

Samples of 0 artists (user is inactive/doesn't exist) creates all the UI elements regardless; it should display an error message instead.

Safari mobile stretches canvas out vertically

Remember client's dark/light theme preference & input values.

Implement auto fill & immediate generation if a query string containing at least a username is present in the URL

Tags with ampersands break things!

This is a symptom of the last.fm API, there is nothing I can really do about it. It's literally impossible to get information on the tag "alternative r&b".

See: https://ws.audioscrobbler.com/2.0/?method=tag.getinfo&api_key=97773975bd1d3fdf89b362a27d2b6313&tag=alternative%20r%26b&format=json

First solution shall simply to be to ignore tags with ampersands.

Artists should be toggleable alike tags

Now artist clouds are a feature, there should be the ability to show/hide them in the artists cloud alike tags in the tag cloud. Duh

Custom colours reset on reshuffle

...probably another big caused by the latest refactor, likely an easy stupid fix.

Steps to reproduce

On mobile, chrome:

1. Change one of the colours
2. Tap "reshuffle"

Expected behaviour

Should generate a tag cloud with the colour set.

Actual behaviour

Resets the colours back to their theme defaults (light/dark theme) and generates a cloud with those colours.

Implement a choice of fonts for the tag cloud

Perhaps use the google fonts API?

Tag cloud appears even though a user hasn't listened to anything

Clicking "apply changes" in the tags list doesn't cause a tag cloud reshuffle.

Bring back spotify options

In the original tag cloud generator, it was possible to generate a tag cloud from a spotify playlist. It would be nice to reimplement some other spotify integration (perhaps using long/medium/short term top artists data).

"My tag cloud is full of mean things like 'shit pop' and 'worst taste in music ever'"

🚣‍♂️ <- me, rowing around in a sea of your tears

Refactor styling

@onfe <3

Initial styling

Add hyperlinks for corresponting last.fm pages for each tag, artist & the user

Display metrics for each tag (at least total scrobbles of that tag) for each tag in the tags list.

~join the last.fm discord to make more informal feature requests~ https://discord.gg/7qc2Yu

Improve tag cloud font consistency across browsers.

Implement form validation on username input field

footer links have insufficient contrast

Add "reshuffle" button to regenerate the tag cloud without querying the last.fm API again

"Make it do an artists cloud too!"

~join the last.fm discord to make more informal feature requests~ https://discord.gg/7qc2Yu

Add an optional filter for stupid tags

Aim to get rid of tags that are:

• Geohashes
• Offensive
• Generic ("all" and "seen live")

Artists being not found makes the generator hang

Just need add a handler to the calls to artist.getTopTags for when it returns an err, e.g.:

https://ws.audioscrobbler.com/2.0/?method=artist.getTopTags&api_key=XXX&artist=#1%20%E2%99%AB%20gaming%20music%20mix&format=json

Restyle tags list so artists don't take up as much vertical space

Perhaps make the list of artists that comes after each tag expandable, & only list the first 3 by default?
e.g.

• dream pop: pure bathing culture, still corners, wild nothing...

With an underlined ellipsis that, if clicked, will expand the list.

Replace bullet points in tags list with checkboxes for hiding/showing it in the tag cloud

This will necessitate a "regenerate tag cloud" button.

Allow users to customise tag cloud colours.

Needs some thunk; don't want to clutter the UI too much.

Tags sometimes appear twice due to duplicate tags in the last.fm data.

Bind enter button to start generation; it's getting kinda annoying, I keep expecting it to do this...

Implement word cloud generation

Make artists list more copyable

Tag cloud can get far too tall on widescreen displays

Should be a simple css fix.

Can't reshuffle tag cloud

Also can't change to artist cloud or download.

Suspect this is the case when the number of artists in the sample is less than the chosen max artists.

Add dark/light theme toggle button

Refactor generator code out of app.vue and into assets/generator.js or similar

Theme button doesn't update