Project: Tree

100%

✓ Published1🌍 Public

Last edited Jan 3, 2019

Created on Oct 8, 2018

This visualization displays a hierarchical tree of music genres, with individual artists attached as leaf nodes based on their deepest associated genre. The layout uses a d3.cluster tree, with artist nodes positioned at a fixed depth and colored by play count using a d3.scaleSequential with the interpolatePlasma color scheme. Data is loaded from a CSV file of Last.fm listening history and a JSON genre hierarchy. The code employs d3.hierarchy, d3.linkHorizontal, and a d3.zoom behavior for panning, rendering all elements as SVG with text labels sized by artist plays.

AI-generated description

This data is collected by a service called last.fm, which has been aggregating my music plays via iTunes and Spotify since 2008. The data shows the top 20 artists by play count, as tracked by the service. The data was accessed from my profile via a service called last.fm to csv, using my username (philosiphicus).

MIT Licensed

Similar vizzes

Loading thumbnail…

Emo Tree

The Emo Tree visualizes the top 20 artists from a Last.fm listening history, organized by music genre in a hierarchical tree layout. Genre nodes branch into artist leaves, with each artist’s text size and color (via a plasma sequential scale) encoding their total play count. The visualization uses d3.cluster, d3.hierarchy, and d3.linkHorizontal to compute and draw the tree, while d3.zoom enables panning. Data is loaded from a CSV and JSON file, with artists filtered to those exceeding five plays, and all rendering is done as SVG.

OOxfordComma

82% match

Loading thumbnail…

Project: Stacked Line

This example visualizes music listening habits from a last.fm profile, showing stacked area charts of play counts per genre across the weeks of 2018. A color legend allows clicking to highlight or isolate a single genre, which re-renders the chart with smooth transitions. The visualization uses D3 v5 APIs including `d3.stack`, `d3.area`, `d3.scaleOrdinal`, and `d3.scaleLinear`, with SVG paths and animated transitions for interactivity. Data is loaded from a CSV and a nested JSON genre hierarchy, processed into weekly aggregates.

OOxfordComma

77% match

Loading thumbnail…

Tree - Project 16

This interactive tree diagram displays hierarchical project data, with each node represented as a colored box and links showing synchronicity between nodes via arrows and labels. The visualization uses D3.js v3 layout methods like `d3.layout.tree` to position nodes, with the SVG rendered and animated through transitions. Node colors correspond to types (type1–type4), and the entire tree can be zoomed and dragged. Data comes from a JSON file containing nested node objects with names, links, and versions.

Ggayuvurukuti@gmail.com

77% match

Loading thumbnail…

Tree Map Representation

This tree map shows a hierarchy of movie genres and example titles, with nodes represented as colored circles and connections drawn as straight lines. The visualization uses D3 v6’s `d3.stratify` to convert the flat parent-child dataset into a hierarchy and `d3.tree` to compute the layout, which aligns nodes at the same depth vertically. Circles are color-coded by generation level (root, genre, and title) and animate their radius and link paths on load via `.transition().duration()`. The SVG is rendered with a centered HTML heading and black strokes on the circles.

SSwapna1915

77% match

Loading thumbnail…

Project circularPacking

A zoomable circular packing diagram displays hierarchical music-genre data, with artists as leaf nodes sized by fan count and color-coded by depth. The visualization uses D3 v5’s `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between parent and child clusters on click, with tooltips showing artist names and fan counts on hover. Rendered as SVG, it imports D3 via a CDN and is built within a Vue framework.

IIndira120

76% match

Loading thumbnail…

Tree layout

This example uses the D3 tree layout to display hierarchical data from a CSV file. The visualization shows a hierarchy of film records, grouped by genre and lead studio, as a node-link diagram with curved paths connecting parent and child nodes. The code uses `d3.tree`, `d3.hierarchy`, and `d3.nest` to structure the data, and renders the result as SVG with circles for nodes and labels for names at specific depths. The layout is sized to 900 by 600 units within an SVG canvas.

JJoe M

76% match

Loading thumbnail…

Tree

This visualization displays a hierarchical tree of programming languages, organized by paradigms and categories, with node shapes indicating the level in the hierarchy: a circle for the root, squares for paradigms, triangles for categories, and rounded rectangles for individual languages. The data is defined as a JavaScript object and rendered using D3.js v7, specifically relying on the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links. The SVG output uses custom styling for links and labels, and a fixed-size SVG canvas at 1200x800 pixels.

AAnurup Reddy

75% match

Loading thumbnail…

Project: Multiple Line

This interactive visualization displays a year of Last.fm listening habits, tracking play counts per week across various music genres. Users can click legend items to highlight a specific genre’s line. Built with D3 v5, it uses nested data, scales, axes, line generators, and a custom mouse-tracking tooltip to explore the dataset.

OOxfordComma

75% match