Fork of reformat Bar chart (access data)

100%

Fork of reformat Bar chart (access data)

✓ Published1🌍 Public

Last edited May 22, 2021

Created on May 22, 2021

Forked from Fork of reformat Bar chart with axis with ticks

This example presents a horizontal bar chart of the top 15 countries by 2020 population, sourced from the United Nations World Population Prospects 2019. A React component renders SVG rectangles for each bar, using D3’s `scaleBand` and `scaleLinear` for the y- and x-axes, respectively. The chart includes labeled axes generated by custom `AxisBottom` and `AxisLeft` components, with tick marks and text positioned via D3’s scale methods.

AI-generated description

Reformat bar chart (axis)

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of reformat Bar chart with axis with ticks

A React-based bar chart displays United Nations population projections for 2020 across 15 countries, using an SVG rendering with D3 v5 scales. The visualization pairs a linear x-axis from `d3.scaleLinear` with tick marks generated by `xScale.ticks()`, and a band y-axis from `d3.scaleBand` labeling countries. The `AxisBottom` and `AxisLeft` components render grid lines and text labels, while `Marks` draws the proportional rectangles. Data loads asynchronously from a CSV using `d3.csv`.

JJean David

92% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React and D3 v5. It loads UN World Population Prospects 2019 data via d3.csv, sorts by 2020 population, and renders SVG rectangles with d3.scaleBand, d3.scaleLinear, and d3.max. The component structure separates axis and mark rendering into reusable functions, with d3.ticks generating the bottom axis labels and scaleBand domains for the left axis.

RReymond Mesuga

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

RReymond Mesuga

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

A horizontal bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The chart renders with React components and SVG, employing d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and custom tick formatting to abbreviate population values. Axes are drawn as React components with d3 scale ticks, and bars include tooltips showing exact population figures.

AAbin

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries using React and D3 v5. The bars are rendered as SVG rectangles, with the x-axis showing population values and the y-axis listing country names. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with custom React components for the axes and marks.

SSpuddy2884

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. Built with React and d3.scaleBand, d3.scaleLinear, and d3.max, it loads data from the United Nations World Population Prospects 2019 CSV, parses the 2020 population column, and renders SVG rectangles via the Marks component. Axes are drawn using custom AxisBottom and AxisLeft components, forming a clean, readable bar chart.

YYang Shun Yu

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart visualizes the top 10 most populous countries using 2020 data from the United Nations World Population Prospects 2019, rendered as horizontal bars with SVG and React. It shows population values with formatted tick labels (e.g., "1.4B") and a tooltip on each bar. The visualization uses d3.scaleBand and d3.scaleLinear for layout, while React components handle axes and marks. The code also includes a custom axis tick formatter that converts SI units from "G" to "B".

Iivipaneva2002@gmail.com

91% match

Loading thumbnail…

Fork of Refactored Bar Chart

A horizontal bar chart uses React and D3 v5 to display the top 10 most populous countries, ranking them by their 2020 population figures from the United Nations World Population Prospects dataset. The visualization renders with SVG, where d3.scaleBand maps countries to vertical positions and d3.scaleLinear scales population values to bar widths. The AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component draws the rectangular bars without any axis titles or gridlines, keeping the chart intentionally minimal.

SSreekar Reddy

91% match