Skip to main content
SimilarExport ZIP
100%

Last.fm: Top 500 Songs by pagerank (2D)

✓ Published0🌍 Public
DDenisKealy
Last edited Oct 12, 2022
Created on Apr 25, 2018

This interactive force-directed graph visualizes the top 500 songs ranked by PageRank, calculated from a network of 33,000 tracks. Each node represents a song, with its size proportional to its PageRank and its position reflecting similarity to connected songs. Hovering reveals the song title, and dragging a node pulls connected nodes to show relational distances. Built with d3.forceSimulation and d3.drag, it uses SVG rendering and provides brushing for multi-selection within the ForceAtlas2-style layout.

AI-generated description

This is a visualization of the top 500 songs ranked by Page Rank. Calculations were performed on 33,000 songs of which these had the highest Page Ranks.

Playing with the visualisation:

  • Hover over a node to see which song it is
  • Pull a node away from the cluster to see which nodes it drags along with it
  • The connected nodes distance from the selected node is a measure of how similar those songs are
  • The node size is a measure of the PageRank of the song (represents how influential a song is in relation to the network)
mit Licensed

Similar vizzes

Loading thumbnail…

VR Force-Directed Graph

This VR force-directed graph visualizes a network of top 500 songs, with nodes representing tracks and links showing similarities. It uses 3d-force-graph-vr with A-Frame for WebGL virtual reality rendering, and d3-force-3d or ngraph for the layout physics. The included code loads song data with properties like artist, title, tags, and pagerank, mapping them to visual encodings such as node size by pagerank, link width by weight, and auto-coloring by label. Users can cycle through multiple topological datasets via a top-right button and enter immersive VR mode with the bottom-right icon. Movement is simulated through the 3D graph using a gamepad or arrow/WASD keys. The visualization demonstrates a force-directed iterative layout in virtual reality, enabling spatial exploration of network relationships. A WebGL version is also available.

DDenisKealy
78% match
Loading thumbnail…

Fork of D3 Force Directed Graph - Music Artists

A force-directed graph maps music artists and their albums, with four main genre nodes connected by thick links and each album branching into smaller leaf nodes. The visualization uses D3 v6's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute layout, while SVG circles, lines, and text render the nodes and connections. Data is structured in a separate module, with node size and link distance varied by hierarchy level. The `drag` interaction lets users reposition nodes, and the simulation restarts on interaction.

Mmach9github
69% match
Loading thumbnail…

Pagerank Test

A scatterplot-style visualization displays PageRank results as labeled circles positioned along a horizontal axis. Each circle’s x-coordinate corresponds to its ranking, while its radius encodes the associated value, with larger circles indicating higher scores. The title appears centered above the plot. The code uses D3 v5 selections, `scaleLinear`, and `scalePoint` (though `scalePoint` is unused) to generate SVG circles and text labels from hardcoded ranking and value arrays.

GGabriele Bonzi
68% match
Loading thumbnail…

Projet 3

This visualization displays song recommendations as a directed network graph, where each node represents a musical artist and each edge connects an antecedent artist to a consequent artist, with edge thickness or weight reflecting the support count from the dataset. Using D3 version 4's force-directed layout via `d3.forceSimulation`, the graph arranges nodes spatially to reveal clusters of related musicians. The interface includes an interactive search box that filters and highlights specific artists from a predefined list, while a tooltip provides details on hover. The underlying data comes from a CSV file of association rules derived from user tagging patterns, rendered as an SVG with custom styling for nodes and links.

MMelanieSalignat
68% match
Loading thumbnail…

Projet 4

This visualization displays a network of recommended music artists based on association rule mining. The force-directed graph shows artist nodes connected by links, where the strength of each connection represents the support value from the dataset. Using D3 v4, the layout employs a force simulation to position nodes, with link opacity reflecting relationship strength. The data comes from a CSV file containing antecedent-consequence pairs with support counts, and the interactive visualization also includes a searchable autocomplete feature for finding specific artists in the network.

MMelanieSalignat
67% match
Loading thumbnail…

Projet 2

This visualization shows a force-directed network of music artists and their associations, mapping relationships derived from an association-rule mining dataset where nodes represent artists and links indicate co-occurrence strength. The graph uses `d3.forceSimulation` with collision and link forces to position nodes, with circle size encoding node degree and line opacity reflecting link weight. Hovering a node highlights its connections, and the code includes an autocomplete search feature that filters the network. Data is loaded from CSV files containing artist tags and recommendation pairs, rendered as SVG elements with tooltips for interactivity.

MMelanieSalignat
67% match
Loading thumbnail…

Final Project: Spotify Top 10000 Streamed Songs

This interactive D3.js visualization explores the Spotify Top 10,000 Streamed Songs dataset from Kaggle, showing relationships between artist success metrics. Three coordinated views display a scatterplot of artists' peak positions versus song counts with dropdown filters, a horizontal bar chart comparing the top 10 artists by streams, and a third scatterplot of individual songs for selected artists. The visualization uses d3.scaleLog, d3.flatGroup for data aggregation, tooltips on hover, and multiple dropdown menus to switch between peak position, peak streams, and total streams metrics.

Fflanagancarlie@gmail.com
66% match
Loading thumbnail…

V2 network

This network visualization displays an artist's collaborations and their relative popularity, using node size and labels to show each artist's number of Deezer fans. The graph is built by querying the wasabi.i3s.unice.fr API to fetch an artist's data, then processing their albums and songs to find co-writers, who are then converted into nodes and links. The visualization uses D3's force simulation (`d3.forceSimulation`), force-directed layout (`d3.forceLink`, `d3.forceManyBody`), and drag interaction (`d3.drag`), rendered as SVG.

BBaptisteJarry
66% match