jcar@vt.edu

@justin-carstens·4 public vizzes

Fork of Refactored Bar Chart

This interactive bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with population values encoded as horizontal bar lengths. The React-based visualization uses the D3 v5 APIs `scaleBand`, `scaleLinear`, and `max` to position bars and axes, while rendering marks as SVG `<rect>` elements. It includes custom axis components showing tick values for both the left country labels and bottom population scale.

Jun 18, 2024

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart, with custom axes rendered manually rather than using D3’s axis components. It uses React hooks (`useState`, `useEffect`) to load and slice CSV data from the United Nations World Population Prospects 2019, then renders SVG bars via `scaleBand` and `scaleLinear`. D3’s `csv` fetches the data, while tick marks and labels are generated from `xScale.ticks()` and the domain. The chart lacks explicit axis lines, leaving only tick values and country names.

Jun 18, 2024

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart, using only rectangles with no axes or labels for context. The chart loads population data from the United Nations World Population Prospects 2019 dataset via a CSV URL. Built with React and D3 v5, it uses `csv` to fetch and parse the data, then `scaleBand` and `scaleLinear` to map country names and population values to the SVG canvas dimensions. The visualization updates the displayed bars once the data is loaded, initially showing a “Loading…” message.

Jun 13, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a React and D3 workflow for fetching and summarizing a dataset of CSS named colors. It shows a simple text summary that reports the CSV file’s size in kilobytes, the number of rows, and the number of columns. The visualization initially displays “Loading…” and updates once the data arrives. The code uses React’s `useState` and `useEffect` hooks to manage state and trigger the asynchronous `d3.csv` fetch, then formats the output with `d3.csvFormat` and a custom message module.

Jun 3, 2024