dev deps: typescript, sass, webpack, jest.

deps: leaflet, d3-scale, d3-scale-chromatic, d3-color, micro-conductor, htm + vhtml + classnames.

There are two files the map relies on:

• data/world.geo.json - generated by GeoJSON Regions
• data/artists.json - loaded from Last.fm and MusicBrainz, cleared and aggregated by music-stats scripts

Flags (1x1) are taken from flag-icon-css.

No rendering/templating framework is used, though UI consists of several component-like (React-inspired) classes.

You can always find a .render() method there - in <PlaycountMap /> it assembles children components together, in other (presentational) components it returns HTML as a string (using htm based on tagged templates) and relying on .props + .state.

DOM event handlers are bound through .subscribe() methods.

Presentational components actually extend Leaflet's Control, so .onAdd() is implemented there (responsible for .element rendering).

Styles are organized as SASS files alongside the components. BEM methodology is used for naming.

Create a .env file and fill its values according to .env.template:

• MAPBOX_ACCESS_TOKEN (see Mapbox account and docs)

$ npm ci              # install deps
$ npm run lint        # lint scripts and styles
$ npm test            # run unit tests
$ npm run dev         # run a local dev server
$ npm run build:prod  # produce a build artifact
$ npm run deploy      # deploy to GitHub pages