Skip to main content
SimilarExport ZIP
100%

Barchart for ICE-6

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE-6_Bar_Graph

This example visualizes the duration of each song in a Spotify dataset using a horizontal bar graph. The chart displays the first ten songs from a CSV file, with the song names on the y-axis and their corresponding durations on the x-axis, making it easy to compare track lengths at a glance. The visualization is built with React and D3 v5, using D3 functions like `csv` to load the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `axisBottom` for tick generation. The bars are rendered as SVG `<rect>` elements, with axis lines and labels styled in red and black, all within a fixed 960x500 canvas.

Jjayavamsi
83% match
Loading thumbnail…

Fork of ICE-6

This example visualizes the top 12 most-played Spotify songs using a horizontal bar chart, where each bar’s length encodes the song’s duration in milliseconds. The visualization loads data from a CSV file via `d3.csv`, then slices it to the first twelve rows before rendering with React and D3 v5. Axes are manually constructed using `scaleBand` for the categorical song names and `scaleLinear` for the numeric duration, with grid lines and tick labels drawn as SVG elements. The chart uses `useState` and `useEffect` for data fetching, and the final output is rendered as an SVG within a React component.

Ttejasrikotipalli1@gmail.com
83% 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
83% 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
82% match