Skip to main content
SimilarExport ZIP
100%

data vis hw3

✓ Published0🌍 Public
Yyeeet0421
Last edited Nov 20, 2022
Created on Nov 4, 2022
Forked from data vis hw1

This interactive dashboard explores a Spotify dataset, displaying a genre treemap alongside a bar chart of track counts for the top 10 artists within a selected genre. The interface includes 64 small scatter plots comparing musical attributes for the chosen genre, with a highlighted overlay for a selected artist. Built with React and D3 v7, the visualization uses SVG rendering, d3.treemap for the genre hierarchy, d3.scaleBand for the bar chart, and d3.scaleLinear for the scatter plots. Users can click the treemap to change genres and bar chart bars to filter artists.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

109705001_hw9

This interactive Spotify dashboard presents three linked views of a music dataset: a sortable popularity leaderboard, a radar-chart comparison of genre audio features, and a correlation heatmap of track attributes. Users can switch between these views and adjust their parameters, such as sorting by genre or artist. The leaderboard uses a `d3.scaleBand` bar chart, while radar charts are built with `d3.select` and SVG polygons. The heatmap computes correlations with `jeezy`'s `arr.correlationMatrix` and applies `d3-scale-chromatic`'s `chroma.scale` for color. All views include interactive tooltips and animations.

Yyihsuan
86% match
Loading thumbnail…

Data Visualization - Histogram Plots of Spotify Track Dataset

This interactive histogram visualization lets users explore a Spotify track dataset by comparing the distributions of ten audio features, including popularity, energy, danceability, and tempo. Two dropdown menus select which features to plot on the x- and y-axes, while two additional menus choose musical genres to highlight in the scatterplot. The visualization renders as an SVG using D3.js v5, with React dropdown components for the menus, and includes animated transitions and tooltips. The code relies on D3 scales, axes, and the d3-legend library to display the genre colors.

JJuliachien
86% match
Loading thumbnail…

Data Visualization - Bubble Chart of Spotify Track Dataset

This interactive visualization presents a radar chart of Spotify track data, allowing users to compare the audio characteristics of songs across three selected genres. The chart is built with D3.js v5 and renders using SVG, with animation applied to transitions when the genre selections change. Users can choose genres from three dropdown menus, and the radar chart dynamically updates to display the tracks’ attributes. The implementation relies on D3’s selection and merge methods for the interactive menus and uses SVG paths for the radar chart’s geometric structures.

JJuliachien
84% match
Loading thumbnail…

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Nnikki81140
83% match
Loading thumbnail…

music vis

This interactive scatterplot maps Spotify track attributes against one another, letting users select any two numeric columns from the dataset to compare on the x- and y-axes. The visualization updates dynamically through D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering circles positioned by the chosen metrics. The code assigns CSS classes to each point based on a track genre field, although the dataset’s example rows lack a genre column, so the legend and color-coding rely on that optional data. The SVG plot includes labeled axes and a title reflecting the current variable pair.

Aa15923647
83% match
Loading thumbnail…

Data Visualization Homework 9: Spotify Tracks Dataset

This visualization explores a Spotify tracks dataset through multiple interactive views: a grid of per-attribute pie charts and histograms, a correlation matrix, a stacked bar chart of genre popularity, and a scatter plot relating artist and album popularity. Users switch views via dropdown menus and filter by genre. D3 v5 handles the SVG rendering, animations, and scales, while the jeezy and data2grid libraries compute the correlation matrix. The stacked bar chart uses `d3.stack` and a custom tooltip, and a legend highlights categories on mouseover.

Dderrick373519@gmail.com
83% match
Loading thumbnail…

Spotify Tracks Dataset

This interactive visualization explores a Spotify tracks dataset, letting users examine tracks by artist, album, and genre through a series of linked bar charts. Each chart displays tracks sorted by popularity, with dropdown menus to filter the data. Clicking a bar reveals detailed track information, including danceability, energy, and tempo. Built with Vue and D3 v5, the SVG-based charts use `scaleBand` and `scaleLinear` for axes and `select` for DOM manipulation, with a custom tooltip providing hover feedback. The dataset includes track metadata such as artist, album, and audio features.

Cchristina030
83% match
Loading thumbnail…

Spotify_Interactive Polished Scatter Plot_two_track_genre

This interactive scatter plot explores Spotify track attributes, such as danceability, energy, and popularity, across two selectable musical genres. Users can choose attributes from dropdown menus to define the x- and y-axes, and hover over points to see the artist and track name. Circle colors encode the track genre. Built with React, the visualization uses D3 for scales, axes, and the color legend, rendering as SVG.

Sstephanie0215
83% match