oussama-chaabouni

@oussama-chaabouni·2 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as colored rectangles with no axes, using React hooks (useState, useEffect) to load and transform CSV data. The d3.csv method fetches United Nations World Population Prospects 2019 data, while d3.scaleBand and d3.scaleLinear position and size the rectangles based on country names and 2020 population estimates. The chart renders as an SVG with React components, mapping each data row to a <rect> element.

Jul 3, 2021

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart displays the global cumulative death toll from COVID-19 over time, based on the Johns Hopkins Coronavirus dataset. The chart plots daily total deaths with a black line, and includes a horizontal marker line at 10,000 deaths and a vertical marker at the most recent date, labeled with its formatted month and day. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate an SVG path, while custom `XAxis` and marker components render grid lines and labels.

Jul 3, 2021