music-stats timeline

Visualization of last.fm stats. Showcasing a ratio between different aspects of how musical taste evolves (or proving that it doesn't).

Status

Ready, but there's a short todo list to finish.

How does it look like?

Design

This is a dataviz app that runs a couple of steps:

1. Fetches a static dataset and prepares data for rendering (initializes scales and helpers).
2. Plots data on canvas and shows stats as DOM elements using HTML strings as component templates.
3. Listens for user interactions (mouse and keyboard events) and highlights points on the plot.

Codebase is organized according to simple rules:

src/
├── components/  # "dumb" components - layout and styling
├── containers/  # "smart" components - plot rendering and user interaction handlers
├── dataset/     # initial data transformation steps
├── lib/         # configured dependencies
├── stores/      # stateful classes acting as data accessors
├── utils/       # stateless general purpose utils, no app logic
├── app.js       # app entry point
└── config.js    # hardcoded values, including plot-specific styling

Among containers and components there are <...Interactive /> classes that act as decorators. Such classes add various handlers that define behavior for classes they decorate (e.g. highlighting on mouse move).

What makes it possible?

data source

Datasets are supplied by scripts and served from the following URL structure (see src/config.js):

data/
├── years.json              # a list of periods available, e.g. ["2012", "2013", ..., "2022", "all"]
├── years/                  # scrobble lists for each period
│   ├── ...
│   ├── 2022.json
│   └── all.json
└── artists-by-genres.json  # enables the legend and colorcoding

dev deps

• linter: eslint
• bundler: rollup; babel + terser for prod builds
• unit tests: tape + tap-spec + @babel/register + ignore-styles

deps

• templates: htm + vhtml + classnames
• dataviz utils: d3-scale, d3-color
• router: micro-conductor

colors

Color ranges for genres are picked from Cynthia A. Brewer’s ColorBrewer.

Development setup

$ npm ci              # install deps
$ npm run lint        # lint scripts
$ npm test            # run unit tests
$ npm run build:dev   # produce a build artifact for local development
$ npm run build:prod  # produce a minified build artifact for production
$ npm run serve       # run a local dev server (port: 8000)
$ npm run deploy      # deploy to GitHub pages