Jazz Connections

100%

Jazz Connections

✓ Published0🌍 Public

Last edited Oct 23, 2018

Created on Oct 23, 2018

This network diagram maps the top 25 jazz albums, with nodes representing albums and links indicating shared musicians. The force-directed layout, powered by D3.js v3's `d3.layout.force`, animates node positions and updates link coordinates via custom `positionEdge` and `positionNode` functions. Clicking a node or link reveals a popup listing the connecting musicians, sourced from a single blogger’s list. The visualization uses SVG circles, lines, and text, with CSS-styled tooltips, demonstrating core force-layout principles.

AI-generated description

This graph shows the top 25 jazz albums of all time (at least according to one blogger.) Links between the albums represent musicians that played on both. Click on the nodes and the links for more information.

Note: iTunes links are not affiliate links.

This visualization is a real application of the D3.js force layout. It demonstrates some of the principles in a series on that layout. You can review that series beginning with the first example.

forked from <a href='http://bl.ocks.org/mayblue9/'>mayblue9</a>'s block: <a href='http://bl.ocks.org/mayblue9/cea210896956cceec9b57e5f46b189e4'>Jazz Connections</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Jazz Connections

This network graph visualizes the top 25 jazz albums, with nodes representing albums and links showing shared musicians. Built with D3.js v3’s force layout, the graph uses draggable, clickable nodes and edges to reveal album details and connections. The data, sourced from a blogger’s list, is rendered as an animated SVG, with hover effects and a tooltip listing shared band members. The visualization highlights the collaborative structure of jazz recordings through interactive exploration.

663anp3ca

96% 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

75% match

Loading thumbnail…

Projet V2 Esthetique

This interactive network visualization displays the connections between a selected artist and their associated musical artists, sourced from the wasabi.i3s.unice.fr API. The code uses D3.js v4's force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`) to position nodes, with SVG circles representing artists and lines showing associations. Hovering over a node reveals a tooltip with the artist's name and record label, while clicking triggers an additional function.

JJuliette

74% 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

74% match

Loading thumbnail…

Projet V2 Interaction

This interactive network visualization maps connections between a musical artist and their associated artists, using data from the Wasabi API. It fetches artist data and their record labels, then renders a force-directed graph with D3. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes, and supports clicking a node to reload the network for that artist. Tooltips display artist names and labels on mouseover, while SVG circles and lines represent the dynamic graph structure.

JJuliette

74% match

Loading thumbnail…

Projet_test2

This example shows a network of music artists and their associations, using a force-directed graph layout to reveal clusters of related performers. The visualization encodes connections through links and nodes, with the ability to hover and search for a specific artist. The code relies on `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to compute the layout, and uses custom SVG elements for nodes and links. Data is loaded from two CSV files, `recommandations.csv` and `artists_tags_count.csv`, with node size reflecting artist popularity and a tooltip displaying tag information.

MMelanieSalignat

74% match

Loading thumbnail…

Projet V2 OK

This example visualizes a network of associated musical artists using a force-directed graph. It shows a central artist node connected to related artists, with circles colored and sized uniformly, and hover tooltips displaying the artist’s name and record labels. The code fetches artist data from the Wasabi API, processes associated artists, and uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes and links dynamically. The visualization is rendered as SVG with interactive mouseover and mouseleave events.

JJuliette

73% match

Loading thumbnail…

ProjetFinal

This visualization shows a network of music artists and their associations, with nodes connected by links weighted according to co-occurrence data from a recommendations dataset. It uses the D3.js force-directed graph layout (d3.forceSimulation) to position nodes, with circle size and link thickness reflecting support counts. The code includes a searchable autocomplete input for filtering nodes, and hovering over a node highlights its connections and reduces the opacity of unrelated elements. Artist names, images, and tags are loaded from CSV files, and the rendering is done via SVG elements with a custom tooltip.

MMelanieSalignat

73% match