Fork of 310551076_test

100%

Fork of 310551076_test

✓ Published0🌍 Public

Last edited Nov 22, 2022

Created on Nov 22, 2022

Forked from 310551076_HW3_Popularity_Bar_Plot

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

310551076_HW3_Popularity_Bar_Plot

This interactive bar plot displays the top ten tracks by popularity within a selected music genre, using data loaded from a CSV file. A dropdown menu lets users switch between genres, triggering a smooth transition animation as bars update to reflect the new ranking. The visualization is built with D3.js v7, using `scaleBand` and `scaleLinear` for axes, `transition().duration()` for animated updates, and SVG rendering with rotated axis labels for track names.

陳陳泰元

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

77% match

Loading thumbnail…

Fork of music rating

This visualization uses stacked horizontal bars to show how music ratings are distributed across four genres: Rock, Pop, Jazz, and Country. Each bar is segmented into five rating categories, from below 5.0 to above 8.5, with colors assigned by D3's `scaleOrdinal`. Hovering over a segment reveals the exact percentage for that genre and rating category via a tooltip. The chart is built with D3 v7, using `d3.stack`, `d3.scaleLinear`, and `d3.scaleBand` to position the bars, and reads its data from a CSV file.

Bbogasamudramvamsikrishnareddy

77% match

Loading thumbnail…

Fork of 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`.

Wwaterm80

76% match

Loading thumbnail…

D3js gab

This bar chart displays the popularity of 50 music genres, ranked by a sum of artist popularity. The visualization uses a standard vertical bar layout with an x-axis for genre names and a y-axis for the popularity sum. Built with D3.js v3, the code uses `d3.select`, `d3.json`, `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to fetch data from a remote API, create the scales, and render the SVG bars. The chart includes rotated axis labels and a grid.

DDevMoutarde

75% match

Loading thumbnail…

Fork of Fork of Histogram with Iris Data - Data Decoder - July18

This interactive visualization explores music trends, allowing users to select which numeric attribute to display on the X and Y axes from a dropdown menu. It renders a dual-histogram overlay using React and D3 v7, featuring both a bar chart for x-axis bins and a scatter of circles for y-axis bins, colored by species via an ordinal scale. The interface updates state through React hooks, and the data is loaded from a CSV of yearly music attributes using D3's `csv` and `bin` functions. The SVG output includes custom axes and tooltips for each mark.

Nnikki81140

75% match

Loading thumbnail…

Fork of Fork of circular barplot

A circular barplot displays the genre distribution of David Guetta's songs, fetched from the Wasabi API. Each bar's length encodes song count per genre, with labels rotated around the circle for readability. Built with D3 v7, it uses `d3.scaleBand` for angular positions, `d3.scaleRadial` for radii, and `d3.arc` to render SVG paths. Data is aggregated client-side by iterating over album and song objects before updating the visualization.

AAnissa Belkelfa

75% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 100 songs on Spotify as a horizontal bar chart, showing the duration of each track. The code uses React hooks (useState, useEffect) to load and manage CSV data from a GitHub gist, while D3 v5 provides scales (scaleBand, scaleLinear) and axis generation. SVG rectangles render the bars, with x-axis ticks drawn manually. The chart only plots the first 20 songs from the dataset, with tempo mapped to the y-axis and duration to the x-axis.

99176371431

75% match