Skip to main content
SimilarExport ZIP
100%

ICE-7 Resusable Pie Chart

✓ Published0🌍 Public
Mmynedisanjana@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026

This reusable scatter plot, titled "Song Performance Analysis," visualizes the relationship between a song's number of streams and its popularity score. Each circle represents a song, positioned by the linear scales from `d3.scaleLinear()`, with color assigned to the singer using the ordinal color scheme from `d3.scaleOrdinal`. The code loads a songs.csv dataset from a GitHub gist, converts numeric fields, and renders the chart in SVG. It constructs the visualization by merging axes, labels, and a categorical legend, all within a reusable `scatterPlot` function that accepts data and dimension parameters.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Resusable Scatter Plot

This scatter plot visualizes song performance by comparing streams against popularity, with each point colored by singer and displayed on a reusable scatter plot component built with D3 v7. The visualization uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for axis rendering. Data loads from an external CSV file containing song attributes, and the reusable `scatterPlot` function manages SVG rendering, including axis labels and a categorical legend. The chart is designed with margins to accommodate labels and legend placement.

Mmynedisanjana@gmail.com
94% match
Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the distribution of song streams across the top six singers from a CSV dataset, showing each singer’s share as a labeled slice with percentages for segments larger than 10%. The visualization is built with D3.js v7, using `d3.pie` and `d3.arc` to generate the slices, `d3.rollups` to aggregate stream counts by singer, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. A legend on the right lists all singers with their exact percentage shares, while the SVG renders in a white rounded container.

Mmynedisanjana@gmail.com
87% match
Loading thumbnail…

ICE-7 Resusable Charts

This example demonstrates a reusable D3 chart library applied to a Spotify song dataset, showing four distinct visualizations: a scatter plot of energy versus danceability, a pie chart of popularity groups, and line and area charts displaying average song popularity by release year. The code constructs each chart as a configurable function with getter/setter methods, using D3 v6 APIs such as `scaleLinear`, `axisBottom`, `axisLeft`, `rollup`, `mean`, `pie`, `arc`, and `area` to compute scales, aggregate data, and generate SVG paths. Charts are rendered into separate SVG elements with custom margins, titles, and axis labels.

KKeith Miller
85% match
Loading thumbnail…

ICE -7 Pie chart of the songs

This pie chart visualizes the durations of individual songs from a CSV dataset hosted on GitHub. D3 v5’s `pie` and `arc` generators create the segments, while a `scaleOrdinal` color scale assigns fills. Each slice is labeled with its numeric duration, and a legend pairs song names with their corresponding values. The SVG rendering approach positions the chart and legend explicitly via `translate` transformations.

GGogineni44
84% match
Loading thumbnail…

ICE-7

This pie chart visualizes the duration distribution of the top ten most streamed songs on Spotify. It displays each song as a colored slice, with a legend to the right showing the song name and its percentage of total duration. The visualization is built with D3 v5, using the `pie`, `arc`, and `scaleOrdinal` APIs to compute and draw the chart from a CSV file. The data is loaded asynchronously from a GitHub Gist, and the chart is rendered in SVG.

KKovvuri Supraj
82% match
Loading thumbnail…

Reusable Scatter Plot

This reusable chart displays song data from a Spotify CSV, plotting energy against danceability as colored circles. It demonstrates a flexible D3 architecture where a scatter plot and a pie chart are built as modular functions with getter/setter methods for configuration. The code uses d3.csv for data loading, scaleLinear, extent, axisLeft, and axisBottom for scales and axes, and d3.pie for the pie chart. SVG rendering renders both visualizations, with the pie chart categorizing tracks by popularity levels.

Ssravya010
79% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart visualizes the contribution percentages of different people to a song, using a dataset loaded from a GitHub gist CSV file. The chart displays ten colored slices, each paired with a legend listing the person’s name and their contribution value formatted with `d3.format`. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and legends, with each slice colored via a fixed array and rendered in an SVG container.

TTulluripallavi
79% match
Loading thumbnail…

piechart ICE-7

This pie chart visualizes the top 10 most streamed songs, with each slice sized by danceability percentage and labeled in a legend alongside song titles. The chart is built with D3 v5 in a React application, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and color-coded segments. Data is fetched as CSV from a GitHub gist, and legends are rendered with SVG rectangles and text elements. The visualization highlights relative danceability metrics, with a fixed color palette and no interactive features.

CChathurya
79% match