Jazz Connections

100%

Jazz Connections

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

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.

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 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.

663anp3ca

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

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

72% match

Loading thumbnail…

Projet_test3

This example visualizes a network of music artist recommendations, showing connections between artists based on association rule mining. An interactive force-directed graph places artists as nodes, with links representing the strength of their co-occurrence. Hovering over a node highlights it, and a tooltip appears; the code also implements a function to dynamically generate a list of five recommended artists for each selected node. The visualization uses D3.js v4 APIs including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with data loaded from CSV files (`recommandations.csv` and `artists_tags_count.csv`). Artist images and top five tags are integrated from the latter source, enhancing node details.

BBrunoDumas

72% match

Loading thumbnail…

amélioration graph

This example visualizes a network of musical artists and their collaborators, showing connections between an artist and the writers they have worked with. It fetches artist data from the Wasabi API and builds a force-directed graph using d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCenter. Node circles and connecting lines are rendered in SVG, with hover interactions for mouseover and mouseleave events. The graph displays artist names and uses deezerFans data from the API response.

BBaptisteJarry

72% match

Loading thumbnail…

Projet V OK

This example builds an interactive network visualization of a musical artist and their associated artists, using data fetched from the Wasabi API. The code imports D3 functions like `select` and `csv`, and relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes. Hovering over a circle triggers a tooltip that displays the artist’s name and record labels. The SVG rendering shows nodes as fixed-size circles connected by gray links, with the main artist distinguished by a larger label in the data.

JJuliette

72% match

Loading thumbnail…

dashboard dana anissa juliette

This dashboard visualizes relationships between musical artists and their language usage. It shows a force-directed network graph using d3.forceSimulation, where nodes represent artists and links connect associated musicians, alongside bar charts and circular plots derived from artist data. The example loads artist data from the Wasabi API and i3S university database, using d3.json and d3.scaleLinear for rendering SVG charts. Interactive tooltips appear on hover, while clicking a network node triggers a new data fetch and animation to update the visualization.

PPLD3508A

72% match