Skip to main content
SimilarExport ZIP
100%

Popular Songs dataset

✓ Published0🌍 Public
Mmynedisanjana@gmail.com
Last edited Feb 28, 2026
Created on Feb 28, 2026
Forked from React & D3 Starter

This example summarizes a dataset of popular songs by loading it from a GitHub Gist as CSV. The page uses D3.js v7 to fetch and parse the data, then displays the total row and column counts, column names, and a preview table of the first ten records. Inline HTML strings construct the summary and table, while a static SVG circle is also included. The file size is estimated using the Fetch API, and styling is handled with CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization viz

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.

Ssakethpapareddy@gmail.com
76% match
Loading thumbnail…

Song List

This visualization displays a summary of a dataset from the Million Song Dataset, showing the row count, column count, and size in kilobytes, followed by the first ten rows as JSON. It loads the data using `d3.json` from a CSV hosted on VizHub, then prints the results as text in a terminal-style layout with green monospace text on a black background. The code uses D3 v5’s `select`, `json`, and `csvFormat` to fetch and format the data, appending `<pre>` and `<hr>` elements to the body.

RRubens
72% match
Loading thumbnail…

Fork of React & D3 Starter

This example presents a reusable React-based scatter plot that visualizes the relationship between song duration and popularity from a CSV dataset. The visualization employs D3.js v7 for data processing, linear scaling, and axis generation, while React 19 manages the component structure. The code uses `d3.csv()` to load data, `d3.scaleLinear()` for coordinate mapping, and `d3.axisBottom()` and `d3.axisLeft()` to render axes. All elements are drawn as SVG circles with a steelblue fill, positioned using `cx` and `cy` attributes derived from the scaled data values.

Mmynedisanjana@gmail.com
72% match
Loading thumbnail…

CSV Data

This example visualizes aggregated popularity by music genre using CSV data loaded from a remote GitHub URL. The bar chart shows how track popularity sums vary across genres, with each genre represented as a distinct bar. The code uses d3.csv to fetch and parse the dataset, then d3.nest and d3.sum to group records by track_genre and calculate total popularity. The visualization runs in a React framework with D3 v5, though the displayed output relies solely on the data aggregation logic without additional chart rendering.

Wwaterm80
71% match
Loading thumbnail…

Fork of HTML Starter

This example presents a summary of a CSV dataset loaded from a remote GitHub Gist. It displays the file size in kilobytes, the total row count, and the number of columns in a styled box on the page. The visualization uses D3 version 7's `d3.csvParse` method to parse the fetched text, then logs the same metrics to the browser console. A simple static SVG circle is included as a placeholder, while the primary output is text-based rather than a chart.

445.saiful@gmail.com
71% match
Loading thumbnail…

Fork of Hello HTML

This example displays a CSV dataset loaded from a GitHub Gist, summarizing the total row count and previewing the first five records in an HTML table. It then renders an SVG bar chart showing the first column as categorical labels on the x-axis and the second column as quantitative values on the y-axis using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The chart title and axes are added via D3 selections. Styling uses embedded CSS, and data loading relies on `d3.csv`.

Ssowjanyateppali4202@gmail.com
71% 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
71% match
Loading thumbnail…

scatter plot

This scatter plot displays the duration of 100 popular songs on the y-axis against their titles on the x-axis, using a point scale for song names and a linear scale for duration. Each song is represented by a steel-blue circle with a radius of 10 pixels. The visualization loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.scalePoint`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output is generated through D3 v5, with margins applied to position the chart within a 960-by-1200 pixel canvas.

GGogineni44
71% match