Skip to main content
SimilarExport ZIP
100%

Histogram TP_dataviz Projet

✓ Published0🌍 Public
TToly
Last edited Dec 31, 2022
Created on Dec 31, 2022
Forked from 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.

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…

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
88% 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
87% 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
85% 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
85% 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
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
Loading thumbnail…

Untitled

This interactive visualization displays a histogram of numeric attributes from the Spotify top-10s dataset, with a second card showing a scatter plot. Users can select columns and dynamically adjust bin width by dragging on a button. The code uses `d3.histogram()` with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for rendering, while transitions animate axis updates and bar shapes. Hovering highlights bars and reveals count labels, with SVG output generated via D3 v4.

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