6: Refactored Bar Chart

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

Refactored Bar Chart

This example presents a horizontal bar chart showing the population of the top 10 countries from a UN Population dataset. The chart uses React components to render SVG elements, with D3’s `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. The visualization is split into modular components, including `AxisBottom`, `AxisLeft`, and `Marks`, which draw the ticks and rectangles. Data is loaded asynchronously via `d3.csv`, and the chart updates upon data arrival.

SSonja Ek

Refactored Bar Chart

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, using React to render SVG elements. It fetches the UN Population dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` from D3 v7 to map country names and population values to screen coordinates. The chart is composed of three reusable React components for the bottom axis, left axis, and the bars themselves, with each axis tick and bar generated as separate SVG elements. The visualization demonstrates a modular, component-based approach to building D3 charts within a React framework.

GGabriel Dias Menezes

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 example demonstrates a horizontal bar chart comparing the populations of the top 10 countries from the UN Population 2019 dataset. The visualization uses D3 v5 utilities for data loading (`csv`) and scaling (`scaleBand`, `scaleLinear`), while React components construct the SVG rendering. The code is refactored into reusable components for the bottom axis, left axis, and marks, with the chart layout defined by fixed margins and dimensions.

GGul Jamal Zim

Refactor bar chart

This example displays a horizontal bar chart of population data for the top 10 countries from a UN 2019 dataset, rendered as SVG elements within a React component. The code uses d3-scale's `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, while `AxisBottom` and `AxisLeft` generate the tick marks and labels using D3's tick system. Bars are drawn as `rect` elements via the `Marks` component, with width proportional to each country's population. Data is fetched asynchronously using the `csv` function from D3 v6.

Ssurikmeetr

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

This example shows a horizontal bar chart of population data for ten countries from a UN 2019 dataset. The visualization uses React to render SVG elements, with D3 v7 scales (`scaleBand` and `scaleLinear`) positioning the bars and axes. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) construct the tick lines, labels, and rectangles based on the data, while `useData` fetches and parses the CSV via `d3.csv`.

BBrian Machado