AtlasZen

@AtlasZen·5 public vizzes

Line Chart - Final Amélioré

A multi-line chart visualizes the evolution of album counts per musical genre over time, based on data from album.json. The chart uses a time-scaled x-axis for release dates and a linear y-axis for the number of albums, with each genre represented by a distinct colored line and a tooltip on hover. Built with D3 v5, the code uses d3.nest() to group the data, d3.scaleTime() and d3.scaleLinear() for axes, d3.line() for path generation, and d3.zoom() for interactive panning. The visualization renders as SVG within a grid layout.

Dec 4, 2022

Loading thumbnail…

radial pie ex

A radial pie chart visualizes the distribution of music genres by artist gender and type, with each segment's arc length proportional to the total artist count. The visualization fetches artist data from an external JSON file, aggregates genres, and categorizes counts by gender (Male, Female), group, or unknown. Users can filter by country or adjust the number of displayed genres using a slider. Built with D3 v5 and React, it uses a custom `scaleRadial` for the radius, `scaleBand` for angles, and renders as an SVG.

Dec 4, 2022

Loading thumbnail…

dboard

dboard is a dashboard that aggregates music artist data from a JSON file, categorizing artists by musical genre and showing counts by gender type (Male, Female, group, unknown) alongside cumulative Deezer fan counts. The visualization uses d3.v6 to load and parse the data, then processes it into a new aggregated dataset. The HTML layout relies on a CSS grid with four plot containers and a hidden tooltip element for potential interactivity, while the JavaScript code handles the data transformation through nested array operations and conditional counting.

Dec 4, 2022

Loading thumbnail…

radial pie ex

A radial pie chart displays the distribution of population by age group across U.S. states, using stacked arcs with a color scale for each age band. The visualization employs `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radius, and `d3.arc()` to render the SVG paths. Data from `data.csv` is loaded via `d3.csv` and processed with `d3.stack`, while state labels rotate around the outer ring based on their computed angle. A legend and circular gridlines with tick marks provide reference for the radial magnitude.

Dec 1, 2022

Loading thumbnail…

exemple promesses

This example shows a radial stacked bar chart of US state population data broken down by seven age groups, using a circular layout with labeled segments and a legend. The visualization is rendered in SVG using D3 v5, with a `d3.scaleBand` for angular positioning and the `d3-scale-radial` library for radial scales. Data is loaded from a CSV file via `d3.csv`, and the stacked bars are generated with `d3.stack` and `d3.arc`. The chart includes circular gridlines, state labels, and a color-coded legend.

Dec 1, 2022