ICE5 Spotify Artists Data Overview

100%

ICE5 Spotify Artists Data Overview

✓ Published1🌍 Public

Last edited Oct 20, 2025

Created on Oct 5, 2025

This visualization presents an interactive overview of Spotify's top artists dataset, showing the relationship between monthly listeners and total streams across multiple chart types. The main bar chart displays the top 15 artists by monthly listener count, while a second grouped bar chart compares average listeners and streams by genre. A scatter plot visualizes the Iris dataset for comparison. Built with D3.js v7, the visualizations use SVG rendering with d3.scaleBand, d3.scaleLinear, and d3.csv for data loading, featuring tooltips and axis labels for enhanced readability.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot for ICE-6

This interactive scatter plot shows the relationship between monthly listeners and total streams for Spotify’s top artists, with each circle representing an artist. Hovering reveals the artist name and exact values through SVG `<title>` tooltips. The React app loads CSV data via `d3.csv` and renders the visualization using D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The chart uses conditional filtering to exclude missing values and applies Spotify’s green color for all points, with axis styling customized through a Vega-Lite config file.

GGorantla Sravani

85% match

Loading thumbnail…

ICE5 Spotify Artists Data Overview

This visualization presents an overview of Spotify artists using a force-directed layout, where each node represents an artist and connections between them reveal relational patterns. The view fills the entire browser window, with data rendered inside a rounded rectangular frame that adapts to the available viewport dimensions. The implementation leverages D3's force simulation through `d3.forceSimulation` to position nodes, with the SVG canvas dynamically sized based on `document.body.clientWidth` and `document.body.clientHeight`. The code initializes a D3 selection on an SVG element and applies styling through CSS to create a fullscreen, fixed-position display.

GGorantla Sravani

83% match

Loading thumbnail…

Multi Series Chart - ICE6

This multi-series chart compares the total streams and monthly listeners for the top 20 Spotify artists. Green bars represent total streams in billions on the left axis, while a blue line and circles show monthly listeners in millions on the right axis. Built with React and D3 v5, the visualization loads CSV data and uses `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to render the SVG. Artist labels are rotated for readability.

GGorantla Sravani

81% match

Loading thumbnail…

ice7_task1

A dark-themed scatter plot visualizes Spotify’s top artists, comparing monthly listeners against total streams, with bubble size encoding career length and color distinguishing musical genres. Built with D3 v7, the visualization uses d3.csv to load remote data, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for genre colors, and d3.scaleSqrt for bubble radii. SVG rendering includes gridlines, axis labels, and a title. An HTML tooltip appears on hover, displaying artist details such as country and debut year, with data sourced from a public GitHub CSV.

BBalaji Dasari

81% match

Loading thumbnail…

Ice-6

This visualization presents a bar chart showing the number of Spotify artists per country from the `SpotifyTopArtists.csv` dataset. It displays the ranked distribution of artists across nations, with country names on the x-axis and artist counts on the y-axis. The chart is built using D3.js v7, with the SVG-based rendering. Data is loaded asynchronously via `d3.csv()`, aggregated with `d3.rollups()`, and mapped to visual elements using `d3.scaleBand()` for the categorical axis and `d3.scaleLinear()` for the count axis.

GGorantla Sravani

80% match

Loading thumbnail…

ice7task2_2

This interactive line chart visualizes the average monthly Spotify listeners of top artists grouped by their debut year, using data from a CSV file. The D3.js v7 visualization renders an SVG with a monotone X-curved line, axillary scales, and labeled axes on a dark-themed interface. Hovering over each plotted point reveals a tooltip with the specific year and average listener count. Smooth animation is not present, but the chart leverages D3's scaling, axis, and selection APIs for static exploration.

BBalaji Dasari

80% match

Loading thumbnail…

Barchart for ICE-6

This visualization displays the top Spotify artists ranked by total streams in billions, using a horizontal bar chart that supports scrolling through a long dataset. React manages the component state and rendering, while D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` construct the axes and bars as SVG elements. The y-axis stays fixed while the bar area scrolls independently, with the `csv` loader pulling data from a remote gist. Each bar is colored Spotify green, and the x-axis labels include a “B” suffix to denote billions.

GGorantla Sravani

80% match

Loading thumbnail…

ice7_task3

This dark-themed area chart visualizes the average monthly listeners of top Spotify artists grouped by their debut year. The chart uses a blue gradient-filled area with a lighter line overlay, and interactive data points display exact values via a tooltip on hover. Built with D3 v7, it loads CSV data, aggregates it with `d3.rollup` and `d3.mean`, and renders the visualization using SVG paths generated by `d3.area` and `d3.line`.

BBalaji Dasari

78% match