Skip to main content
Log in
T

Toky R

@toky99·14 public vizzes

Loading thumbnail…

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

This interactive dashboard visualizes the WASABI music dataset, showing the number of albums released by country on a choropleth map. Clicking a country reveals a modal offering three detailed views: a bar chart for top music genres, a lollipop chart for popular artists, and a line chart showing album counts per year. Built with D3.js v5, it uses `d3.geoPath` with a Mercator projection and TopoJSON for the map, while `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` handle the charts. Data is pre-extracted into JSON files for performance, and the interface supports zooming, tooltips, and navigation back to the map.

Dec 4, 2022
Loading thumbnail…

Merge v1

This interactive dashboard visualizes the WASABI music dataset through a chloropleth map showing total album counts per country, with clickable countries opening a modal offering three additional charts: a bar chart of top genres, a lollipop chart of most popular artists, and a line chart tracking album releases over time. Built with D3 v5 and rendered as SVG, the map uses d3.geoPath and TopoJSON for geographic features, while the zoom behavior enables map navigation. Data is pre-extracted into JSON files for performance, with tooltips providing country-specific details.

Dec 4, 2022
Loading thumbnail…

Line chart v1

This visualization displays the evolution of the number of music albums released per year for a selected country, using a line chart rendered with SVG. The code loads data from a JSON file using `d3.json` and constructs the chart with `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. It includes axis labels, a title, and gridlines via `d3.axisBottom` and `d3.axisLeft`.

Dec 4, 2022
Loading thumbnail…

TP 10-12-22

This map visualization displays the geographic distribution of music albums, with country colors shaded by count according to a green scale. It shows a choropleth of world data where users can hover to see precise album counts and click to open a modal with detailed statistics about genres, artists, and yearly totals. The implementation uses D3 v5 with d3.geoMercator projection, d3.geoPath, and a d3.scaleLinear color scale, pulling TopoJSON country boundaries from world-atlas and loading country album counts from a local JSON file. Zooming is enabled via d3.zoom, with Bootstrap modals and tooltips providing interactivity.

Dec 4, 2022
Loading thumbnail…

Sauvegarde 4-11-22

This data visualization is a choropleth map showing the number of music albums per country, rendered as an interactive SVG using D3 v5. The map uses a green color scale to represent album counts, and users can hover over countries to see details via a tooltip or click to open a modal with statistics. The code leverages D3’s `geoMercator` projection, `geoPath`, and `scaleLinear` for color mapping, and loads world map data from the `world-atlas` package alongside a local `data_map.json` file.

Dec 4, 2022
Loading thumbnail…

Sauvegarde 02/12/2022

This choropleth map visualizes the world using a green color scale, where each country is rendered as an SVG path and is interactive. Clicking a country opens a Bootstrap modal displaying statistics about that nation, including the total number of albums, top genres, popular artists, and albums per year. The map is built with D3.js v5 and TopoJSON, using a Mercator projection (`d3.geoMercator`) and `d3.geoPath` to generate the shapes. Country names and ISO codes come from a TSV file, while geographic boundaries are loaded from a world-atlas JSON.

Dec 3, 2022
Loading thumbnail…

TP Line chart

This interactive visualization displays a world map where each country is colored and clickable. Hovering over a country reveals its name via a tooltip, while clicking opens a modal window presenting statistics about that nation, such as the total number of albums, top 10 genres, most popular artists, and yearly album counts. The project uses d3.geoMercator and d3.geoPath to render the map from world-atlas data, d3.scaleLinear for colored fills, and d3.zoom to enable panning and zooming of the SVG. The modal interface is built with Bootstrap, and the underlying data is loaded via d3.tsv and d3.json.

Dec 2, 2022
Loading thumbnail…

TP_QI

This visualization displays a world map with countries rendered as solid green shapes on a light blue background, with hover effects changing the fill color. The map is built using D3 v5 and TopoJSON, loading geographic data from the world-atlas package. It uses d3.geoMercator for projection and d3.geoPath to generate SVG paths for each country, with a d3.zoom behavior enabling pan and zoom interactions. Country names come from the accompanying TSV file, though population data for coloring is commented out.

Dec 1, 2022
Loading thumbnail…

dboard

This dashboard displays sales data from the Superstore dataset across four synchronized views: a pie chart of sub-category sales, a bar chart for category totals, a scatter plot of individual orders by date and sales amount, and a geographic map of US regions. The visualization uses D3 v6 with `d3.pie`, `d3.arc`, `d3.scaleBand`, `d3.scaleTime`, and `d3.geoAlbersUsa` for the map projection. Data is loaded from a CSV file, and interactive tooltips appear on hover. SVG rendering with transitions updates the charts when data changes, while Moment.js parses date strings for the time axis.

Oct 10, 2022
Loading thumbnail…

BAR CHART

A bar chart displays the 2022 population of numerous countries, sourced from a CSV file. Users can click the "Trier" button to reorder the bars in descending population or "Reset" to return to the original alphabetical country order. Hovering over a bar reveals a tooltip with the country's name and population. The visualization is built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.event, rendering as SVG.

Sep 26, 2022
Loading thumbnail…

barGraph

This bar graph displays the 2022 population of countries from a CSV dataset, sorted in descending order. It uses D3 version 5 to render an SVG visualization, mapping country names to the x-axis and population values to the y-axis. The chart employs `d3.scaleBand` and `d3.scaleLinear` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and a mouseover tooltip that displays the country name and population. The code loads data via `d3.csv`.

Sep 26, 2022
Loading thumbnail…

TD1 barGraph

This example displays a bar graph of country population data from a CSV file, with each bar representing the 2022 population of a nation. The visualization is rendered as SVG using D3.js v5, where the code appends rectangles to the chart based on the parsed data. Bars are positioned sequentially along the x-axis and scaled according to their population values relative to the chart height. The implementation uses D3’s `select` and `csv` functions to load and process the dataset.

Sep 26, 2022
Loading thumbnail…

VDM_TD part 2

This example reads population data from a CSV file and logs each country’s name and 2022 population to the browser console. The visualization uses D3 v5 to load and parse the data with the `csv` function, while an SVG element is selected via `select`. A CSS hover rule changes the fill color of elements with the class `circleClass`, though no circles are currently created in the code. The page structure is defined in HTML with a fixed-width SVG and a bundled script.

Sep 19, 2022
Loading thumbnail…

VDM_TD1

This example demonstrates a simple D3.js visualization that renders a message to the screen using SVG. It loads the D3 library from UNPKG and uses the `select` and `svg` APIs to manipulate the DOM. The code imports a local ES6 module to define the message text, which is then displayed via D3's selection methods. The visualization is minimal, focusing on D3's core functionality for DOM manipulation and SVG rendering, with data from a CSV file available but not actively visualized.

Sep 19, 2022