Project: Multiple Line

100%

Project: Multiple Line

✓ Published1🌍 Public

Last edited Nov 23, 2019

Created on Oct 17, 2018

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.

AI-generated description

This dataset is from my last.fm profile (pulled using this service).

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Project: Stacked Line (Artist)

This interactive visualization displays a stacked area chart of the user’s music plays across 52 weeks of 2018, broken down by artist and genre. The chart uses D3 v5 with SVG and animated transitions, letting viewers click a color legend to highlight a specific artist’s play counts. Data comes from Last.fm and is processed via `d3.csv` and `d3.hierarchy` into weekly aggregates. The rendering uses `d3.stack`, `d3.area`, and `d3.scaleLinear` with a `colorLegend` module for filtering.

OOxfordComma

83% match

Loading thumbnail…

Project Line Chart

This project line chart tracks musical release trends by genre, displaying the number of songs released per year as distinct colored lines. The visualization uses D3 v5 with SVG rendering, employing `d3.nest()` to group data by genre and `d3.line()` to generate the paths. Data comes from a local JSON file loaded via `d3.json()`, which is processed and aggregated before being displayed with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis.

EElodie31190

78% match

Loading thumbnail…

Line Chart multiple lines | interractive Legend

This interactive visualization displays a week of temperature data for multiple cities using multiple lines. Users can click on legend items or line paths to isolate a specific city’s data, which reduces the opacity of other lines for focused comparison. Built with D3 v5, the code utilizes `scaleOrdinal` for color mapping, `nest` and `line` for path generation, and a custom `colorLegend` component with `setSelected` and `selected` for interactive state management. The SVG render includes axes with gridlines and hover effects on paths.

Vvladvaculin

77% match

Loading thumbnail…

D3 Interactive plot

This interactive line chart lets users explore musical trends across different artists by clicking buttons to switch datasets, which are loaded from CSV files hosted on GitHub. Built with D3.js v6, the visualization uses `d3.csv()` to fetch data and renders an SVG with a single line per playlist genre. The chart includes a color-coded legend for six genres—pop, rap, rock, latin, r&b, and edm—using an ordinal color scale. Clicking a button updates the chart by removing existing line elements and redrawing them with the new data, providing a dynamic way to compare genre patterns across artists.

Vvedant74

75% match

Loading thumbnail…

Project: Tree

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.

OOxfordComma

75% match

Loading thumbnail…

Line Chart - Test lignes

This line chart displays the number of music tracks per genre across release years, using a single red line to connect data points from a small JSON dataset. The visualization loads its data from `data2.json` and renders an SVG with D3 v5, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The code generates gridlines with axis ticks, labels the axes "Date" and "Nombre de Musique", and titles the graph "Test". The line path is drawn using `d3.line`, with data points representing genres like Country and Pop at various dates.

EElodie31190

75% match

Loading thumbnail…

Line Chart - Final Amélioré

The visualization displays the number of music releases per year for various genres, with each genre represented by a distinct colored line. The data is aggregated from an `album.json` source, grouping albums by genre and counting releases annually. The chart is rendered using D3.js (v5) within an SVG container, leveraging `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft` for the axes, while `d3.nest()` groups the data and `d3.line()` draws the polylines. An interactive tooltip highlights the genre on hover.

EElodie31190

75% match