Fork of Top 100 Songs w/ Menus

100%

Fork of Top 100 Songs w/ Menus

✓ Published1🌍 Public

Last edited Nov 22, 2022

Created on Nov 22, 2022

A scatterplot maps two selectable song attributes against each other for the top 100 Spotify tracks of 2018, with dropdown menus choosing danceability, energy, or other numeric features for the X and Y axes. Using React and D3 v5, the interactive chart renders circles as SVG marks with tooltips and scales axes via `scaleLinear`. The data is loaded as CSV from a GitHub gist, while reusable components like `AxisBottom`, `AxisLeft`, and `Marks` handle the visualization, and `ReactDropdown` provides the menu controls.

AI-generated description

A visualization showing the relationship between danceability and energy of the top 100 songs of 2018.

MIT Licensed

Similar vizzes

Loading thumbnail…

Top 100 Songs w/ Menus

A scatterplot shows the relationship between two musical attributes for Spotify’s top 100 songs of 2018, with dropdown menus letting viewers select which attribute appears on each axis. The code uses React hooks (useState, useData) to manage selections, d3.scaleLinear and d3.extent for scales, and custom AxisBottom/AxisLeft components to render SVG ticks. Circles are drawn with d3.csv data, and ReactDropdown provides the menu interface.

Ssamemurk21

93% match

Loading thumbnail…

Top 100 Songs w/ Menus & Color Legends

This interactive scatterplot shows relationships between musical attributes of Spotify’s top 100 songs of 2018. Users can select any attribute—such as duration, energy, danceability, or tempo—for the x- and y-axes using React dropdown menus. Point color encodes each track’s mode (major or minor) via a d3.scaleOrdinal color legend. The visualization is built with React and renders as SVG using d3.scaleLinear for axes and custom React components for marks, axes, and legends. Data comes from a CSV file fetched with d3.csv.

Ssamemurk21

88% match

Loading thumbnail…

Top 100 Songs w/ Menus + Color Legends + Filther

This interactive scatterplot explores relationships between musical attributes of the top 100 Spotify tracks of 2018, plotting selected variables on the x- and y-axes via dropdown menus. A third dropdown filters points by color based on categorical attributes like key or mode, with a color legend that highlights matching points on hover. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data loaded from a CSV via `d3.csv`.

Ssamemurk21

88% match

Loading thumbnail…

Top 100 Songs w/ Menus + Color Legends + Filter

This interactive scatter plot visualizes the relationship between musical attributes of the top 100 Spotify songs of 2018, using dropdown menus to select the X and Y axes and a color filter. The code leverages React and D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, and `extent` for scales, rendering SVG circles from the CSV data. A color legend highlights filtered values, and hovering over legend items fades non-matching data points, with tooltips showing exact values.

Ssamemurk21

88% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes Spotify track attributes, letting users explore relationships between features like energy, danceability, and liveness. Two dropdown menus control which attribute appears on each axis, and hovering reveals precise tooltip values. Built with React and D3 v5, the SVG chart uses `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and updates scales and marks dynamically when menu selections change. Data loads from a TSV file via D3's `tsv` loader.

DdaojunL

85% match

Loading thumbnail…

Polished Scatter Plot with Menus

DdaojunL

85% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Spotify song dataset, allowing users to explore relationships between musical attributes such as valence, popularity, and danceability. Users select attributes for the X and Y axes via dropdown menus and filter data points using range sliders. The visualization updates dynamically, with points colored by musical key and a color legend that highlights specific keys on hover. Built with React and D3 v5, it uses SVG rendering with custom axes, scales, and a color legend.

Ppete0707

83% match

Loading thumbnail…

Fork of Stylized Bar Chart - Top 100 Songs Of Spotify

This visualization shows the danceability of the top 100 Spotify songs from 2018, ordered by artist, with each horizontal bar representing a song’s danceability score. The chart uses React for rendering and d3.scaleBand and d3.scaleLinear for positioning, with marks drawn as SVG rectangles. The data is loaded via d3.csv from a GitHub-hosted dataset, and axes are constructed using custom components that map scale domains to tick elements. The chart is filtered to display the first 60 songs in the dataset.

JJeannine

83% match