Skip to main content
SimilarExport ZIP
100%

Reproducing the Bar Chart

✓ Published2🌍 Public
WWaseem Medhat
Last edited Oct 20, 2020
Created on Oct 20, 2020
Forked from HTML Starter

This example reproduces a bar chart ranking the ten most populous countries in 2020, sourced from the United Nations World Population Prospects 2019. It shows horizontal bars of varying lengths with a zero line, axis ticks, and a population title, using React components for rendering to SVG. The code employs D3 v6 scales (`scaleBand`, `scaleLinear`) for positioning, D3’s `format` for tick labels, and `csv` for data loading. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ZeroLine`) manage the visualization layout and styling.

AI-generated description

Replicating from scratch the bar chart created in Datavis 2020 (episodes 21-24).

MIT Licensed

Similar vizzes

Loading thumbnail…

Reproducing the Bar Chart

This bar chart displays the top 10 most populous countries for the year 2020, with horizontal bars mapped to population values and country names on the y-axis. It is built with React and D3 v6, using `scaleBand` and `scaleLinear` for positioning, while SVG elements render the axes, bars, and labels. The data comes from a CSV of United Nations World Population Prospects 2019, loaded via D3’s `csv` function, and the chart includes formatted population labels plus a zero line for reference.

WWaseem Medhat
95% match
Loading thumbnail…

Simple Bar Chart

This example shows a simple horizontal bar chart ranking the ten most populous countries for 2020, with the length of each bar proportional to the country’s population. The chart is rendered as SVG using React, with d3.csv loading the United Nations World Population Prospects 2019 dataset and d3.scaleBand and d3.scaleLinear mapping country names and population values to positions and bar widths. React’s useState and useEffect manage the asynchronous data loading and state updates, while the bars themselves are drawn as SVG `<rect>` elements.

Ttorstenaan
93% match
Loading thumbnail…

Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The React component structure separates axis and mark rendering into reusable subcomponents. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.csv to load the data. SVG rectangles are positioned and sized using the scales, with axes generated via d3-scale’s ticks and domain mapping.

AAhmad Butt
92% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The bars are rendered as SVG rectangles, with a linear scale mapping population values to widths and a band scale positioning each country’s bar vertically. The code uses React to create a placeholder circle, but the visible chart is built by commented-out D3 code that would call `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load and plot the data.

AAnton Vasilev
92% match
Loading thumbnail…

Making Bar Chart

This bar chart displays the ten most populous countries in the world, using data from the United Nations World Population Prospects 2019. The chart renders horizontal bars whose lengths correspond to each country’s 2020 population. Built with React and D3 version 5, it uses custom axis components (`AxisBottom` and `AxisLeft`) for rendering ticks and labels, while `Marks` draws the rectangles. Hovering over a bar reveals a tooltip with the exact population value via an SVG `<title>` element.

Ccacho2294
92% match
Loading thumbnail…

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

let's make a bar chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis, rendered as SVG rectangles. The chart uses React for the component structure and d3.v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with the data sourced from the United Nations World Population Prospects 2019 CSV. Axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component draw the ticks, labels, and bars, while the `useData` hook asynchronously loads and slices the dataset.

KKRITIKA RAI DWIVEDI
92% match
Loading thumbnail…

Time Series Bar Chart

This example visualizes the ten most populous countries in 2020 using a horizontal bar chart, with country names on the y-axis and population on the x-axis. Built with React and SVG, it uses D3’s `scaleBand` and `scaleLinear` to map data to coordinates, and the `csv` function to load the United Nations World Population Prospects 2019 dataset. Custom components `AxisBottom` and `AxisLeft` render the axes, while `Marks` draws the bars with tooltips.

Ffoomoon
92% match