Skip to main content
SimilarExport ZIP
100%

TP_dataviz

✓ Published3🌍 Public
BBaptisteJarry
Last edited Nov 29, 2022
Created on Sep 28, 2022
Forked from MIAGE base

This interactive network visualization displays the connections between a music artist and their featured collaborators, sourced from a French music API. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute the layout, while rendering is done in SVG, with circles and lines updated during the simulation’s `ticked` event.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

TP_dataviz

This example visualizes a network of music artists and their associated collaborators, fetched from the Wasabi API. It builds a force-directed graph using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, rendering nodes as circles and links as lines in SVG. The code demonstrates asynchronous data loading with `fetch`, local ES6 module imports, and D3 v4 from a CDN, with interactive hover effects on nodes.

JJuliette
87% 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
80% 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
80% 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
77% 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
77% 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
76% 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…

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
75% match