Skip to content
Beautiful and interactive data visualization for last.fm profiles. Built with React and D3.js.
JavaScript CSS HTML
Branch: master
Clone or download
David Omar Flores Chávez
David Omar Flores Chávez Update Changelog
Latest commit 2fca3f9 Jun 29, 2019

README.md

Last.fm Stats

Visualize all your Last.fm activity in a beautiful and interactive way.
Try Yours

LastfmStats screenshot displaying davidomarf yearly heatmap

Table of Contents

Features

bold features are implemented, em features are a work in progress, italic features are planned, but not yet in development.

Data Visualization

  • yearly heatmap: that shows the most and least active days, over a yearly period. Measured by the number of scrobbles. It defaults to the period of [1 year ago, today].

  • yearly time series: that shows the number of scrobbles per week, over a yearly period. For every week, it shows the song, artist, and album most listened to. It defaults to the period of [1 year ago, today].

  • yearly artist time series: that shows the number of scrobbles from a single artist per week, over a yearly period. For every week, it shows the most listened to song. Allow to switch the measurement method between scrobbles and listening time.

  • overall decades histogram: that shows the number of [scrobbles, unique tracks] for songs originally released by decade.

  • language distribution (pie?): that shows the languages proportion for the [scrobbles, unique tracks] in the library.

  • explicit vs. non-explicit: that shows the percentage of [scrobbles, unique tracks] with explicit content.

Playlist creation

  • The n most listened to [songs, artists, albums] for every [day, week, month, year], over [week, month, year, overal, custom].

Tools

This project is being built using React.

To display page sections as a fullscreen element, we use fullPage.js

For the visualizations, we use d3.js.

Installation

To use the tool, you just need to visit https://lastfmstats.herokuapp.com/

To contribute with the development you'll need a working copy of the repo in your working machine.

  • You'll need to have npm or yarn installed.

  • Fork the repository.

  • Clone and open the directory

    $ git clone git@github.com:{user}/lastfm.git
    $         # https://github.com/{user}/lastfm.git
    $ cd lastfm
  • Available scripts

    • npm start / yarn start
    • npm test / yarn test
      • Launches the test runner in the interactive watch mode.
    • npm run build / yarn run build
      • Builds the app for production to the build folder.

License

MIT

You can’t perform that action at this time.