Project: Stacked Line

100%

Project: Stacked Line

✓ Published1🌍 Public

Last edited Nov 23, 2018

Created on Oct 22, 2018

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

94% 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

84% 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

77% 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

77% match

Loading thumbnail…

Stack Trial

This visualization displays a stacked area chart showing how three groups contribute to a total value over time, with each group’s portion layered on top of the previous one. The data, loaded from a CSV file, is processed using `d3.nest()` to group entries by year, then `d3.stack()` to compute the stacked series. The chart uses `d3.scaleLinear` for both axes, an ordinal color scale for group differentiation, and `d3.area()` paths to render the filled regions. The visualization is built with D3 v4 and rendered as SVG within a React framework.

DdeafMother

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

Fork of Line Chart - Test données - Ju'

This visualization shows the number of music releases per year grouped by music genre. It renders a single line chart with a red stroke representing these counts over time, using an SVG canvas of 960x500 pixels. The chart is generated with D3 v5, using functions like `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, and `line` to create the path. Data from a local `data.json` file is processed in JavaScript to aggregate release dates by genre before being passed to the rendering function.

Jjulienrbd

74% match

Loading thumbnail…

Line Chart - Final

This line chart visualizes the number of music releases per genre over time, using data from `album.json`. The D3.js v5 code groups the data by genre with `d3.nest()` and plots each genre as a separate colored line. It uses `d3.scaleTime()` and `d3.scaleLinear()` for the x and y axes, and `d3.line()` to draw the paths. The chart is rendered as an SVG within a grid layout, with axes labeled and tick marks customized.

EElodie31190

74% match