Seegson

@JohanRieu·8 public vizzes

Projet UXDM : Toky, Thibaut, Mattéo, Johan, Abdel

This interactive dashboard visualizes global music data through a choropleth map. Users click a country to see its total album count and select from three additional charts: a bar chart of top genres, a lollipop chart of popular artists, and a line chart of albums per year. The map uses d3.geoPath with TopoJSON and Mercator projection, while the detail charts employ d3.scaleBand, d3.scaleLinear, and d3.scaleTime. Colors encode album counts via a linear scale, and tooltips display hover details across all views.

Dec 4, 2022

Loading thumbnail…

Fork of Line chart v1

This visualization shows the evolution of the number of albums released per year for a selected country, displayed as a red line chart with labeled axes. The code initializes the chart for the United States and loads data from a local JSON file using `d3.json`. It employs `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, respectively, with `d3.axisBottom` and `d3.axisLeft` to render the scales. The line itself is drawn using `d3.line`, while SVG elements structure the chart within an HTML page that also includes Bootstrap modals for additional statistics.

Dec 4, 2022

Loading thumbnail…

TD2

This visualization presents a multi-chart dashboard for exploring sales data from a CSV file. It shows a bar chart of total sales by product category, a scatter plot of individual sales over time, and additional panels, with interactive tooltips and click-to-filter behavior. The code uses D3.js v6 (via `d3.rollup`, `scaleBand`, `scaleTime`, and `axisBottom`), Moment.js for date parsing, and animated transitions to update charts with a 1000ms duration. Data is loaded from `data.csv`, and all charts are rendered as SVG elements.

Oct 10, 2022

Loading thumbnail…

TP1_2

A bar chart displays each country's 2022 population, sorted in ascending order by default. A button-click re-sorts the chart in descending population order. The visualization uses D3.js v5 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load data from a CSV file. The SVG rendering includes interactive tooltips that show country name and population on mouseover. Data comes from a world population dataset for 2022.

Oct 10, 2022

Loading thumbnail…

TP2

This example visualizes sales data from a CSV file using a bar chart rendered as SVG. It shows individual product IDs on the x-axis and their corresponding sales figures on the y-axis, with purple bars and axis labels. The visualization is built with D3 v5, using `csv`, `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to load the data and construct the chart. A tooltip appears on mouseover, displaying the sales value for each bar.

Oct 3, 2022

Loading thumbnail…

VisuProjet

This visualization displays a line chart of daily closing prices from a CSV file containing date and value pairs. The chart uses a time-scaled x-axis and a linear y-axis to map the trends over the sample period. Built with D3 v5, the code relies on `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the red stroke path onto an SVG. Data loading uses `d3.xml`, while axes employ `d3.axisBottom` and `d3.axisLeft`. The visualization also references the MusicBrainz API, though it is not applied to the chart itself.

Sep 28, 2022

Loading thumbnail…

UX

Three purple circles on an SVG canvas form the centerpiece of this playful D3.js v5 example. Hovering over each circle changes its fill color to a different hue, while hovering over the third circle also randomly repositions all three along the x-axis using `d3.randomUniform`. A button and a large text message provide additional visual elements. The page loads population data from a CSV file via `d3.csv`, though the data is only logged to the console and used to render non-visible rectangles.

Sep 26, 2022

Loading thumbnail…

ProjetTPUX

This visualization, titled ProjetTPUX, displays the ten most frequently used words in an artist's lyrics, excluding common stopwords. A dropdown menu allows the user to select from a list of artists, which then fetches their song lyrics from the Wasabi API. The chart animates both a set of horizontal lines and red circles on an SVG canvas, with the x-axis scaled linearly and the y-axis using a band scale to manage word categories. Built with D3 v5, the visualization uses its `transition().duration()` method to animate updates to the axes and data marks.

Sep 21, 2022