Stylized Bar Chart - Top 100 Songs Of Spotify

100%

Stylized Bar Chart - Top 100 Songs Of Spotify

✓ Published1🌍 Public

Last edited Oct 13, 2019

Created on Oct 10, 2019

This visualization displays the danceability scores of the top 100 Spotify songs from 2018, ranked by artist as horizontal bars. Each bar’s length encodes the numeric danceability value using d3.scaleLinear, while artist names are positioned along the y-axis with d3.scaleBand. The React components render SVG elements, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded via d3.csv from a GitHub-hosted dataset, and tooltips appear on hover using native SVG title elements.

AI-generated description

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

More insights can be found in this Data Visualization Project.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

The top 100 songs of 2018

This visualization displays the relationship between danceability and duration for the top 100 songs of 2018, using a bar chart where each bar represents a song’s profit by company and industry. The code employs Vega-Lite API with D3’s CSV loader to fetch data from a GitHub repository, rendering bars with configurable opacity and binning. Tooltips reveal song names, while axes and colors are customized via the `config.js` file to improve readability against a dark background.

OOday4

83% match

Loading thumbnail…

The top 100 songs of 2018

This scatterplot explores the relationship between danceability and duration (in milliseconds) for the top 100 songs of 2018, with each bar representing a track and colored by its musical mode (major or minor). Hovering reveals the song’s name. The visualization uses Vega-Lite API with D3.js to fetch CSV data from a GitHub gist, and applies a binned bar mark with semi-transparency, customized axes, and tooltip handling via vega-tooltip.

Ssamemurk21

82% match

Loading thumbnail…

Spotify_Vertical Stylized Bar Chart

This interactive visualization explores the distribution of audio features across a Spotify tracks dataset. It displays a vertical, stylized bar chart where each bar represents the count of tracks within a specific numerical bin for a user-selected attribute, such as popularity or danceability. The chart is built with React and D3 v7, using `d3.histogram()` and `scaleLinear` to compute and map the bins. A line overlay charts the average popularity for each bin, while dropdown menus allow users to switch between attributes and adjust the number of bins. The visualization renders as SVG and includes dual axes and a color legend to simultaneously show track counts and average popularity.

Sstephanie0215

81% match

Loading thumbnail…

Top 100 songs of 2018

A scatterplot maps the top 100 songs of 2018 by danceability on the x-axis and energy on the y-axis, with each point’s color encoding liveness and tooltips revealing song names. The visualization uses Vega-Lite API (vl) to define the circle marks and encodings, while D3.js (d3.csv) loads the dataset from a GitHub gist. The chart fills the browser viewport with a custom config adjusting axis and label styling.

Ssamemurk21

81% match

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

81% match

Loading thumbnail…

Spotify_Vertical Stylized Bar Chart

This visualization uses a Spotify track dataset to show the distribution of audio features and popularity across acoustic tracks. A histogram display counts tracks binned by user-selected attributes (like tempo, energy, or danceability), with bars colored in blue to represent frequency. An orange line overlay traces the average track popularity within each bin, while a small box plot on the right summarizes the overall spread of the selected attribute. The React app uses d3.histogram, scaleLinear, and scaleBand to compute and position marks, with dropdown menus for attribute and bin selection.

Sstephanie0215

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

80% match