Fork of TP_dataviz

100%

Fork of TP_dataviz

✓ Published1🌍 Public

Last edited Dec 3, 2022

Created on Sep 28, 2022

This interactive visualization explores the music of Metallica through two synchronized views: a radial stacked bar chart showing the top genres by song count, and a zoomable timeline plotting album releases. The radial chart uses D3’s scaleBand, scaleRadial, and arc generators, with hover and click interactions revealing songs via custom tooltips. The timeline, built with d3.scaleTime and d3.zoom, filters data from a local CSV or API fetch. D3 version 4 and 5 are loaded via CDN, with data sourced from the Wasabi API.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of TP_dataviz Projet

This bar chart displays the number of Deezer fans for each album by the band Metallica, retrieved from the Wasabi API. Users can click the Ascending and Descending buttons to re-sort the bars by fan count or release date. The visualization uses D3 v4 with SVG and animated transitions, featuring a tooltip that shows album titles and fan numbers on hover. Data loads asynchronously via `fetch` and is processed with `scaleBand` and `scaleLinear` axes.

BBaptisteJarry

87% match

Loading thumbnail…

Fork of Fork of Fork of TP_dataviz only timeline

This example displays a horizontal timeline of an artist's albums, with each album represented by a circle positioned along a line according to its release date. The visualization uses a D3.js v4 SVG, with circle size mapped to the time span between the album's start and release date. Interacting with a circle by hovering enlarges it, while clicking it expands the circle to fill the chart, fades out other elements, and reveals a details panel. The data is fetched from the Wasabi API and rendered using D3's `select`, `scaleLinear`, and `append` methods.

BBaptisteJarry

80% match

Loading thumbnail…

Fork of TP_dataviz Projet

This example visualizes album data for a specific artist, retrieved from the Wasabi API, as a bar chart showing the number of Deezer fans for each album. Users can sort the bars either by fan count in descending order or by release date in ascending order using the two provided buttons. The visualization is built with D3 v4, featuring SVG rendering with animated transitions, tooltips on mouseover, and scales including `scaleBand` and `scaleLinear` for positioning the bars.

BBaptisteJarry

78% match

Loading thumbnail…

Fork of TP_dataviz Projet

This visualization displays the number of Deezer fans for each album by a specific artist, fetched from the Wasabi API. Users can click the Ascending or Descending buttons to reorder the bar chart by fan count or release date. The bars appear sequentially via a staggered transition with `delay`. The code uses D3 v4’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the SVG chart, with data loaded using `csv` and `fetch`.

DDIANJING FAN

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

75% match

Loading thumbnail…

Fork of Fork of Fork of TP_dataviz stacked

This radial bar chart visualizes the frequency of song genres across Rihanna's albums, using data fetched from the Wasabi API. Each colored arc represents a genre, with its length proportional to the number of songs. Hovering reveals the genre name, while clicking displays a pop-up list of matching song titles. A separate timeline chart below plots album release dates, with circles sized by time since release. The visualization is built with D3 v4, using `d3.scaleBand`, `d3.scaleRadial`, `d3.arc`, and SVG rendering, with animations for transitions and interactions.

BBaptisteJarry

75% match

Loading thumbnail…

Fork of Fork of TP_dataviz

This visualization presents a radial bar chart depicting the top 10 music genres for the artist Rihanna, based on data retrieved from the wasabi.i3s.unice.fr API. Each arc represents a genre, with its length scaled to the number of songs. Hovering over an arc reveals the genre name, and clicking it displays a grid of up to 15 song titles. Built with D3.js (v4), the code uses `d3.scaleBand`, `d3.scaleRadial`, and `d3.arc` to construct the chart, and includes a separate interactive timeline component built with the same library that filters data by release date.

BBaptisteJarry

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

73% match