Fork of TP_dataviz Projet

100%

Fork of TP_dataviz Projet

✓ Published1🌍 Public

Last edited Dec 2, 2022

Created on Dec 2, 2022

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.

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

93% match

Loading thumbnail…

TP_dataviz Projet

This example displays the number of Deezer fans for each album by a specific artist as a bar chart. Users can sort the bars in ascending or descending order using two buttons, with transitions animating the updates. The visualization fetches data from the Wasabi I3S API, and uses d3.scaleBand and d3.scaleLinear for the axes. Tooltips appear on mouseover to show album titles and fan counts. The code relies on D3 v4 selections, transitions, and event handling.

GGinnWG

91% match

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

90% match

Loading thumbnail…

Try this bar graph of TP_dataviz Projet

This bar graph displays the number of Deezer fans for each album by a specific artist, with bars sorted either by fan count or release date via Ascending and Descending buttons. Built with D3.js v4, it fetches JSON data from the Wasabi API, renders an SVG with animated bar transitions, and includes a tooltip showing album title and fan count on hover. The visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition` for smooth updates, demonstrating interactive data sorting and display.

VVikil Lakkavatri

88% match

Loading thumbnail…

Histogram TP_dataviz Projet

This example displays a histogram of album titles on the x-axis against their Deezer fan counts on the y-axis, with bars animating into place via a staggered `transition`. The visualization fetches artist data from the Wasabi API, uses D3’s `scaleBand` and `scaleLinear` for axes, and includes interactive tooltips via `mouseover` and `mousemove` events. Two buttons, labeled Ascending and Descending, trigger sorting of the albums by fan count or release date, though the sort logic operates on a pre-fetched list. The SVG rendering is crisp, with bars colored in a muted green.

TToly

85% match

Loading thumbnail…

Fork of TP_dataviz Projet

This example shows a lollipop chart comparing the number of Deezer fans per country, with each country represented by a vertical line and a green circle marker. The chart uses D3 v4 to load JSON data from `data.json`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to determine the domain.

GGinnWG

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

82% match

Loading thumbnail…

new

This example visualizes the number of Deezer fans for an artist’s albums as a bar chart, with buttons to reorder the bars by fan count or release date. It loads album data from the Wasabi API and renders animated SVG bars using d3.scaleBand and d3.scaleLinear, with transitions for updates. The chart includes an axis, rotated labels, and a tooltip that shows album title and fan count on hover. Sorting and filtering logic is implemented with custom JavaScript functions.

GGinnWG

81% match