John Vance

@jpvance123·3 public vizzes

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as a minimalist bar chart with no axes, using rectangles whose widths encode population values. The chart is built with React and D3 v5, where `d3.csv` loads United Nations World Population Prospects 2019 data, `scaleBand` positions countries vertically, and `scaleLinear` maps population to horizontal bar lengths. Each bar is rendered as an SVG `<rect>` inside a React component, with state managing the asynchronous data loading. The visualization intentionally omits labels and gridlines, emphasizing raw proportional differences between countries.

Oct 5, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and manage external data in a React application using D3. The App component initializes an empty `data` state via React’s `useState` hook, then asynchronously fetches a CSV file containing CSS named colors using `d3.csv`. Once loaded, the data is stored in state and rendered inside a React component. The visualization uses D3’s data-loading API combined with React’s state management, showing a basic pattern for integrating D3 data pipelines with React’s component lifecycle.

Oct 4, 2022

Loading thumbnail…

Parsing

This example uses D3 v5 to parse a CSV file containing CSS named colors and displays facts about the dataset in large text. It first reports the data’s size in kilobytes, then the number of rows, and finally the number of columns. The code fetches the CSV from a remote URL using `d3.csv`, which returns a promise, then computes the statistics with `d3.csvFormat` and the array’s `.length` and `.columns` properties. Alternative approaches using `fetch` and `d3.csvParse` are included but commented out.

Oct 4, 2022