Reusable Scatter Plot

100%

Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Mar 28, 2026

Created on Mar 28, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

83% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

VVinayak Revankar

83% match

Loading thumbnail…

Spotify_D3ScatterPlot

This animated scatter plot visualizes Spotify listening habits, showing the relationship between total songs played and several rotating attributes including average listening time, new artists discovered, skipped songs, and mood score. Built with D3.js 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file loaded via `csv()`. The visualization cycles through four x-axis variables every two seconds using `setInterval`, redrawing circles with updated `cx` positions as the x-axis changes.

Cchandanamahesh0215@gmail.com

83% match

Loading thumbnail…

SCATTER-PLOT

This example visualizes listening time versus songs played from a Spotify habits dataset, plotting each week as a circle where size reflects artists discovered and color indicates mood score. It uses D3.js’s `scaleLinear`, `scaleSequential`, `interpolateTurbo`, `axisLeft`, and `axisBottom` to construct the scatter plot. The data loads from a GitHub Gist CSV file, and the reusable `scatterPlot` module renders SVG circles with hover tooltips.

Cchandanamahesh0215@gmail.com

82% match

Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Gginnyching

81% match

Loading thumbnail…

SPOTIFY - Scatter Plot

This scatter plot visualizes Spotify listening habits by plotting numeric columns from a CSV dataset, with axes automatically selected based on the most complete fields. The visualization loads data via `d3.csv` and uses reusable `d3.scaleLinear` scales, `d3.axisLeft` and `d3.axisBottom` for axes, and SVG circles for marks. It responsively redraws on window resize, applying custom margins and labels. The chart highlights relationships between behavioral metrics like newly discovered artists and mood scores, rendered with the D3 v6 library.

Cchandanamahesh0215@gmail.com

80% match

Loading thumbnail…

Spotify_Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes a Spotify song dataset, mapping selected audio features like danceability, energy, and popularity against each other on the X and Y axes. A color legend and dropdown menus allow users to switch the categories and attributes being compared, while hovering over legend items fades unrelated data points. The visualization is built with React and D3 v7, using SVG for rendering, and includes filtering capabilities to narrow the data by a popularity range.

Sstephanie0215

80% match

Loading thumbnail…

homework pie

This interactive scatter plot visualizes the distribution of 114,000 songs from a Spotify dataset, allowing users to explore relationships between any two numeric song attributes such as popularity, danceability, and energy. The visualization uses dropdown menus to dynamically select which attributes appear on the x- and y-axes, triggering a re-render of the SVG plot when selections change. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and data-loaded circles to represent individual tracks. A separate Google Charts table (via `loader.js`) displays aggregated case counts for categorical features like genre and explicitness.

Yyujun12689

80% match