Skip to main content
SimilarExport ZIP
100%

CS 360 Final Project d3: Bubble Chart in d3

✓ Published0🌍 Public
SSean Sanchez
Last edited Apr 19, 2022
Created on Apr 16, 2022
Forked from HTML Starter

This bubble chart visualizes music review scores over time, with each circle’s x-position mapped to publication date and its y-position to the review score, while color encodes genre. Hovering a circle reveals the genre via a custom tooltip, and selecting a genre highlights only its related bubbles by adjusting opacity. Built with D3 v4 and React, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` for axes and coloring, with SVG rendering and animated transitions for tooltip display.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart with D3.js

This example shows a bubble chart that visualizes product performance using Revenue to size each circle and Profit to influence color, with bubbles randomly positioned across the SVG canvas. Built with D3.js v5 and React, it loads data from a CSV file using `d3.csv` and renders circles and labels through SVG selections. The code uses `d3.scaleLinear` for mapping Revenue and Profit to radii, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and adds tooltips via SVG `title` elements. Axes labels for Revenue and Profit are manually positioned as text elements.

Hharsha
75% 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
75% match
Loading thumbnail…

Q4

This interactive visualization, part of a multi-chart music data explorer, presents a bubble chart analyzing Spotify artists. It plots each artist's average song popularity on the x-axis against their average valence (musical positivity) on the y-axis, with bubble size representing the total number of tracks per artist. Hovering over a bubble reveals the artist's name and track count via a tooltip. The chart is built with D3.js v4, using `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` for colors, and loads data from a CSV file. It references other linked bar charts for song genres and artist popularity.

UUmarani Vemula
75% match
Loading thumbnail…

A5-Bubble Chart in D3

This visualization maps Spotify’s top songs of 2023 onto a bubble chart that plots each track’s danceability and energy percentages, with circle size encoding total streams. The D3.js code uses `d3.csv` to load the dataset, `d3.scaleLinear` to build the x- and y-axes, and `d3.scaleSqrt` to size the bubbles. Hovering over a circle triggers mouseover events that reveal the track’s name and artist in a custom tooltip, while the hotpink fill changes to orange for emphasis.

Bbhavi.kenia@gmail.com
75% match
Loading thumbnail…

Bubble chart

This bubble chart visualizes Spotify track data, plotting the average popularity (x-axis) against the average valence (y-axis) for each artist, with bubble size representing the total number of tracks. The chart uses an SVG renderer with D3.js v4 and a color scale from `d3-scale-chromatic` to differentiate artists. Hovering over a bubble triggers a tooltip displaying the artist name and track count. Data is loaded from a remote CSV file and aggregated using JavaScript's `reduce` method to compute averages and counts.

JJingya
75% match
Loading thumbnail…

Bubble Chart

This bubble chart visualizes video game data by plotting average play length on the x-axis against review scores on the y-axis, with circle radius representing average completionist length and color encoding the console platform. It uses d3.csv to load the dataset, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeSet1 for categorical colors. The SVG visualization includes hover tooltips via the title element, axis labels, and custom legends for both color and size, all rendered through D3 v6 selection and data-join methods.

AAllen Ho
75% 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
75% match
Loading thumbnail…

Activity6_Question4

This visualization uses a bubble chart to compare the proportions of movie ratings across different genres. A grid of circles, colored by genre using `d3.schemeSet2`, shows the share of titles in five rating categories (from "below 5.0" to "above 8.5"), with bubble size scaled by `d3.scaleLinear` to encode proportion values. Built with D3 v7, the SVG chart includes labeled axes, an ordinal color scale, and interactive tooltips that display the exact percentage when hovering over each circle. The data is structured as static arrays in JavaScript, rendered with animated transitions on hover.

JJayanth Reddy Sripathi
74% match