Skip to main content
SimilarExport ZIP
100%

The top 100 songs of 2018

✓ Published1🌍 Public
OOday4
Last edited Oct 24, 2019
Created on Oct 24, 2019

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.

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…

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
90% 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
85% 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
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
Loading thumbnail…

Fork of Total Number of Most Popular Songs Genre

This stacked bar chart visualizes the distribution of top genres among the most popular songs for each year, using data from a public gist. The visualization is implemented with a Vega-Lite specification rendered via the vega-lite-api library, where each bar segment represents a genre’s count. The x-axis lists artists, while the y-axis shows total song counts, colored by genre. The code configures axis styling and tooltips, and the chart automatically fits to the browser window. Dance pop consistently appears as the most frequent genre across the timeline.

AAmanda-Tai
72% 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
72% match
Loading thumbnail…

Total Number of Most Popular Songs Genre

This stacked bar chart visualizes the distribution of top genres among the most popular songs across different years, with Dance pop consistently dominating as the most frequent genre. Built using Vega-Lite API and D3.js v5, the visualization groups and counts songs by artist and genre, encoding these aggregates as stacked bars on an ordinal x-axis and quantitative y-axis. The data comes from a CSV file fetched via D3’s `csv` function from a GitHub gist containing yearly music trends. Tooltips display the count, genre, and artist for each segment.

ZZiyang Gao
71% match
Loading thumbnail…

Yearly Music Trend Signature

This visualization tracks the average values of musical attributes, such as energy or danceability, across the top 10 Spotify songs each year from 2010 to 2019. A multi-line chart displays these trends, using color to distinguish each musical signature, with tooltips revealing the standard deviation of each attribute. The visualization is built with D3.js, Vega-Lite, and the Vega-Lite API, pulling pre-calculated mean and standard deviation data from a CSV file on GitHub.

ZZiyang Gao
71% match