Skip to main content
SimilarExport ZIP
100%

Projet V2 OK

✓ Published1🌍 Public
JJuliette
Last edited Nov 29, 2022
Created on Nov 28, 2022
Forked from Projet V 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.

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…

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
92% 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
91% 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
90% 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
87% 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
87% match
Loading thumbnail…

Juliette Projet V2 Interaction

This example visualizes a dynamic network of musical artists and their associations. It shows a force-directed graph where the central artist is linked to related artists, with tooltips displaying artist names and record labels. Clicking a node triggers an update, fetching new data from the Wasabi I3S API and redrawing the graph. The code uses d3.forceSimulation and d3.forceLink to manage layout, with SVG elements rendered dynamically based on asynchronous API responses.

PPLD3508A
87% match
Loading thumbnail…

Projet 2

A force-directed network graph maps associations between music artists, where nodes represent artists and links indicate co-occurrence support values from the datasets `recommandations.csv` and `artists_tags_count.csv`. Node size reflects tag count, and fill color encodes the first tag from each artist's top-five tags. Using D3 v4, the code builds the visualization with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, while a hover tooltip displays artist name and image. Nodes are draggable via `d3.drag`.

MMelanieSalignat
85% 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
84% match