hkstm/musex

Interactive visualization of multi-dimensional audio analysis data allowing for exploration and analysis enhanced by clustering techniques and a multi-view design powered by D3.js & MongoDB. Group project for the Information Visualization course of the Universiteit van Amsterdam, 2021.

musex's Issues

Create the project skeleton

Create the rough project skeleton / template a simple flask backend + ES6 frontend

Think of a REST API

Reschematize collections so they have same structure (mainly different names/types for id) and update references to old schema

Functioning search bar

People can search for an artist and then the graph must automatically zoom to that level

Optimise k for genre imputing

Add a counter for the different genres

I added some random values with html text, as im not sure if such a counter is actually needed? We'll se what Yunhua says during the meeting

Add the zooming component to the visualization

Add way to play track if given preview URL on track zoom level

Say a link like https://p.scdn.co/mp3-preview/641fd877ee0f42f3713d1649e20a9734cc64b8f9 is provided in the field preview_url of a track in the graph endpoint add an 'intuitive' way to listen to the preview of the track

Add README.md

Add playlist on click

Make node size variable depending on popularity

Cant do this yet

Add recommendations on click

When people select one node, the recommendations should be visible as well.
Different stroke color for recommendations

Allow predictions on User Profiles

Train classifier on audio analysis data to predict genre of album/artist. Some of this genre data is missing and making an educated guess for what it could be could make the visualization more complete. Don't think it is very relevant for grading tho.

Create the axis

The axis should change(interpolate) when people zoom, otherwise the axis values dont make any sense

Use an invoke command to restore the mongodb database

Design and implement a simple API to let the frontend fetch data in a specific region for a specific zoom level

Lint and fix all warnings

High priority: Retrieve data from mongodb instead of using dummy data

Convert the existing heatmap to a navigateable minimap

Prereq: #22

Minimap that can be used to move inside the view depending on the zoom level

Switch between graph and barchart

Or any other type of chart. Low priority

Adding different divisions that allow for multiple views

I added the different divisions! They should be working

Add album collection

Add a time slider for the wordcloud so that you can see the most popular artists/ genres over the years

Automatically unzip the data

Mouse over event to show the node label

Create an axis selection to choose the dimensions

Think about the individual assignment where you could choose the neighborhood

Add convenience methods to retrieve data from mongoDB

Add an option to maximize the screen of the main plot

update: Might not be neccesary in the UX design Ankur made! The div might be big enoug

I will add this when the main plot is integrated in the multiview webpage

When someone selects a word in the wordcloud, the nodes in the graph should be highlighted

Make a reproducible data pipeline from csv's to MongoDB collections with precomputation where possible/necessary

Instead of the 'iterative' notebooks

Create User Profiles

Point selection for graph nodes

Factor MongoDB related variables logic out of views.py and notebooks

invoke format generates PermissionError

When using the invoke format command in the backend folder in a pipenv shell I get the following error:

PermissionError: [Errno 13] Permission denied: '/home/hkstm/Programming/VU.InfoVis2021/backend/infovis21/mongodb/data/diagnostic.data'

I know Mongo/Docker doesn't like other programs accessing/messing with files, is there a way/could an exclusion be added for the mongodb folder and subdirectories/files?

Add the dataset to git

Add legend to the graph (What does each color mean?)

Added ordinal scaled legend

Rendering of nodes in frontend/UI not working

UI
more UI
backend
log

After the flask server gets in a request as seen in the log photo I expect the UI to show the data as seen in the backend photo. I've tried zooming in/out/panning but couldn't find the graph.

Add explanation of requirement management/installation to README.md

Roman I think deleted the requirements.txt file that I shared. I am assuming this is because we want to use a different way of sharing requirements. Can this way be added to the readme.

Decide how to add transitions

Add music node icons to nodes that have an audio preview

Find an example of a visualization

Example of the overal view:
https://spin.atomicobject.com/2017/07/20/d3-react-typescript/

Example about zooming:
https://observablehq.com/@d3/programmatic-zoom

Zoomable scatter plot:
https://observablehq.com/@d3/zoomable-scatterplot?collection=@d3/d3-zoom

Add the graph based sample visualization

Add Heatmap

Alternate view of the plotdata, like in https://www.d3-graph-gallery.com/heatmap

Edit the theme of the page

If the user picks two of the same dimensions for the axis selection, instead of a graph the screen should print out "please pick two different dimensions" or something like that

Scrape the spotify API to download the track preview audio files for playback

Make a selection menu that enables people to choose either the artists wordcloud or the genre wordcloud

Add an overview of the most popular genres & a different one for the artists (Word cloud)

Add url's to track preview's to tracks collection

https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-track