Skip to main content
SimilarExport ZIP
100%

Multi Series Chart - ICE6

✓ Published0🌍 Public
GGorantla Sravani
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from Hello VizHub

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.

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
86% 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
85% match
Loading thumbnail…

ICE-6(11630234)

A horizontal bar chart displays the top 15 streamed Spotify songs by duration, loading data from a CSV file via `d3.csv`. The React app uses `useState` and `useEffect` to fetch and slice the dataset, then renders SVG rectangles with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axis ticks are drawn manually with SVG lines and text, while the chart is styled against a grey background.

KKovvuri Supraj
83% match
Loading thumbnail…

Fork of ICE6_TASK_3

This visualization displays a multi-series line chart and a combined bar-plus-line chart exploring Spotify churn data, showing songs played per day by age across subscription types and average listening time against churn rate. The React-based example uses D3 v7 to load CSV data and render SVG charts, with modular helper functions handling axes, scales, and responsive dimensions via a `ResizeObserver`. The first chart bins ages into five-year groups with `d3.rollups` for aggregation, while the second combines bar and line encodings to compare listening metrics with churn outcomes.

Ssahasrakaturi91@gmail.com
82% match
Loading thumbnail…

ICE5 Spotify Artists Data Overview

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.

GGorantla Sravani
81% match
Loading thumbnail…

ICE-6

This example visualizes the tempo of the top 15 most-streamed Spotify songs as a horizontal bar chart. The chart uses React state management with `useState` and `useEffect` to load data via `d3.csv`, then renders SVG bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axis ticks and labels are generated manually with `xScale.ticks()` and `yScale.domain()`, while the bar widths are computed from each song's tempo value. The data comes from a GitHub-hosted CSV file listing the top 100 streamed songs.

EEeshwarReddy
80% 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
79% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 15 Spotify songs from 2010-2019 as a horizontal bar chart, displaying danceability scores. The chart uses a pink background with purple accents and includes axis tick marks and labels. Built with React and D3 v5, the code leverages `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and renders SVG rectangles as marks. Data comes from a gist-hosted CSV file containing Spotify track metadata.

PPrathyusha Jampala
79% match