Skip to main content
SimilarExport ZIP
100%

Fork of Refactored_bar_chart

✓ Published1🌍 Public
Ssagar limbu
Last edited Jun 1, 2022
Created on Jun 1, 2022
Forked from Hello VizHub

This bar chart displays the 2020 population estimates for ten countries, using horizontal bars ordered by country name. The visualization is built with React and D3 v7, where `d3.scaleBand` positions the categorical y-axis and `d3.scaleLinear` maps population values to bar widths. SVG rectangles are rendered through the custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. The data originates from a CSV file of UN Population 2019 data, loaded asynchronously and processed to extract the 2020 values.

AI-generated description

// Creating individual MODULES for each functions // calling functions

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Bar Chart

This visualization presents a horizontal bar chart comparing the 2020 populations of ten countries, sourced from UN World Population Prospects data on GitHub. Built with React and D3 v7, it renders SVG marks using scales: `scaleBand` positions countries along the y-axis, while `scaleLinear` maps population values to bar widths. The chart explicitly defines reusable components for axes and marks, with `AxisBottom` generating ticks and `AxisLeft` labeling country names, all within a fixed viewport. The data loads asynchronously via `csv`, showcasing a clean, modular refactoring approach.

RRedSorrel
93% match
Loading thumbnail…

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
93% match
Loading thumbnail…

Refactored Bar Chart

This interactive bar chart displays population data for ten countries in 2020, sourced from a UN dataset loaded via d3.csv. The visualization shows horizontal bars ordered by country, with population values mapped to bar width using d3.scaleLinear and d3.scaleBand for positioning. The React component structure separates axis and mark rendering into modular files, with SVG elements generated from scales and mapped data. Custom AxisBottom and AxisLeft components handle ticks and labels, while Marks renders the rectangular bars.

Rrmgoldberg24
93% match
Loading thumbnail…

Fork of Refactored Bar Chart

A bar chart displays the ten most populous countries, with country names on the vertical axis and population on the horizontal axis, lacking a labeled y-axis title and numeric labels on the x-axis ticks. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis. SVG rectangles represent each country’s population, with custom `AxisBottom` and `AxisLeft` components rendering tick lines and text. Data originates from the United Nations World Population Prospects 2019, loaded via `d3.csv`.

Jjerryren527
92% match
Loading thumbnail…

Fork of Refactored Bar Chart

A bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019 via a CSV file. The visualization uses React components with D3 v5 scales and shapes, rendering bars as SVG rectangles. The code constructs a band scale for countries and a linear scale for population, with custom React components for axes and marks, loading data through a `useData` hook that fetches and parses the CSV.

Cchar0496
92% match
Loading thumbnail…

Refactor Bar chart

This bar chart visualizes the population of the top 10 countries in 2020, using horizontally-oriented bars. Built with React and SVG, the example decomposes the visualization into reusable components: `AxisBottom`, `AxisLeft`, and `Marks`. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the population x-axis, and `d3.max` for domain calculation. Data is loaded asynchronously from a CSV file via a custom `useData` hook, which fetches and parses the UN Population 2019 dataset.

AAlex Stulov
92% match
Loading thumbnail…

Fork of Refactored Bar Chart

A bar chart displays the top 10 most populous countries, with horizontal bars ranked by population for 2020. The visualization uses React for component composition and d3 v5 for scales (`scaleBand`, `scaleLinear`), data loading via `d3.csv`, and SVG rendering with custom axis components for bottom and left tick labels. The data comes from the United Nations World Population Prospects 2019. Empty space and missing axes in the README contrast with the full implementation shown in the code.

AAbdessalem Lagraf
92% match
Loading thumbnail…

Refactored Bar Chart

This chart displays the 2020 populations of ten countries using horizontal bars, with country names on the y-axis and an x-axis for population values from the UN Population 2019 dataset. The D3 v5 scales `scaleBand` and `scaleLinear` compute the layout, while React components for axes and marks map the data to SVG `<rect>` elements. Population values are parsed from the CSV into numbers via `useData`, and the bars are rendered within an SVG canvas.

Yyejichun@naver.com
92% match