faridTalmat

@faridTalmat·4 public vizzes

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a series of horizontal bars with no axes, using data from the United Nations World Population Prospects 2019. Each rectangle’s width encodes the country’s 2020 population via `d3.scaleLinear`, while its vertical position relies on `d3.scaleBand`. The React component loads the CSV with `d3.csv`, slices the first ten rows, and renders SVG rectangles. The chart intentionally omits labels and scales, presenting a minimal, decontextualized view of population ranking.

Nov 19, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst of 148 colored wedges, each representing a CSS named color, arranged in a full circle around a central point. The visualization loads data from a CSV of CSS color names and hex values using `d3.csv`, then computes the pie layout with `d3.pie` and draws SVG paths with `d3.arc` and React components. Each wedge is filled with its corresponding hex value, creating a vibrant spectrum. React manages the component state and rendering, while D3 handles the data loading and arc geometry.

Nov 19, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart using React and SVG, with data from the United Nations World Population Prospects 2019. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with bars rendered as SVG `<rect>` elements. Axes are constructed manually via `.ticks()`, and data loading and parsing are handled with `d3.csv` inside a custom `useData` hook. The visualization includes clearly labeled country names on the left and tick marks on the bottom axis.

Nov 19, 2021

Loading thumbnail…

Fork of Axes with React & D3

This visualization displays the top 10 most populous countries as a horizontal bar chart, using a fork of React and D3. It renders SVG bars scaled by population, with x-axis ticks and y-axis country labels. The code uses React hooks (`useState`, `useEffect`) to fetch and manage data, alongside D3 v5 scales (`scaleBand`, `scaleLinear`), `csv` parsing, and `max` aggregation. Data comes from the United Nations World Population Prospects 2019 dataset via a provided URL.

Nov 19, 2021