Skip to main content
SimilarExport ZIP
100%

ICE-6(11630234)

✓ Published0🌍 Public
KKovvuri Supraj
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
91% 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
89% 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
87% match
Loading thumbnail…

ICE-6 Spotify Songs Sharanya Javvaji

A horizontal bar chart displays the duration of the top 12 Spotify songs, with song names on the y-axis and milliseconds on the x-axis. Each bar’s length is scaled linearly to the song’s duration using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical labels. The React component loads the CSV data via `d3.csv`, slices the first 12 rows, and renders SVG rectangles with axis ticks generated from D3’s scale methods.

SSharanya1307
87% 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
87% match
Loading thumbnail…

Fork of ICE-6

This visualization shows the tempo of the top 15 most-streamed songs on Spotify, displayed as a horizontal bar chart. The bar lengths correspond to each song’s tempo value, with song titles listed on the y-axis and tempo ticks on the x-axis. Built with React and D3 v5, the code uses `d3.csv` to load remote data, `scaleBand` and `scaleLinear` for scaling, and renders bars and axes as SVG elements computed from the data.

EEeshwarReddy
85% match
Loading thumbnail…

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

This example visualizes the top 20 songs from a Spotify dataset, encoding song tempo on the y-axis and duration on the x-axis with red bars. The React component loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map values to SVG rectangles. Axis ticks are rendered manually with mapped text and line elements, while d3.max computes the domain for the linear scale. The chart uses React hooks (useState, useEffect) to manage async data fetching and conditional rendering for the loading state.

99176371431
84% match
Loading thumbnail…

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

This visualization displays the top 100 songs on Spotify as a horizontal bar chart, showing the duration of each track. The code uses React hooks (useState, useEffect) to load and manage CSV data from a GitHub gist, while D3 v5 provides scales (scaleBand, scaleLinear) and axis generation. SVG rectangles render the bars, with x-axis ticks drawn manually. The chart only plots the first 20 songs from the dataset, with tempo mapped to the y-axis and duration to the x-axis.

99176371431
84% match