Refactor Bar chart

Refactored Bar Chart

A horizontal bar chart displays the top 10 countries by population for 2020, using UN population data loaded via D3's `csv` utility. The React app renders SVG rectangles through the `Marks` component, with scales from `d3.scaleBand` and `d3.scaleLinear` positioning bars and axes. Reusable `AxisBottom` and `AxisLeft` components generate tick marks and labels. The chart is built with React 16.9, D3 v7, and SVG rendering, isolating data-loading logic in a custom `useData` hook.

Aalexandermodell

Refactored Bar Chart

This example displays the population of the top ten countries from the UN Population 2019 dataset as a horizontal bar chart. React components render the SVG marks and axes, while D3 utilities handle the data loading and scale calculations. The chart uses a `scaleBand` for the categorical y-axis, a `scaleLinear` for the quantitative x-axis, and `csv` for fetching the data. Each component (`AxisBottom`, `AxisLeft`, `Marks`) is modularized and receives the scales and data via props, highlighting a reusable and refactored architecture for visualization.

Wwindwaver

Refactored Bar Chart

This Refactored Bar Chart displays the top ten countries by population in 2020 using a horizontal bar layout. A React component loads CSV data from a GitHub-hosted UN population dataset, then renders an SVG with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and separate AxisLeft, AxisBottom, and Marks components for modular chart construction. Each bar’s length encodes population values, with axis ticks and labels generated programmatically from the scales.

AAndre J Denais

Refactored Bar Chart

This example visualizes the population of the top 10 countries from UN Population 2019 data as a horizontal bar chart. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to position bars and axes, while React components render the SVG elements. The code separates AxisBottom, AxisLeft, and Marks into distinct React components, uses a custom `useData` hook to load and parse the CSV with d3.csv, and supports blank ticks as axis labels. The visualization highlights a modular, refactored approach to building reusable chart components.

SSai Phaltankar

Refactoring a Bar Chart

This bar chart displays the population of the top 10 countries from the UN Population 2019 dataset. React components render SVG rectangles for each bar, with the x-axis scaled by `d3.scaleLinear` and the y-axis using categories from `d3.scaleBand`. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and loads data asynchronously with `d3.csv` inside a custom `useData` hook, while D3 utilities like `max` and `scaleBand` handle the scaling logic.

Jjwlam83

Refactored Bar Chart

This bar chart visualizes the top 10 countries by 2020 population using data from the UN Population 2019 dataset, loaded via D3’s `csv` utility. Built with React and D3 v5, it encodes population with a linear x-scale (`scaleLinear`) and country names with a band scale (`scaleBand`) for the y-axis. The SVG rendering is composed of custom components for axes (`AxisBottom`, `AxisLeft`) and bars (`Marks`), with React state managing the asynchronous data loading.

SSarah Elkeurti

Refactored Bar Chart

This example presents a horizontal bar chart of the top 10 countries by population for 2020, sourced from a UN population CSV file. The visualization uses React with D3 v5 utilities to load and scale the data, rendering SVG via React components. `scaleBand` positions country labels on the y-axis, while `scaleLinear` maps population values to bar widths, with reusable `AxisBottom`, `AxisLeft`, and `Marks` components structuring the chart.

JJohn Jeevasaeyan

Refactored Bar Chart

A bar chart displays the 2020 population estimates for the top 10 countries, sorted by country name along the vertical axis and population magnitude along the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered by a custom `Marks` component. Axis components generate tick marks and labels using `xScale.ticks()` and `yScale.domain()`. Data is loaded asynchronously via `csv()` from a UN population dataset hosted on GitHub.

SSam Hege