TP_dataviz Projet

100%

TP_dataviz Projet

✓ Published9🌍 Public

Last edited Dec 2, 2022

Created on Sep 28, 2022

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.

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…

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

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

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

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

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

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

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

81% match

Loading thumbnail…

Projet UXDM : Toky, Thibaut, Mattéo, Johan, Abdel

This interactive dashboard visualizes the WASABI music dataset, showing the number of albums released by country on a choropleth map. Clicking a country reveals a modal offering three detailed views: a bar chart for top music genres, a lollipop chart for popular artists, and a line chart showing album counts per year. Built with D3.js v5, it uses `d3.geoPath` with a Mercator projection and TopoJSON for the map, while `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` handle the charts. Data is pre-extracted into JSON files for performance, and the interface supports zooming, tooltips, and navigation back to the map.

TToky R

74% match