Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Oct 7, 2026

Created on Oct 7, 2026

This scatterplot displays musical attributes for songs from 2010 to 2016, mapping Danceability on the x-axis against Energy on the y-axis, with points colored by Genre and a legend identifying categories. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeTableau10` for categorical coloring, and `d3.csv` to load the remote dataset. The SVG chart includes axis labels, tick formatting via `d3.format`, and hover tooltips with a configurable dwell delay for interactive exploration.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Week 4 - testing

This visualization displays the relationship between danceability and energy for popular music tracks from 2010, with circle size encoding popularity and color-coded genres. Built with React and D3.js v7, the scatter plot uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and renders as SVG. The chart includes axis labels, grid lines, a legend, and tooltips. Data is loaded from a local CSV file and mapped to numeric values for the visual encoding.

VVinayak Revankar

81% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

VVinayak Revankar

81% match

Loading thumbnail…

Fork of HTML Starter

This stacked bar chart visualizes music genre preferences across five age groups, using percentages from a CSV dataset. Each bar represents a genre, segmented into colored sections by age bracket. The visualization uses D3 v7 with `d3.stack()` for data stacking, `d3.scaleLinear()` and `d3.scaleBand()` for scales, and SVG rendering. Interactive tooltips display exact percentage values on hover, while a legend identifies the color encoding for each age group.

Ssahithya.voleti@gmail.com

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

79% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes audio features of songs by selected artists, including energy, liveness, valence, speechiness, and danceability. Users click buttons to load CSV data for different artists, which triggers a D3 v6 animation that redraws the plot lines. The SVG rendering uses d3.scaleLinear for axes, d3.scalePoint for positioning, and d3.scaleOrdinal to color lines by playlist genre, with a legend displayed on the right. The data is sourced from GitHub-hosted CSV files.

Vvedant74

78% match

Loading thumbnail…

Reusable Scatter Plot

This reusable chart displays song data from a Spotify CSV, plotting energy against danceability as colored circles. It demonstrates a flexible D3 architecture where a scatter plot and a pie chart are built as modular functions with getter/setter methods for configuration. The code uses d3.csv for data loading, scaleLinear, extent, axisLeft, and axisBottom for scales and axes, and d3.pie for the pie chart. SVG rendering renders both visualizations, with the pie chart categorizing tracks by popularity levels.

Ssravya010

78% match

Loading thumbnail…

Fork of HTML Starter

This interactive scatterplot visualizes hours played versus rating for video games, with each point representing a game and color-coded by genre. A summary panel displays dataset statistics, while five version buttons allow switching between different mark and channel configurations. The visualization uses D3 v7 with SVG rendering, loading CSV data from a gist, and implements linear scales, axes, and interactive UI controls to explore the data.

SSri Sruthi Khyathi Boggaram

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

77% match