Skip to main content
SimilarExport ZIP
100%

Fork of Jinsu Bubble

✓ Published0🌍 Public
Wwaterm80
Last edited Nov 16, 2022
Created on Nov 16, 2022
Forked from Jinsu Bubble

This visualization displays song popularity and genre using a bubble chart, with each bubble sized by popularity and colored by genre according to a Tableau10 ordinal scale. The chart packs hierarchical leaves via `d3.pack` and renders SVG circles, labels, and tooltips from a CSV dataset. A legend built with custom selection methods shows genre color mappings. The code uses D3 v7 APIs including `d3.hierarchy`, `d3.map`, `d3.InternSet`, and `d3.scaleOrdinal`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Jinsu Bubble

This bubble chart displays hierarchical data as a packed circle layout, with each bubble sized by a logarithmic scale and colored by category. The visualization uses D3 v7’s `d3.hierarchy` and `d3.pack` to compute the layout, rendering SVG circles and text labels for each node. Tooltips show the full ID and category on hover, while a color legend built with a custom `colorScale` function explains the category mapping. Data is loaded from a CSV via `d3.csv`.

MMinwoo Pak
83% match
Loading thumbnail…

Jinsu - Bubblechart

This bubble chart visualizes gene panel data by category, using circle area to represent values and color to distinguish groups such as Origin, Kinase Family, and Related Disease. Built with React and D3 v7, it computes a hierarchical pack layout via `d3.pack` and `d3.hierarchy`, then renders SVG circles and labels with `d3.select` and `d3.join`. A color legend is generated from `d3.scaleOrdinal` with `d3.schemeTableau10`, and tooltips display the full id and category. The data comes from `panel_data.csv`.

MMinwoo Pak
80% match
Loading thumbnail…

Fork of Bubble chart

This visualization shows the relationship between popularity and valence for Spotify artists, using a bubble chart where each circle represents an artist. The x-axis maps average popularity, the y-axis maps average valence (musical positivity), and the bubble size indicates the number of tracks per artist. Hovering over a bubble reveals the artist name and track count via a tooltip. The code loads CSV data with d3.csv, aggregates it using JavaScript `reduce` methods, and renders SVG circles with D3 v4 scale functions for positioning, size, and color.

NNathelen
77% match
Loading thumbnail…

Fork of 310551076_test

A histogram displays the popularity of the top ten songs for a selected music genre, chosen from a dropdown menu. Each bar’s height corresponds to the track’s popularity value on a fixed 0–100 scale. The visualization uses D3 v3 (imported via `d3.scaleBand` and `d3.scaleLinear`) to render SVG rectangles with a transition animation when the genre changes. Data comes from a CSV file, and the genre list includes many categories like pop, rock, and jazz.

陳陳泰元
76% match
Loading thumbnail…

Fork of bubblechart

This interactive bubble chart allows users to explore a multivariate dataset by selecting which numeric columns to map to the x-axis, y-axis, and bubble radius, and which categorical column to use for color encoding. The visualization updates dynamically, using D3.js v7 scales and SVG circles to render the data. Dropdown menus filter numeric and categorical columns from the loaded CSV file, which is fetched from a GitHub repository. The chart employs `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

LLayaMyadam@my.unt.edu
75% match
Loading thumbnail…

Fork of Fork of Pie Chart Artistes

This donut chart shows the distribution of music genres for a specific artist, displaying each genre’s percentage on hover via a tooltip. The visualization uses `d3.pie` and `d3.arc` to generate the slices, with `d3.scaleOrdinal` and a custom color range for genre encoding. It applies `d3.select` for mouse interaction and fetches additional genre data from the Wasabi API. The chart is rendered as SVG, with labels positioned using `labelArc.centroid`, and data is loaded from a CSV file.

AAnissa Belkelfa
75% match
Loading thumbnail…

Fork of music2

This visualization presents a bar chart of average track popularity aggregated by a selected categorical column from a Spotify dataset. Users can interact with a range slider to filter data and click on a bar to transition to a scatter plot. The rendering uses D3.js to create SVG bar and scatter plots with transitions and tooltips, alongside jQuery UI for the slider. The bar chart’s color scale interpolates blues to indicate popularity values.

Aa15923647
74% 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
74% match