Plays over Time with Dropdown

100%

Plays over Time with Dropdown

✓ Published3🌍 Public

Last edited Oct 22, 2018

Created on Oct 7, 2018

This visualization shows the monthly play counts for a user’s top 10 artists from Last.fm, with each artist represented as a colored dot over time. A dropdown menu and clickable legend allow filtering to a single artist, dimming other points via opacity transitions. Built with D3 v5 (d3-scale, d3-axis, d3-selection), it uses SVG rendering with animated transitions on selection change. Data is loaded from a CSV of parsed Last.fm exports and reshaped into long format.

AI-generated description

This dataset is from my last.fm profile (pulled using this service). This data was parsed so that it only includes the number of plays for my Top 10 most listened to artists.

The data is parsed such that there are 10 data points per month, one for each artist in the top 10. Each point represents the number of plays for that artist in that month. The legend (which is sorted from most played to least played, top to bottom) can be clicked on to view only the data points corresponding to that artist.

MIT Licensed

Similar vizzes

Loading thumbnail…

Plays over Time with Multiple Dropdowns

This visualization displays the monthly play counts for a user’s top 10 most listened-to artists on Last.fm. Two dropdown menus let the viewer filter the data by artist and year, while a clickable color legend highlights or isolates a selected artist’s points. The scatterplot uses D3 v5 scales and axes, with animated transitions on the circles. Data is loaded from a CSV file and parsed into monthly aggregates.

OOxfordComma

95% match

Loading thumbnail…

Plays over Time with Dropdown

This visualization shows the monthly play counts for a user's top 10 most listened-to artists on Last.fm, with each artist represented by colored circles. A dropdown menu and clickable legend filter the scatterplot to highlight a single artist’s data over time. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and SVG transitions to animate opacity changes when filtering.

KKeerthiKandadai

95% match

Loading thumbnail…

Plays over Time with Dropdown

This interactive scatterplot displays the monthly play counts for a user’s top 10 artists on Last.fm, with a dropdown menu and clickable legend to filter by artist. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time and play counts, rendering circles with animated opacity transitions. Data is loaded from a CSV via `d3.csv`. The legend, sorted by total plays, allows selection, while the dropdown provides an alternative filtering method, both triggering re-renders that update the chart.

KKeerthiKandadai

93% match

Loading thumbnail…

Plays over Time

This interactive scatterplot displays the monthly play counts for a user’s top 10 Last.fm artists over time, with each colored circle representing one artist’s plays in a given month. Clicking an item in the color legend filters the view to that artist, dimming other points. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/Left within an SVG rendered via D3 v5, with data parsed from a CSV file containing plays per artist per month.

MMukund Khandelwal

91% match

Loading thumbnail…

Plays over Time-test

This visualization shows the monthly play counts for a user’s top 10 most-listened artists on Last.fm, with each artist represented as a colored dot positioned by time on the x-axis and play count on the y-axis. A clickable color legend filters the scatterplot to highlight a single artist’s data while dimming others. The code uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with schemeCategory10, and d3.axisBottom/axisLeft, rendering SVG circles. Data is loaded from a CSV via d3.csv.

MMukund Khandelwal

91% match

Loading thumbnail…

Plays over Time

This interactive scatterplot visualizes monthly play counts for a user's top 10 artists from their Last.fm listening history. Each circle represents one artist’s plays in a given month, colored by artist, with a clickable legend that filters the view to a single artist. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with a categorical color scheme, rendering as SVG. Data is loaded via d3.csv from a hosted CSV file.

MMukund Khandelwal

90% match

Loading thumbnail…

Plays over Time

This visualization shows the monthly play counts for a user's top 10 artists from Last.fm, with each artist represented as a colored scatterplot point over time. The interactive legend, sorted by total plays, allows filtering to isolate a single artist's data by dimming the other points. The chart uses d3.v5's scaleTime, scaleLinear, scaleOrdinal, axisBottom, and axisLeft APIs within an SVG canvas, and is built with the d3 framework.

MMukund Khandelwal

90% match

Loading thumbnail…

Plays over Time

This scatterplot displays monthly play counts for a user’s top 10 artists, with each circle colored by artist via a d3.scaleOrdinal. A clickable legend (d3.ordinal color legend) filters the visualization to a single artist, dimming others. Data comes from a CSV loaded with d3.csv, and the chart uses d3.axisBottom, d3.axisLeft, and d3.scaleTime to render time and play count axes in SVG.

OOxfordComma

89% match