Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Mmynedisanjana@gmail.com
Last edited Mar 8, 2026
Created on Mar 8, 2026
Forked from React & D3 Starter

This scatter plot shows the relationship between song release year and streaming counts for popular songs, with purple circles plotted across axes for release year and stream totals. The visualization uses D3.js v7 to load CSV data from a GitHub gist, then applies d3.scaleLinear for both x and y axes, d3.extent to determine the year domain, and d3.max for the stream range. Circles are appended as SVG elements, with d3.axisBottom and d3.axisLeft providing the labeled axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot

This scatter plot displays the duration of 100 popular songs on the y-axis against their titles on the x-axis, using a point scale for song names and a linear scale for duration. Each song is represented by a steel-blue circle with a radius of 10 pixels. The visualization loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.scalePoint`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output is generated through D3 v5, with margins applied to position the chart within a 960-by-1200 pixel canvas.

GGogineni44
81% 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
80% match
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
79% match
Loading thumbnail…

Activity 7.1 - Area chart

This area chart visualizes the total Spotify streams of the most streamed songs aggregated by their release year, showing how streaming totals trend across decades. The chart uses a steel-blue filled path generated by `d3.area()` with linear scales for both axes. Data is loaded from a remote CSV file using `d3.csv`, then processed with `d3.rollups` to sum streams per year before sorting chronologically. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with the SVG output containing numbered year ticks and labeled axis titles.

Ggsdontineni518@gmail.com
78% match
Loading thumbnail…

ICE-7 Resusable Pie Chart

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.

Mmynedisanjana@gmail.com
78% 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
78% 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
78% 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
77% match