Jeff Wagner

@Jwagner347·4 public vizzes

Refactored Bar Chart

This example shows a horizontal bar chart comparing the populations of the top 10 countries for 2020, with each bar’s length mapped to population and labeled by country name on the left axis. Built with React and D3 v5, the chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders SVG `rect` elements via a custom `Marks` component. Axes are constructed manually from `xScale.ticks()` and `yScale.domain()`, with data loaded asynchronously from a CSV file.

Jun 8, 2023

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG in a React component. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with grid lines and tick labels generated via D3’s `ticks()`. Data is loaded asynchronously from a CSV file using `d3.csv`, and React manages state and rendering. The visualization demonstrates a clean manual integration of D3 scales and SVG elements within React’s declarative paradigm.

Jun 8, 2023

Loading thumbnail…

In the Margins

This example visualizes the top 10 most populous countries in the world using a horizontal bar chart. The bars are rendered as SVG rectangles, with their lengths scaled proportionally to each country’s 2020 population estimate from the UN Population data. The code uses React with hooks like `useState` and `useEffect` to load and manage the data, and D3 modules such as `scaleBand` and `scaleLinear` for positioning and scaling. The chart is drawn entirely with SVG, with margins applied to the axis area.

Jun 8, 2023

Loading thumbnail…

Pathetic Bar Chart

This example displays a bar chart of the 2020 populations for the ten most populous countries, sourced from a UN dataset loaded via `d3.csv`. The bars are rendered as SVG `<rect>` elements, with each country's bar width mapped to its population using `d3.scaleLinear` and the vertical position and height determined by `d3.scaleBand`. The chart updates on load after fetching the CSV, initially showing a loading message. The React application uses functional state with `useState` and `useEffect` to manage data fetching and rendering.

Jun 8, 2023