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

100%

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

✓ Published0🌍 Public

Last edited Dec 4, 2022

Created on Dec 4, 2022

Forked from Merge v1

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.

AI-generated description

Membres du groupe :

Abdelilah BOUJLIKH
Johan RIEU-PATEY
Mattéo STAAL
Thibaut DARE
Tokiniriana RABEARIVELO

Vidéo de présentation : https://youtu.be/1WJKFykkfSY

Chloropleth Map : Nombre d'albums sorti par pays en total. Bar Chart : Top 10 des genres d'album pour le pays sélectionné. Lollipop Chart : Top 10 des artistes les plus populaire du pays sélectionné. Line Chart : L'évolution du nombre d'album sorti par année pour le pays sélectionné.

Pour des raisons de performances, nous avons décidé d'extraire les données de WASABI en fichiers JSON afin de pouvoir les exploiter plus efficacement.

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

93% match

Loading thumbnail…

Merge v1

This interactive dashboard visualizes the WASABI music dataset through a chloropleth map showing total album counts per country, with clickable countries opening a modal offering three additional charts: a bar chart of top genres, a lollipop chart of most popular artists, and a line chart tracking album releases over time. Built with D3 v5 and rendered as SVG, the map uses d3.geoPath and TopoJSON for geographic features, while the zoom behavior enables map navigation. Data is pre-extracted into JSON files for performance, with tooltips providing country-specific details.

TToky R

84% match

Loading thumbnail…

TP 10-12-22

This map visualization displays the geographic distribution of music albums, with country colors shaded by count according to a green scale. It shows a choropleth of world data where users can hover to see precise album counts and click to open a modal with detailed statistics about genres, artists, and yearly totals. The implementation uses D3 v5 with d3.geoMercator projection, d3.geoPath, and a d3.scaleLinear color scale, pulling TopoJSON country boundaries from world-atlas and loading country album counts from a local JSON file. Zooming is enabled via d3.zoom, with Bootstrap modals and tooltips providing interactivity.

TToky R

80% match

Loading thumbnail…

Sauvegarde 4-11-22

This data visualization is a choropleth map showing the number of music albums per country, rendered as an interactive SVG using D3 v5. The map uses a green color scale to represent album counts, and users can hover over countries to see details via a tooltip or click to open a modal with statistics. The code leverages D3’s `geoMercator` projection, `geoPath`, and `scaleLinear` for color mapping, and loads world map data from the `world-atlas` package alongside a local `data_map.json` file.

TToky R

77% match

Loading thumbnail…

TP Line chart

This interactive visualization displays a world map where each country is colored and clickable. Hovering over a country reveals its name via a tooltip, while clicking opens a modal window presenting statistics about that nation, such as the total number of albums, top 10 genres, most popular artists, and yearly album counts. The project uses d3.geoMercator and d3.geoPath to render the map from world-atlas data, d3.scaleLinear for colored fills, and d3.zoom to enable panning and zooming of the SVG. The modal interface is built with Bootstrap, and the underlying data is loaded via d3.tsv and d3.json.

TToky R

77% match

Loading thumbnail…

Projet UX Brouillon

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.

TTEKMS

76% match

Loading thumbnail…

Sauvegarde 02/12/2022

This choropleth map visualizes the world using a green color scale, where each country is rendered as an SVG path and is interactive. Clicking a country opens a Bootstrap modal displaying statistics about that nation, including the total number of albums, top genres, popular artists, and albums per year. The map is built with D3.js v5 and TopoJSON, using a Mercator projection (`d3.geoMercator`) and `d3.geoPath` to generate the shapes. Country names and ISO codes come from a TSV file, while geographic boundaries are loaded from a world-atlas JSON.

TToky R

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

74% match