Skip to main content
Log in
B

BaptisteJarry

@BaptisteJrr·15 public vizzes

Loading thumbnail…

dboard

This dashboard lets users explore a music artist database by country, showing the top artists per country and then diving into an artist's top tracks, related artists, album chronology, and music genres. It uses D3.js (v4) with React, fetching data from a remote API. The visualization employs an SVG map with a geoMercator projection for the country overview and various charts, including bar charts and a timeline, for the detailed artist views.

Dec 4, 2022
Loading thumbnail…

V2 network

This network visualization displays an artist's collaborations and their relative popularity, using node size and labels to show each artist's number of Deezer fans. The graph is built by querying the wasabi.i3s.unice.fr API to fetch an artist's data, then processing their albums and songs to find co-writers, who are then converted into nodes and links. The visualization uses D3's force simulation (`d3.forceSimulation`), force-directed layout (`d3.forceLink`, `d3.forceManyBody`), and drag interaction (`d3.drag`), rendered as SVG.

Dec 3, 2022
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.

Dec 2, 2022
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.

Dec 2, 2022
Loading thumbnail…

help jin

This example visualizes the number of Deezer fans for Rihanna’s albums using an animated bar chart. The bars appear sequentially with a transition, and hovering over them displays a tooltip with the album title and fan count. Data is fetched asynchronously from the Wasabi API via `fetch`, then processed with local ES6 modules. The chart uses D3 v4’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with buttons included to reorder the bars by ascending or descending fan values.

Nov 30, 2022
Loading thumbnail…

Fork of Fork of Fork of TP_dataviz stacked

This radial bar chart visualizes the frequency of song genres across Rihanna's albums, using data fetched from the Wasabi API. Each colored arc represents a genre, with its length proportional to the number of songs. Hovering reveals the genre name, while clicking displays a pop-up list of matching song titles. A separate timeline chart below plots album release dates, with circles sized by time since release. The visualization is built with D3 v4, using `d3.scaleBand`, `d3.scaleRadial`, `d3.arc`, and SVG rendering, with animations for transitions and interactions.

Nov 30, 2022
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.

Nov 30, 2022
Loading thumbnail…

Fork of Fork of TP_dataviz

This visualization presents a radial bar chart depicting the top 10 music genres for the artist Rihanna, based on data retrieved from the wasabi.i3s.unice.fr API. Each arc represents a genre, with its length scaled to the number of songs. Hovering over an arc reveals the genre name, and clicking it displays a grid of up to 15 song titles. Built with D3.js (v4), the code uses `d3.scaleBand`, `d3.scaleRadial`, and `d3.arc` to construct the chart, and includes a separate interactive timeline component built with the same library that filters data by release date.

Nov 30, 2022
Loading thumbnail…

amélioration graph

This example visualizes a network of musical artists and their collaborators, showing connections between an artist and the writers they have worked with. It fetches artist data from the Wasabi API and builds a force-directed graph using d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCenter. Node circles and connecting lines are rendered in SVG, with hover interactions for mouseover and mouseleave events. The graph displays artist names and uses deezerFans data from the API response.

Nov 29, 2022
Loading thumbnail…

TP_dataviz

This interactive network visualization displays the connections between a music artist and their featured collaborators, sourced from a French music API. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute the layout, while rendering is done in SVG, with circles and lines updated during the simulation’s `ticked` event.

Nov 29, 2022
Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3 v4, displaying categorical data grouped on the x-axis with subgroups stacked by color. It loads data from a remote CSV file using `d3.csv`, then uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. The chart applies `d3.stack` to compute cumulative bar segments, assigns colors via `d3.scaleOrdinal`, and renders the result as SVG rectangles with bar widths from `x.bandwidth()`.

Oct 3, 2022
Loading thumbnail…

dboard

This dashboard example, built with Vue and D3 v4, presents multiple data visualizations from a CSV file of sales records. The primary chart is a stacked bar chart that breaks down sales by product category, using a color-coded system to distinguish between subgroups. It imports specific D3 functions like `csv`, `scaleBand`, and `scaleLinear` to parse the data and construct the SVG-based charts. The interface uses a CSS grid to arrange four distinct visualization panels, with a tooltip element prepared for interactive data exploration.

Oct 3, 2022
Loading thumbnail…

barGraph

This bar chart displays the 2022 population of countries. The visualization includes interactive buttons to sort the bars in ascending or descending order. The chart is rendered as an SVG using D3.js, with axes and bars generated through D3's `scaleBand` and `scaleLinear` scales, and axis functions `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a local CSV file, and a tooltip showing country name and population appears on mouse hover.

Sep 26, 2022
Loading thumbnail…

D3.js Tutorial

This example uses a bar chart to visualize the 2022 population of countries from a CSV dataset, with bars arranged horizontally by country and vertically by population size. The code sorts the data in descending order, renders the chart as SVG, and adds rotated country labels on the x-axis. It demonstrates loading D3 v5 via UNPKG, using `d3.csv` and `d3.max`, and building scales and axes with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

Sep 26, 2022
Loading thumbnail…

TD1_VIZ

This interactive D3 visualization displays three concentric circles in the center of an SVG canvas, each with a distinct color (green, orange, and red). A button labeled "Transition" triggers an animated zoom effect, scaling the circles' radii progressively with each click until a maximum zoom level is reached, then resetting. The circles also respond to mouse hover events, temporarily changing their fill color to black before reverting. The code uses D3 v5 selection and transition methods, loading data from a `truc.csv` file that contains population statistics for various countries.

Sep 19, 2022