blake's vinyl visualizer

in english please

fetch the collection and the record metadata

Used the Discogs API to retrieve vinyl records, including album covers, artist names, and release info from my collection.

create embeddings

Created feature vectors for each record: used multi-hot encoding for styles, generated transformer embeddings (SentenceTransformer) from title, artists, and genres, normalized the embeddings, then combined them with a 60/40 weighting (styles/embeddings).

build the 2D graph

Used UMAP to project features into 2D space for positioning. Created links between records using nearest neighbors (k=10, cosine distance) based on the combined feature vectors.

cluster

Applied Louvain community detection on the graph to identify clusters of similar records. Generated descriptive cluster names from top artists and genres.

visualize with D3.js

Used D3.js to display the graph: each cover is an image node, clusters are color-coded, and the layout uses D3's force-directed simulation for automatic arrangement.

filtering & search features

Added search and cluster filtering, zoom/pan, hover tooltips, and a legend for an explorable interface.

1 Raw Data

{
  "title": "Smackwater Jack",
  "artists": ["Quincy Jones"],
  "year": 1971,
  "genres": ["Jazz", "Rock", "Funk / Soul"],
  "styles": ["Blues Rock", "Big Band", "Jazz-Funk", "Soul", "Funk"]
}

2 Feature Engineering

Text Input:

→

"Smackwater Jack Quincy Jones Jazz Rock Funk / Soul"

SentenceTransformer:

→

[0.23, -0.15, 0.87, 0.42, ...] (384-dim embedding)

Styles Multi-hot:

→

[0, 1, 0, 1, 0, 1, 1, 0, 1, 0, ...] (binary vector)

Combined (60/40):

→

[0.36, 0.06, 0.35, 0.25, ...] (~500+ dimensions)

3 2D Projection & Graph

UMAP:

→

x: 10.93, y: 5.79 (2D coordinates)

Nearest Neighbors:

→

Connected to 10 most similar records

4 Clustering

{
  "id": 0,
  "title": "Smackwater Jack",
  "artists": ["Quincy Jones"],
  "x": 10.93,
  "y": 5.79,
  "cluster": 0,
  "cluster_name": "Funky Quincy Jones + Jazz"
}

5 Visualization

The node appears on the map at coordinates (10.93, 5.79), connected to similar records, colored by cluster "Funky Quincy Jones + Jazz", and can be dragged, zoomed, and filtered.