Skip to main content
SimilarExport ZIP
100%

Dataviz 6 - Refactoring

✓ Published1🌍 Public
RRyAlpha
Last edited Nov 24, 2021
Created on Nov 24, 2021

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It shows each country’s population as a bar, with axes for both countries and population values. The visualization is built with React and d3.v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and the `csv` loader to fetch and parse the data. All marks and axes are rendered as SVG elements through reusable React components.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 6 - Bar chart with React and D3

A bar chart displays the top 10 most populous countries from the UN World Population Prospects 2019 dataset. The visualization shows horizontal bars whose lengths correspond to each country's 2020 population, rendered as SVG rectangles. React manages the component state, loading data via the `csv` function from D3 v5, while `scaleBand` and `scaleLinear` position the bars and map population values to widths. The chart intentionally omits axes, presenting only the ranked bars.

RRyAlpha
95% match
Loading thumbnail…

Dataviz 6 - Axes with React and D3

This example displays the top 10 most populous countries as a horizontal bar chart, with axes manually constructed using React and D3 v5. The chart shows population values on a linear x-axis and country names on a band y-axis, both built from `d3.scaleLinear` and `d3.scaleBand`. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The visualization renders as SVG, with tick marks and labels generated by mapping over `xScale.ticks()` and the y-scale domain.

RRyAlpha
94% match
Loading thumbnail…

Refactoring Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The visualization renders bars via SVG `<rect>` elements, with axes built from D3 v5 scales (`scaleBand` and `scaleLinear`) and React components for the axes and marks. The code also includes a custom tooltip via an SVG `<title>` element and uses D3’s `csv` loader to fetch the data.

CChiedu Egbumokei Jr
93% match
Loading thumbnail…

Refactored Bar Chart

This example shows the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as horizontal bars, with axes displaying country names and population values. The visualization uses React 16.9 and D3 v5, rendering SVG through React components. D3’s `scaleBand` and `scaleLinear` map the data to positions, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The `useData` hook loads the CSV and truncates it to ten rows before rendering the rectangles.

CCurran Kelleher
93% match
Loading thumbnail…

Refactored bar chart

This chart displays the top 10 most populous countries as horizontal bars ranked by population, with axes providing clear quantitative and categorical context. The visualization is built with React and D3 v5, using React components to render SVG elements while d3’s `scaleBand`, `scaleLinear`, and `format` handle positioning and tick labels. Data comes from the United Nations World Population Prospects 2019 CSV, processed through d3’s `csv` function. Tooltips on each bar reveal exact population values via native SVG `title` elements.

TThiago Sawada
93% match
Loading thumbnail…

Refactored Bar Chart

This example presents the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis, sourced from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position bars and axes, while SVG `<rect>` elements render the marks. The code separates concerns into reusable components for the bottom axis, left axis, and marks, and loads data asynchronously via D3’s `csv` parser.

Aamiteshwarr
93% match
Loading thumbnail…

Dataviz 2020_Ep23 - 17. Refactoring (BarChart Vertical Ver.)

This example presents a vertical bar chart of the top 10 countries by population for 2020, sourced from a UN Population CSV file. The visualization shows each country's population as a bar with rotated, angled labels on the x-axis. Built with React and D3 version 6, the chart separates axes and bar marks into individual components, using `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scaling, and rendering as SVG elements. The layout adapts to the browser window’s dimensions.

MMinwoo Pak
93% match
Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The `useData` hook loads a CSV via `d3.csv`, slices the first 10 rows, and renders the bars as SVG `<rect>` elements within a React component tree, with separate components for the axes and marks.

AAriana
92% match