The top 100 songs of 2018

100%

The top 100 songs of 2018

✓ Published1🌍 Public

Last edited Oct 18, 2019

Created on Oct 18, 2019

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.

AI-generated description

A visualization showing the relationship between danceability and duration in milliseconds the top 100 songs of 2018.

More insights can be found in this Data Visualization Project.

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

Stylized Bar Chart - Top 100 Songs Of Spotify

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.

Ssamemurk21

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

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

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

73% match

Loading thumbnail…

Yearly Top Genre Trend and Artist with Music Signature

This interactive scatter plot explores how the top 20 Spotify songs in the U.S. vary by year from 2010–2019. A slider selects the year, while dropdown menus choose which musical features (Tempo, Energy, Loudness, etc.) map to the x- and y-axes and whether points are colored by top genre or artist. Users can hover over the color legend to highlight a specific category or hover over a point to see its song details. The visualization is built with React and D3 v5, using SVG scales like `scaleLinear` and `scaleOrdinal` and components for axes, marks, and dropdowns. Data comes from a CSV hosted on GitHub.

ZZiyang Gao

73% match

Loading thumbnail…

Fork of Yearly Top Genre Trend and Artist with Music Signature

This interactive scatterplot visualizes the top 20 Spotify songs in the U.S. for each year from 2010 to 2019, letting users explore musical attributes like tempo, energy, and danceability across different genres and artists. A year slider filters songs, while dropdown menus select the x-axis, y-axis, and color encoding for artist or genre, with a hovering legend highlighting specific categories. The visualization uses D3 v5 scales for positioning and color, React for state management, and renders SVG circles with hover tooltips showing song details from the yearly_music_trend dataset.

SSandyWu7179290504

73% match