Projet UX Brouillon

100%

Projet UX Brouillon

✓ Published0🌍 Public

Last edited Dec 4, 2022

Created on Dec 1, 2022

This interactive bar chart displays the top ten music genres for a selected country, with data loaded from a local JSON file containing genre counts per country. The visualization uses D3.js v5 (d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to render an SVG with rotated genre labels for readability. A tooltip appears on mouseover to show each genre's name and count, while a back button is present but non-functional in the current draft. The chart initializes for France ("FR") as a starting example.

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…

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

This interactive dashboard visualizes global music data through a choropleth map. Users click a country to see its total album count and select from three additional charts: a bar chart of top genres, a lollipop chart of popular artists, and a line chart of albums per year. The map uses d3.geoPath with TopoJSON and Mercator projection, while the detail charts employ d3.scaleBand, d3.scaleLinear, and d3.scaleTime. Colors encode album counts via a linear scale, and tooltips display hover details across all views.

SSeegson

80% match

Loading thumbnail…

D3js gab

This bar chart displays the popularity of 50 music genres, ranked by a sum of artist popularity. The visualization uses a standard vertical bar layout with an x-axis for genre names and a y-axis for the popularity sum. Built with D3.js v3, the code uses `d3.select`, `d3.json`, `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to fetch data from a remote API, create the scales, and render the SVG bars. The chart includes rotated axis labels and a grid.

DDevMoutarde

76% match

Loading thumbnail…

Fork of Projet UX

This lollipop chart displays the top ten most popular artists for a selected country, ranked by a numerical count, with circles marking each artist's value. The visualization is built using D3 v5, reading artist data from a JSON file and rendering SVG elements. The chart uses `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with axes drawn via `axisBottom` and `axisLeft`. The data updates dynamically by country, as initiated with the 'FR' code.

Aabdeldev504

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

76% match

Loading thumbnail…

Fork of Fork of Projet UX

This visualization displays the top 10 most popular artists for a selected country using a lollipop chart. It loads artist rankings from a data.json file, mapping country codes to artist names and their popularity counts. The chart uses d3.scaleBand for the x-axis positioning and d3.scaleLinear for the y-axis scale, with SVG lines and circles rendered to form the lollipop design. Axis labels are rotated for readability, and the chart initializes with French artist data.

TTEKMS

75% match

Loading thumbnail…

Track_Genre_Ranking Bar Chart

This interactive bar chart ranks the top 10 track genres by a user-selected audio attribute, such as popularity, danceability, or energy. It uses React state to manage the selected attribute and D3 v7 utilities like `csv`, `scaleBand`, `scaleLinear`, and `nest` to aggregate and sort the data from a CSV file. The visualization is rendered as SVG with custom `AxisBottom`, `AxisLeft`, and `Marks` components.

Sstephanie0215

73% match

Loading thumbnail…

circular barplot reunion label et bande

This circular barplot displays the distribution of musical genres across an artist’s albums and songs, with each genre represented as a radial bar whose length encodes its frequency. The example starts with a full dataset of genres, then updates after five seconds to show only two selected genres, demonstrating dynamic data filtering. Built with D3 v7, the chart uses `d3.scaleBand` for angular positioning, `d3.scaleRadial` for bar lengths, and `d3.arc` to draw the circular segments. Genre labels are rotated and positioned around the circle using `transform` attributes, with data fetched from the Wasabi API.

PPLD3508A

73% match

Loading thumbnail…

Project Line Chart

This project line chart tracks musical release trends by genre, displaying the number of songs released per year as distinct colored lines. The visualization uses D3 v5 with SVG rendering, employing `d3.nest()` to group data by genre and `d3.line()` to generate the paths. Data comes from a local JSON file loaded via `d3.json()`, which is processed and aggregated before being displayed with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis.

EElodie31190

72% match