J

Juliette

@jujulith·16 public vizzes

Loading thumbnail…

Projet V2 Interaction

This interactive network visualization maps connections between a musical artist and their associated artists, using data from the Wasabi API. It fetches artist data and their record labels, then renders a force-directed graph with D3. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes, and supports clicking a node to reload the network for that artist. Tooltips display artist names and labels on mouseover, while SVG circles and lines represent the dynamic graph structure.

Loading thumbnail…

dashboard dana anissa juliette

This dashboard displays a network of musical artists and their associations, with additional plots visualizing artist data. The main view uses D3’s force-directed simulation (`d3.forceSimulation`, `forceLink`, `forceManyBody`) to position nodes representing artists, with lines connecting related artists. Clicking a node updates the network. The code also prepares bar charts and other visualizations from Deezer fan counts and language data stored in a JSON file, using D3 scales and axes to render the SVG graphics.

Loading thumbnail…

test

This example presents a multi-panel dashboard for exploring artist data, including a circular barplot that visualizes the distribution of music genres for a selected artist, with interactive tooltips and hover effects. Additional plots display language information derived from field arrays. The visualization uses D3 version 6, employing scales such as `scaleBand` and `scaleRadial` along with the `d3.arc` function to generate the circular bars. Data is fetched asynchronously from a REST API, and elements are rendered using SVG with mouse event handlers for interactivity.

Loading thumbnail…

dboard

This dashboard displays a sales dataset across four synchronized visualizations: a scatter plot of sales over time, a bar chart of sales by sub-category, a geographic map of US sales, and a pie chart of sub-category proportions. Built with Vue, it uses D3 v6 APIs like `d3.scaleBand`, `d3.pie`, `d3.geoAlbersUsa`, and `d3.geoPath`, with data loaded via `d3.csv` from a local CSV file. Animations use `transition` calls, and all charts render as SVG.

Loading thumbnail…

Projet V2 Esthetique

This interactive network visualization displays the connections between a selected artist and their associated musical artists, sourced from the wasabi.i3s.unice.fr API. The code uses D3.js v4's force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`) to position nodes, with SVG circles representing artists and lines showing associations. Hovering over a node reveals a tooltip with the artist's name and record label, while clicking triggers an additional function.

Loading thumbnail…

Projet V2 OK

This example visualizes a network of associated musical artists using a force-directed graph. It shows a central artist node connected to related artists, with circles colored and sized uniformly, and hover tooltips displaying the artist’s name and record labels. The code fetches artist data from the Wasabi API, processes associated artists, and uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes and links dynamically. The visualization is rendered as SVG with interactive mouseover and mouseleave events.

Loading thumbnail…

Projet V OK

This example builds an interactive network visualization of a musical artist and their associated artists, using data fetched from the Wasabi API. The code imports D3 functions like `select` and `csv`, and relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes. Hovering over a circle triggers a tooltip that displays the artist’s name and record labels. The SVG rendering shows nodes as fixed-size circles connected by gray links, with the main artist distinguished by a larger label in the data.

Loading thumbnail…

test record

This example displays a network of musical artists and their associations as an interactive force-directed graph. It fetches artist data from the Wasabi API, collects associated artists and record labels, then renders nodes and links using SVG circles and lines. The layout is computed with d3.forceSimulation, applying forceLink, forceManyBody, and forceCenter. Hovering over a node triggers mouseover and mousemove events to show a tooltip with the artist’s name and label count.

Loading thumbnail…

TP_dataviz

This example visualizes a network of music artists and their associated collaborators, fetched from the Wasabi API. It builds a force-directed graph using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, rendering nodes as circles and links as lines in SVG. The code demonstrates asynchronous data loading with `fetch`, local ES6 module imports, and D3 v4 from a CDN, with interactive hover effects on nodes.

Loading thumbnail…

Yeesir

This example displays a horizontal dot plot of the most frequently occurring words in an artist’s song lyrics. A dropdown menu lets users select from a list of musicians. The chart is rendered with SVG and animated transitions. The code uses D3 v5 API methods like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to fetch data from the Wasabi API and process it for display.

Loading thumbnail…

Test Reseau

This visualization shows the most frequently used words in an artist's song lyrics, displayed as a horizontal lollipop chart with animated transitions. Users select an artist from a dropdown menu to trigger a new data fetch and update the chart. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements, fetching lyrics from the Wasabi API and processing text with custom stopword filtering.

Loading thumbnail…

Réseau des artistes associés

This visualization shows a network of associated artists, dynamically updating based on user selection from a dropdown menu. It uses D3.js v4 with a force-directed graph (d3.forceSimulation, d3.forceLink) to position nodes and links, rendered as SVG circles and lines. Data is fetched via the Fetch API from the Wasabi API, while initial node-link data comes from a GitHub-hosted JSON file. The dropdown options are imported from a local ES6 module.

Loading thumbnail…

map exemple

This map example visualizes global population estimates by country using a dark red color scale. The code loads geographic data from the world-atlas package and joins it with a TSV file containing population statistics. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries as SVG paths, while the topojson library converts the GeoJSON features. Hovering over a country turns it purple, and the map supports zooming through d3.zoom and event handling.

Loading thumbnail…

Fork of MIAGE base

A bar chart displays 2022 population figures for countries from a CSV dataset, with bars sorted by country name. Users can click "Croissant" or "Decroissant" buttons, though the sorting logic is not implemented. The visualization uses D3 v5 with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG rectangles. Hovering over a bar triggers a tooltip showing the country name and population. The page also imports a local ES6 module and includes styling from an external CSS file.

Loading thumbnail…

Barchart

This example displays a bar chart of the ten most frequent words found in an artist’s song lyrics, excluding common stopwords. Users select an artist from a dropdown menu, triggering a fetch to the wasabi.i3s.unice.fr API, which retrieves the artist’s albums and songs. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map counts and words to SVG coordinates, drawing animated lines and circles with `transition().duration()`. The chart updates dynamically, with axes and marks transitioning smoothly as new data arrives.

Loading thumbnail…

Fork of Fork of MIAGE base

Three SVG circles, colored pink, purple, and initially unfilled, sit within a transformed group. A pink rectangle acts as a control button; clicking it triggers a two-stage animation using D3's `.transition()` and `.duration()` methods, moving the first circle and changing its fill to black on mouseover via D3 selectors. The static chart, rendered with D3 v5, also displays a text message from a local ES6 module.