Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart without React

✓ Published0🌍 Public
KKingsley Yang
Last edited Jun 14, 2021
Created on Jun 14, 2021
Forked from Making a Bar Chart

This example displays a horizontal bar chart ranking the top 10 most populous countries, based on 2018 United Nations population estimates. The chart visualizes population values in millions, with a customized x-axis that abbreviates large numbers using the `d3.format` function. Built with D3 v5 (using `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`), it renders to SVG. Axes are customized by removing domain lines and tick marks, with the y-axis labels and gridlines created using `.tickSize` and `.tickFormat`.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the top ten most populous countries in 2020, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v6, it uses `d3.csv` to load UN population data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the quantitative axis. The chart renders as SVG, with gridlines and tick labels generated via `xScale.ticks()`.

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

Making a Bar Chart with React & D3

This bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, rendered with React and D3.js (v5). The chart displays horizontal bars ordered by population, with formatted tick labels (e.g., “1.4B”) and interactive tooltips showing exact values. D3’s scaleBand and scaleLinear handle axes and positioning, while React components (AxisBottom, AxisLeft, Marks) compose the SVG output. The bottom axis includes custom formatting via D3’s format API, and the styling uses the Poppins font.

MMauricio García Benítez
93% match
Loading thumbnail…

Making a Bar Chart with D3.js!

This visualization uses D3.js to render a horizontal bar chart of the top ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart displays population figures (in thousands) along the x-axis and country names along the y-axis, with steel-blue bars and formatted tick labels (using abbreviations like "B" for billions). The code employs D3’s `csv` loader, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, all rendered as SVG within a React framework.

Fforcox43
93% match
Loading thumbnail…

Making a Bar Chart with D3.js!

This visualization uses D3.js to render a horizontal bar chart of the top ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart displays population figures (in thousands) along the x-axis and country names along the y-axis, with steel-blue bars and formatted tick labels (using abbreviations like "B" for billions). The code employs D3’s `csv` loader, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes, all rendered as SVG within a React framework.

Fforcox43
93% match
Loading thumbnail…

Making a Bar Chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations’ 2017 World Population Prospects (2018 estimates). The population values are multiplied by 1,000 to reflect actual counts. Built with React and D3.js, the visualization renders as an SVG. It uses D3’s `scaleLinear` and `scaleBand` for axes, with `axisBottom` and `axisLeft` to draw ticks, and formats large numbers via `format('.3s')`. The chart’s bars are represented as circles, with original tick lines and axis domains removed for a cleaner aesthetic.

Fforcox43
93% match
Loading thumbnail…

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

Refactored Bar Chart

This example shows a horizontal bar chart ranking the top 10 countries by population for 2020, using SVG rectangles to encode population values along the x-axis and country names along the y-axis. The visualization is built with React for component management and d3.v5 utilities, including `scaleBand`, `scaleLinear`, `csv`, and `max` for data loading and scaling. The data originates from a UN Population 2019 CSV file, fetched via d3's `csv` method and stored in React state with the `useState` and `useEffect` hooks. Custom React components for axes and marks handle the SVG rendering, with the chart embedded in a full-viewport body and production builds of React and D3 loaded via CDN.

Ccynichole
92% match