P

PLD3508A

@PLD3508A·18 public vizzes

Loading thumbnail…

dashboard dana anissa juliette filiz

This dashboard presents a multi-view analysis of European music artists, combining a network visualization, a map, and supplementary charts. The central network uses `d3.forceSimulation` to map connections between an artist and their associated musical artists, with node interactions triggering updates. A geographic map rendered via `d3.geoPath` and `geoMercator` colors European countries by dominant genre, while tooltips and bar/circular charts display artist-specific data such as fan counts and languages, sourced from the Wasabi API and local JSON files.

Loading thumbnail…

Fork of Card D3

This interactive map visualization displays European countries with colored circles marking each nation's location. The circles are color-coded by musical genre preference, with a legend explaining the color scheme. Users can zoom and pan the map, and hovering over a circle reveals a tooltip showing the country name and its associated music genre. The visualization uses D3.js v6 with geoMercator and geoPath for the map projection, SVG circles for data points, and d3-scaleOrdinal for color assignment based on the countriesEuropean.json dataset.

Loading thumbnail…

dashboard dana anissa juliette

This dashboard visualizes relationships between musical artists and their language usage. It shows a force-directed network graph using d3.forceSimulation, where nodes represent artists and links connect associated musicians, alongside bar charts and circular plots derived from artist data. The example loads artist data from the Wasabi API and i3S university database, using d3.json and d3.scaleLinear for rendering SVG charts. Interactive tooltips appear on hover, while clicking a network node triggers a new data fetch and animation to update the visualization.

Loading thumbnail…

Juliette Projet V2 Interaction

This example visualizes a dynamic network of musical artists and their associations. It shows a force-directed graph where the central artist is linked to related artists, with tooltips displaying artist names and record labels. Clicking a node triggers an update, fetching new data from the Wasabi I3S API and redrawing the graph. The code uses d3.forceSimulation and d3.forceLink to manage layout, with SVG elements rendered dynamically based on asynchronous API responses.

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.

Loading thumbnail…

Fork of circular barplot

A circular barplot visualizes the distribution of music genres across an artist's albums, with each genre represented as a radial bar whose length corresponds to its song count. The chart uses d3.scaleBand for angular positioning and d3.scaleRadial for bar radii, rendering arcs via d3.arc. Genre labels rotate around the plot, flipping orientation based on their angular position. Data is fetched asynchronously from the Wasabi API, aggregated from nested album and song records, and drawn using SVG within a D3 v7 selection.

Loading thumbnail…

genre album anissa

This example shows the distribution of musical genres across Shakira’s albums by counting how often each genre tag appears in her song metadata, then logging the aggregated totals to the console. It uses the D3 v7 `select` import and the Fetch API to request data from the wasabi.i3s.unice.fr artist endpoint, filtering and reducing the returned JSON structure into a simple array of genre names and quantities. The visualization itself is not rendered, as the code only computes and prints the result, with the page body styled for large text but left empty.

Loading thumbnail…

circular barplot

This circular barplot visualizes the frequency of different music genres from a JSON dataset. Each genre is represented as a colored arc segment, with the radial length of each bar proportional to its quantity, and labels are rotated around the perimeter. Built with D3 v7, the visualization uses `d3.scaleBand` for angular positioning, `d3.scaleRadial` for bar lengths, and D3's `arc` function to draw the curved bars. The SVG output centers the chart with a donut-like hole and applies conditional text rotation for label readability.

Loading thumbnail…

Fork of Circular Braplot 2016

A circular barplot displays five music genres (Rock, Classic, Pop, Rap, and House) as radial bars around a center, with bar length representing each genre's value from a CSV file. The chart uses D3.js v4 with the `d3.scaleBand`, `d3.scaleRadial`, and `d3.arc` APIs to generate SVG paths for each bar. Labels are rotated and positioned around the plot using trigonometric transformations. The SVG rendering adapts text orientation to maintain readability, with a teal fill applied to all bars.

Loading thumbnail…

projet dana

This example queries the Wasabi API for artist data, fetching pages of 200 artists to identify and sort the most popular unsigned artists by Deezer fan count. The visualization filters out artists with any label or record label, retaining only those whose lifespan is still active, and collects language information from their albums and songs. The code uses `Promise.all` with `fetch` to handle concurrent API requests, processes the JSON responses, and console-logs the resulting sorted array. It relies on D3 v7 for potential data binding and selection utilities, though no visual rendering is implemented beyond the console output.

Loading thumbnail…

D3.js Tutorial

This example shows a bar chart of country populations in 2022, using a dataset loaded from a CSV file. The chart sorts countries in descending order of population and displays them with rotated country labels on the x-axis. It uses D3 v5 APIs including `d3.csv`, `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG. The visualization also demonstrates ES6 module imports and hover effects via CSS opacity changes.

Loading thumbnail…

dboard

This dashboard presents a multi-panel visualization of Superstore sales data, showing a US map, bar chart, scatter plot, and pie chart. It uses D3.js v6 with SVG rendering and animations. The scatter plot maps product sales over time, colored by sub-category, while the pie chart displays sales distribution by sub-category with interactive tooltips. The visualization loads GeoJSON for the US map and CSV data for all charts, using `d3.geoPath` for the map and `d3.pie` for the donut chart.

Loading thumbnail…

dboard

The dashboard displays four interactive charts—a bar chart, line chart, scatter plot, and pie chart—built from a Superstore sales dataset. It visualizes metrics like sales by category, order trends over time, and product performance. The visualization uses D3.js v5 for data binding and SVG rendering, with Moment.js for date parsing. A tooltip appears on hover to show detailed values, driven by D3 event handlers. The layout is managed through a CSS grid, and the code imports the `select` function from D3 to manipulate the DOM.

Loading thumbnail…

test writing

This example displays the text “Hello D3 version 7” centered in the browser using D3 v7. The page sets a large font size and uses `d3.select` to insert the message into the body element. It also includes utility code that creates a downloadable text file via the Blob API, though this feature is not actively triggered on load. The simple demonstration shows how to begin working with D3 version 7 in a minimal HTML setup.

Loading thumbnail…

barGraph

This example shows a bar chart comparing the 2022 population of countries from a CSV dataset, with axis labels rotated and a tooltip displaying country and population on hover. The visualization loads D3 v5 via UNPKG and uses d3.csv, scaleBand, scaleLinear, axisLeft, and axisBottom to render SVG bars. Two buttons allow sorting the bars in ascending or descending population order by re-sorting the data array and re-rendering the chart.

Loading thumbnail…

D3 with DS4E

A bar chart displays 2022 population by country from a CSV dataset, with bars animating in sequentially and reacting to hover. The visualization renders with SVG and uses D3 v7 scales (`d3.scaleBand`, `d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and transitions (`transition`). Hover events trigger a tooltip and temporarily enlarge the selected bar. The title incorrectly labels the chart "Stock Price," though it plots population values.

Loading thumbnail…

Fork of Yeesir tp1

This interactive bar chart displays the top 10 most frequently used words in an artist's song lyrics. Users select an artist from a dropdown menu to populate the chart with data fetched from the Wasabi API. The visualization updates with a smooth transition, using D3 v5's scaleLinear and scaleBand for axes and animated line and circle marks. It renders as an SVG, with text processing in JavaScript to filter stopwords and count word occurrences.

Loading thumbnail…

Fork of MIAGE base TD1

This example demonstrates fundamental D3.js interactions and animations with SVG circles and a rectangle. It shows mouseover color changes, click-triggered transitions, and CSS hover effects on shapes arranged across a 900x400 canvas. The code imports the `select` function from D3 v5 via UNPKG, appends circles and a rectangle, and uses `transition().duration()` to animate a light green circle's position when the black rectangle is clicked. A local ES6 module exports a message, though it is not displayed in the visualization.