DenisKealy

@DenisKealy·4 public vizzes

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

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.

Oct 12, 2022

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.

Apr 25, 2018

Loading thumbnail…

VR Force-Directed Graph

This visualization immerses viewers in a 3D force-directed graph, rendered with WebGL for smooth, real-time interaction in virtual reality. The network displays a bundle of linked modules from the D3.js library, with node size and color encoding the module’s file size and hierarchy. Built with Vue and D3’s force simulation, the graph supports immersive navigation, allowing users to explore the dependency structure from within a VR environment.

Apr 25, 2018

Loading thumbnail…

Smell Co-Occurrence Network

This interactive visualization maps the co-occurrence of smell percepts, where each node represents a distinct smell and links connect smells that co-occur in the same molecule, with link weight reflecting co-occurrence frequency. Data scraped from Flavornet.org is processed into a force-directed graph rendered as SVG with D3 v4. Users can hover over nodes to identify smells, and drag nodes to explore the strength of associations—linked nodes move together, with distance indicating how frequently the smells co-occur from the same stimulus.

Dec 11, 2017