Data Visualization viz

100%

Data Visualization viz

✓ Published0🌍 Public

Last edited Oct 5, 2025

Created on Oct 5, 2025

The visualization loads a CSV sample of songs and presents a data summary with row and column counts, then renders an SVG scatter plot of Year versus Energy, with circle size encoding popularity. Hovering reveals artist, song, year, energy, and popularity details. The code uses D3 v7's `d3.csv` to fetch and parse data with type inference, and `d3.select` to build the chart. A preview shows the first five rows formatted as JSON. The dark-themed interface includes KPI cards and a source link to the raw dataset.

AI-generated description

MIT Licensed

Similar vizzes

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

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

index(11823810).html

This interactive D3 visualization demonstrates how to load and explore CSV data, displaying it as a bar chart and computing summary statistics. Users can filter the dataset by category and previous value through dropdown menus, with hover tooltips showing detailed records. The page also includes a small SVG icon showcase and prominent metric cards alongside the main visualization. The implementation uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for scales, and d3.transition for animated bar updates.

Vvineelaviswanadham07@gmail.com

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

78% match

Loading thumbnail…

Question4

This interactive visualization explores a music dataset by presenting three linked views. A bubble chart plots artists based on average popularity and valence, with circle size representing track count. Two additional bar charts display the top ten music genres and artists by track count, filtered for tracks with popularity scores above 80. All charts use SVG rendering with D3.js v4, featuring tooltips on hover and links between views. Data is loaded from external CSV files and processed using JavaScript array methods like reduce and sort.

Hharipriyaa07

77% match

Loading thumbnail…

Untitled

This interactive line chart displays the evolution of audio features—energy, liveness, valence, speechiness, and danceability—across playlist genres for different artists. Users select an artist via buttons, which triggers a D3.js animation that removes existing data groups and redraws the chart from a corresponding CSV file. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.scaleOrdinal with a custom color palette to distinguish genres. SVG elements and a legend are rendered on a fixed canvas, with transitions applied when updating the lines.

Ssiddhant0704

77% match

Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between song release year and streaming counts for popular songs, with purple circles plotted across axes for release year and stream totals. The visualization uses D3.js v7 to load CSV data from a GitHub gist, then applies d3.scaleLinear for both x and y axes, d3.extent to determine the year domain, and d3.max for the stream range. Circles are appended as SVG elements, with d3.axisBottom and d3.axisLeft providing the labeled axes.

Mmynedisanjana@gmail.com

76% match

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

76% match