Project: Stacked Line (Artist)

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.

94% match

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.

83% match

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

Stacked Area Chart

This stacked area chart visualizes the changing market share of web browsers over time, derived from Clicky Web Analytics data. It displays the proportions of the "Bottom 99 percent" and "Top 1 percent" income groups across the years, using a categorical color scheme. The visualization loads data from a CSV file with `d3.csv` and parses years via `d3.timeParse`. D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) and shapes (`d3.stack`, `d3.area`) compute the stacked layers, while `d3.axisBottom` and `d3.axisLeft` render the axes on an SVG canvas.

MMbrownshoes

Meaningless Graphs with D3

An interactive stacked area chart renders eight time series from a CSV file, displaying aggregate values across years with a color-coded palette. The visualization uses D3 v6 to parse the data, then applies `d3.stack()` to compute layer offsets and `d3.area()` to generate the SVG paths. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while labels for "Year" and "Points??" are added as SVG text elements. The data source is a remote CSV hosted on GitHub, and the chart updates reactively when loaded.

Sstevensmithj

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

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.

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.