Fork of ICE6_TASK_3

100%

Fork of ICE6_TASK_3

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

83% 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

83% 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

82% 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

82% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example shows the most streamed songs and their basic costs, with a horizontal bar chart rendered as SVG. It loads data from a CSV file using `d3.csv`, filters to the first 12 rows, and maps values with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The React component uses `useState` and `useEffect` to fetch and store data, while D3’s `axis` and formatting utilities are imported but not directly used; instead, ticks and grid lines are manually drawn. The chart is styled with red gridlines and no axis components.

Cchandanagandla

81% 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

81% match

Loading thumbnail…

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

This example uses React and D3 to render a bar chart of the top 20 songs from a CSV dataset titled "top 100 songs on spotify." The visualization maps song tempo to the y-axis and duration to the x-axis, using red rectangles displayed as SVG marks within a 960x500 canvas. The code imports the `csv`, `scaleBand`, `scaleLinear`, and `max` functions from D3 v5 to load data and compute scales, while a custom row function parses the `TotalDeaths` field. Axes are drawn with manually mapped tick marks using `<line>` and `<text>` elements, and React's `useState` and `useEffect` handle asynchronous data loading.

99176371431

81% match