mrthnkwn

@mrthnkwn·3 public vizzes

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars with no axes, using React and D3 v5 to fetch and render the data. It displays United Nations World Population Prospects 2019 data by mapping country names to a `d3.scaleBand` y-axis and population values to a `d3.scaleLinear` x-axis. The SVG rectangles are rendered directly in JSX, with bar widths proportional to each country’s 2020 population estimate. The code uses `d3.csv` to load the dataset and React hooks (`useState`, `useEffect`) to manage the asynchronous data loading.

Jan 20, 2022

Loading thumbnail…

Rendering Data with React!!

This example visualizes the CSS named color palette as a circular donut chart, with each color represented as a slice arranged around a central point. The visualization loads color data from a CSV file using D3’s `csv` utility, then draws the arcs with the `d3.arc` and `d3.pie` functions. React manages the asynchronous data loading through its `useState` and `useEffect` hooks, rendering each slice as an SVG path element with the color’s hex value as its fill. The chart displays 148 colors in a single ring, with loading text shown until the data arrives.

Jan 20, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a simple text summary of a remotely loaded CSV file, showing its size in kilobytes, row count, and column count. The visualization uses D3.js version 5 and the `d3.csv` method to fetch and parse the data from a GitHub gist containing CSS named colors. The code also includes commented-out alternatives using `fetch` with async/await and a nested promise “pyramid of doom” to illustrate different approaches to asynchronous data loading, though only the `d3.csv` path is active.

Jan 20, 2022