E

Elodie31190

@Elodie31190·24 public vizzes

Loading thumbnail…

Line Chart - Final Amélioré

The visualization displays the number of music releases per year for various genres, with each genre represented by a distinct colored line. The data is aggregated from an `album.json` source, grouping albums by genre and counting releases annually. The chart is rendered using D3.js (v5) within an SVG container, leveraging `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft` for the axes, while `d3.nest()` groups the data and `d3.line()` draws the polylines. An interactive tooltip highlights the genre on hover.

Loading thumbnail…

Line Chart - Final

This line chart visualizes the number of music releases per genre over time, using data from `album.json`. The D3.js v5 code groups the data by genre with `d3.nest()` and plots each genre as a separate colored line. It uses `d3.scaleTime()` and `d3.scaleLinear()` for the x and y axes, and `d3.line()` to draw the paths. The chart is rendered as an SVG within a grid layout, with axes labeled and tick marks customized.

Loading thumbnail…

Line Chart - Amélioration test

This line chart visualizes the evolution of the number of music releases per year, with lines colored by music genre. The data is sourced from `album.json` and processed by grouping entries by genre and year. The D3 v5 library is used to create the SVG rendering, with `scaleTime` and `scaleLinear` for the axes, `nest()` for grouping, and `line()` to draw the paths. The chart updates dynamically after the JSON data is loaded and sorted.

Loading thumbnail…

Line Chart - Amélioration

The visualization displays album release counts over time, filtered by music genre through an interactive dropdown menu. It uses a line chart to plot the number of tracks per album against release dates, with each genre represented by a distinct colored line. The chart is built with D3.js, utilizing `scaleTime` and `scaleLinear` for axes, `d3.nest()` for data grouping, and `d3.scaleOrdinal` with `schemeSet2` for color mapping. Data comes from `album.json`, with the chart updating via a button-triggered `transition()` animation.

Loading thumbnail…

Line Chart - New Données

This example shows how the number of musical releases varies over time for different genres, using a multi-series line chart generated from album data. The visualization aggregates album counts by genre and release year, displaying the trends for genres like Country, Pop, and Metal. The chart is built with D3 v5, using `d3.json` to load the data, `d3.nest()` to group albums by genre, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Each genre is represented by a colored line, with data points connected via `d3.line()`, and the SVG rendering includes labeled axes and a title.

Loading thumbnail…

Line Chart - Test avec new données

A multi-line chart displays the number of music tracks per genre over time, derived from an album dataset. The visualization groups data by genre using `d3.nest()` and draws a separate colored line for each genre with `d3.line()`. Axes are built with `d3.axisBottom` and `d3.axisLeft`, scaled by `d3.scaleTime` and `d3.scaleLinear`, and rendered as SVG within a D3 v5 selection.

Loading thumbnail…

Line Chart - Lignes ok

This line chart displays the number of songs per music genre over time, with separate colored lines for Country, Pop, and Metal. The visualization uses d3.nest to group data by genre and d3.line to generate paths, with d3.scaleTime and d3.scaleLinear mapping dates and counts to SVG coordinates. It loads data from a JSON file via d3.json, which is sorted chronologically before rendering. Axes and labels are created using d3.axisBottom and d3.axisLeft, with a categorical color scale distinguishing genres.

Loading thumbnail…

Line Chart - Test lignes

This line chart displays the number of music tracks per genre across release years, using a single red line to connect data points from a small JSON dataset. The visualization loads its data from `data2.json` and renders an SVG with D3 v5, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The code generates gridlines with axis ticks, labels the axes "Date" and "Nombre de Musique", and titles the graph "Test". The line path is drawn using `d3.line`, with data points representing genres like Country and Pop at various dates.

Loading thumbnail…

Line Chart - Test données bis - Elo

This line chart displays the number of music tracks released per year across three musical genres: Country, Pop, and Metal. Each genre is represented by a separate line path rendered as an SVG element. The visualization uses D3 v5 APIs including `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for tick generation, and `d3.line` for path creation. Data is loaded from a JSON file containing aggregated genre and date counts.

Loading thumbnail…

Line Chart - Test données 3- Elo

This example visualizes the number of musical tracks released over time for different genres using a multi-series line chart. The chart displays three genres—Country, Pop, and Metal—with their respective track counts plotted against release dates. The visualization uses D3.js v5’s scaleTime, scaleLinear, axisBottom, axisLeft, and line generators to render SVG paths and axes. Data is loaded from a JSON file and processed client-side, with date aggregation grouping album releases by year and genre to build the dataset. The final SVG output includes labeled axes, gridlines, and a red line path.

Loading thumbnail…

Line Chart - Test données - Elo

A line chart visualizes the evolution of music album counts per genre over time, aggregated from album data including release dates and genre fields. The visualization maps dates on the x-axis and the number of albums on the y-axis, with a red line connecting data points. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG chart. The data is loaded from a JSON file and processed to count albums by genre and year, though the chart currently displays only the resulting aggregated series.

Loading thumbnail…

Line Chart - Test données - Ju'

This line chart visualizes the number of music releases per year, aggregated by genre from a JSON dataset. It uses D3 v5 to parse the data, dynamically counting releases per year for each genre and rendering a single red line path. The visualization employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` with gridlines, and `d3.line` to generate the SVG path. Data is loaded via `d3.json` and processed in JavaScript before being drawn.

Loading thumbnail…

Line Chart - 1 ligne OK

The visualization is a line chart that aggregates music releases by genre over time, showing the count of tracks released per genre across the years. It processes a JSON dataset of albums and tracks, grouping entries by genre and date, then counts the cumulative number of music releases for each genre. The chart uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the axes and path. Data is loaded via `d3.json`, filtered for missing genres or dates, and sorted chronologically before rendering.

Loading thumbnail…

Test Line Chart

This example shows how the number of music releases changes over time, grouped by genre, using a simple line chart. The visualization aggregates the provided JSON data by counting records for each genre and year, then plots these counts on a time-based x-axis against a linear y-axis. The chart is rendered as an SVG using D3 v5, with `scaleTime`, `scaleLinear`, and the `line` generator for the path. Axes are created with `axisBottom` and `axisLeft`, and a red stroke highlights the resulting trend line.

Loading thumbnail…

Test Line Chart 2

This example visualizes a time series as a line chart, mapping ordered date and value pairs from a comma-separated dataset. The chart displays a single steelblue line with a time-scaled x-axis and a linear y-axis. Built with D3 v5, it uses `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. The SVG is appended dynamically within a `#my_dataviz` div, with margins and dimensions hardcoded in the script.

Loading thumbnail…

Projet - Line Chart

This example shows a line chart of annual automotive sales over time, with a time-scaled x-axis and linear y-axis. Data loads from a CSV file and maps through `d3.scaleTime` and `d3.scaleLinear` to plot the series. The chart uses `d3.axisBottom` and `d3.axisLeft` for labeled axes, with gridlines and rotated tick labels. The visualization is built with D3 v5, imported via UNPKG, and demonstrates basic data fetching, scaling, and SVG rendering.

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.

Loading thumbnail…

TD2

This dashboard presents a multi-panel analysis of a sales dataset, visualizing data through a scatter plot, bar chart, donut chart, and a geographic map. It shows the relationship between order dates and sales figures, with points colored by sub-category to reveal trends. The code uses d3.csv to load data, d3.geoPath with a geoAlbersUsa projection to render U.S. states, and d3.pie for the donut chart. Interactive tooltips appear on hover, while transitions animate axis updates. The visualizations are rendered as SVG elements within a Vue framework.

Loading thumbnail…

BarGraph TD1 Prof

This bar chart displays the 2022 population for each country, with interactive sorting buttons that rearrange the bars in ascending or descending order. The visualization combines SVG rectangles with overlaid blue circles, and uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` for axes, along with `transition()` for smooth animated updates when sorting. Hovering reveals a tooltip showing the country and population. A tooltip element and three distinct D3 selection groups facilitate the interaction and rendering.

Loading thumbnail…

BarChart TD1 (Bouton ne marche pas)

A bar chart displays the 2022 population of countries from a CSV dataset, with bars labeled by country name. The visualization includes sorting buttons that attempt to reorder bars by ascending or descending population, though the interaction is broken due to improper data binding on updates. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG rectangles, with tooltips showing country and population on hover.

Loading thumbnail…

Example D3 functions

This example demonstrates the enter, update, and exit pattern for circle elements in D3 v5, using two buttons to modify an array of data points. The "Remove" button pops the last item, turning the exiting circle red, while the "Modify" button replaces a random entry, updating the circle’s position via `scaleLinear` mappings. The code imports `select`, `scaleLinear`, and `max` from D3, and uses SVG rendering with a fixed 960×500 canvas.

Loading thumbnail…

Map exemple

This interactive choropleth displays global population estimates, with each country filled by a color scale ranging from light red to dark red according to its population. Built with D3 v5, the map uses TopoJSON to convert world-atlas GeoJSON features into SVG paths via a Mercator projection, while an accompanying TSV file supplies the population attributes. The visualization supports zooming and panning, and countries turn purple on hover.

Loading thumbnail…

Exemple Visualisation

This example displays the ten most frequently used words in an artist's song lyrics, excluding stopwords, as a horizontal lollipop chart. A dropdown menu lets the user select from a fixed list of artists, triggering a fetch to the Wasabi API to retrieve the artist's albums and songs. Using D3 v5, the visualization animates the x-axis and y-axis transitions, along with the lines and circles representing word counts, when a new artist is chosen.

Loading thumbnail…

Fork of MIAGE base

A static SVG scene shows three colored circles arranged horizontally inside a 960×500 viewport, with interactive hover and click behaviors. The green circle turns black on hover via CSS, while the red circle changes fill on mouseover and triggers a two-stage D3 transition sequence when a rectangle button is clicked. The code uses D3 v5 selection methods and `transition()` with `duration()` to animate the red circle’s position, alongside native SVG elements and JavaScript event handlers.