Top 100 Songs w/ Menus

100%

Top 100 Songs w/ Menus

✓ Published3🌍 Public

Last edited Oct 7, 2019

Created on Oct 1, 2019

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.

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…

Fork of Top 100 Songs w/ Menus

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.

JJeannine

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

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

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

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

84% match

Loading thumbnail…

Polished Scatter Plot with Menus

DdaojunL

84% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes Spotify music attributes, plotting selected features against each other. The visualization uses React with hooks for state management and D3 scales to map data values to screen positions, rendering marks as SVG circles with tooltips. The example includes dropdown menus to switch between attributes, though the current implementation shows temperature and wind labels. Data loads via D3's tsv parser from a GitHub-hosted dataset, while axes are generated using custom React components that leverage D3's tick generation capabilities.

Pprint("Ayush")

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

80% match