Fork of Fork of TP_dataviz

100%

Fork of Fork of TP_dataviz

✓ Published2🌍 Public

Last edited Nov 30, 2022

Created on Nov 30, 2022

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.

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

95% match

Loading thumbnail…

Fork of genre album anissa

This radial bar chart displays the genre distribution of songs across an artist’s albums, with each genre represented by a colored arc whose length corresponds to song count. The visualization fetches artist data from the Wasabi API, aggregates genres by iterating through album songs, and renders the result using D3 v4’s `d3.scaleBand`, `d3.scaleRadial`, and `d3.arc` APIs. Labels are positioned around the circle with rotated text, and the SVG output is generated within an HTML page.

AAnissa Belkelfa

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

78% match

Loading thumbnail…

Fork of circular barplot

A circular barplot visualizes the distribution of music genres across an artist's albums, with each genre represented as a radial bar whose length corresponds to its song count. The chart uses d3.scaleBand for angular positioning and d3.scaleRadial for bar radii, rendering arcs via d3.arc. Genre labels rotate around the plot, flipping orientation based on their angular position. Data is fetched asynchronously from the Wasabi API, aggregated from nested album and song records, and drawn using SVG within a D3 v7 selection.

PPLD3508A

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

76% match

Loading thumbnail…

UX - CIRCULAR BARPLOT

A circular barplot visualizes the distribution of music genres across an artist's albums, fetched from the Wasabi API. Each genre corresponds to a colored arc, with its radial length proportional to the number of song occurrences. The SVG chart uses D3 v7’s `scaleBand` for angular positioning and `scaleRadial` for bar length, drawing arcs with `d3.arc`. Hovering highlights a bar and displays a tooltip, implemented via D3 selections and event listeners.

AAnissa Belkelfa

75% match

Loading thumbnail…

Fork of Card D3

This visualization displays a radar chart comparing music artists across five genre axes: hip hop/rap/R&B, electronic/dance, Latin pop, pop, and rock. Each artist is represented by a colored polygon showing their genre affinity values. The chart uses D3 v4 within a React framework, rendering SVG elements with animated transitions between levels. Tooltips appear on hover to show artist names and values.

AAnissa Belkelfa

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

74% match