dv.21 - basic bar chart

dv.23 - refactored bar chart

This example shows the top 20 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. The React app loads CSV data from the UN World Population Prospects 2019, sorts by 2020 population, and renders SVG rectangles using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Axis labels and tick marks are generated by custom React components that use d3 scale methods to position text and lines. The chart updates automatically when the data loads asynchronously via d3.csv.

94% match

dv2020-ep21-viz20 - bar chart

A horizontal bar chart displays the 20 most populous countries in 2020, ranked in descending order by population. The visualization uses React to render SVG rectangles, with D3's `scaleBand` and `scaleLinear` mapping country names to y-coordinates and population values to bar widths. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` parser and sorted with `d3.descending`. The chart updates dynamically as React re-renders when the asynchronous data fetch completes.

93% match

dv2020-ep22-viz22 - bar chart, axes

A horizontal bar chart displays the top five most populous countries in 2020, sorted in descending order. The visualization uses d3.csv to load UN World Population Prospects 2019 data, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear with d3.max for the quantitative x-axis. React manages the component state, while SVG renders the ticks, gridlines, text labels, and rectangles. The background is set to a light yellow-green, with margins positioning the plot area.

92% match

dv.22.2 - axes & labels w/ react & d3

This bar chart displays the 20 most populous countries, with populations from the United Nations World Population Prospects 2019 dataset. D3.js scales map country names to the y-axis and population values to the x-axis. React renders the SVG, with map methods generating axis ticks and labels. The chart uses `scaleBand` and `scaleLinear` from D3, and React's `useState` and `useEffect` for data loading and state management.

Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars using React and D3 v5. The chart lacks axes, displaying only labeled bars with lengths proportional to each country’s 2020 population estimate. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via `d3.csv`. The code uses `d3.scaleBand` for vertical positioning, `d3.scaleLinear` for bar widths, and renders SVG elements within a React component using hooks.

YYohR

Bar Chart

This example displays the top 12 most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019. The visualization omits axes, showing only the raw rectangles. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the y-axis positioning, and `scaleLinear` for the x-axis bar lengths, rendering the output as SVG.

NNikithakatta30

Bar Chart - React, D3

A bar chart displays the top 10 most populous countries in 2020, using horizontal bars sorted by population. The visualization is built with React components and D3 scales (`scaleBand`, `scaleLinear`), rendering SVG rectangles for marks and custom axis components. D3’s `csv` loader fetches United Nations World Population Prospects 2019 data, with population formatted in billions. Tooltips show exact values via SVG `<title>` elements, while axes and labels are styled with CSS.

NNelson M

dv2020-ep22-viz21 - bar chart, margin convention

A horizontal bar chart ranks the 20 most populous countries by 2020 population estimates from UN World Population Prospects 2019. D3’s `scaleBand` positions bars vertically, while `scaleLinear` maps population values to bar widths. The React component loads CSV data via `d3.csv`, sorts it descending, and renders an SVG with the classic margin convention, translating a group for axes-free inner dimensions.