Skip to main content
SimilarExport ZIP
100%

Bar Chart - React & D3 (Part 24) - Stylised

✓ Published4🌍 Public
TTom-S82
Last edited Sep 16, 2020
Created on Sep 16, 2020

This interactive bar chart displays the top countries by estimated UN population for a selected year, with the number of countries adjustable via dropdowns. The bars are color-coded by continent and stylized with gradient fills and drop shadows. The visualization uses React for state management and component rendering, while D3 v5 handles data loading (via `csv`), scaling (`scaleBand`, `scaleLinear`), and axis generation. Population values are loaded from a CSV file and formatted using D3’s `format` function.

AI-generated description

A program that creates a bar chart based on estimated UN Population levels.

Extras:

  • Dynamic Selection
    • Select any year between 1950 and 2020
    • Select a variable number of countries to return
  • The continents of the countries are drawn in different colors to show how the global population is roughly distributed
  • Bars formatted to look 3D and border effects (as per the previous fork)

Potential Improvements for later:

  • Formatted tooltip on multiple lines
  • Animation when the dropdowns are selected rather than only happening on initial loading

Tutorials:

Other Documentation:

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart - React & D3 (Part 22) - Commercialised

This bar chart displays the ten most populated countries in 2020 based on UN population estimates. Built with React and D3 v5, it renders SVG rectangles whose lengths animate from zero to their final values using the `<animate>` element. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axes split into separate files. Alternating blue and orange vertical gradients give the bars a 3D appearance, while a drop-shadow filter adds depth. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

TTom-S82
90% match
Loading thumbnail…

Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart displays estimated UN population levels for the top N countries in a selected year, with bars color-coded by continent to reveal global population distribution. Users can dynamically adjust both the year (1950–2020) and the number of countries shown via dropdown menus. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for layout, SVG `<rect>` elements with linear gradients and drop-shadow filters for a stylized 3D effect, and loads data from a CSV file processed through D3's `csv` method.

RRahulSai05
90% match
Loading thumbnail…

Stylized Bar Chart with React & D3

This stylized bar chart displays the top 10 countries by estimated 2020 population, using horizontal bars derived from UN population data loaded with d3.csv. The React app manages data loading through a custom useData hook and renders an SVG composed of reusable components for axes and marks. D3’s scaleBand and scaleLinear map countries and population values, while d3.format converts large numbers into abbreviated strings like “1.23B” for axis ticks and tooltips.

MMinh Luong
90% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of the top ten countries, ranked by their 2020 estimates. The chart is rendered as a horizontal bar chart with a distinctive green color scheme for axes and teal bars. Built using React and D3 v5, the code loads a CSV file of UN population data and uses `scaleBand` and `scaleLinear` to map countries and populations. SVG elements are generated via React components, with custom tick labels formatting values in billions.

FFonda Irena Santoso
89% match
Loading thumbnail…

Making a Bar Chart with React & D3 (Tutorial 21)

This example shows a horizontal bar chart of the estimated 2020 populations for the top ten countries, sourced from a UN population CSV file. Built with React and D3 v5, it renders as an SVG, using `d3.scaleBand` and `d3.scaleLinear` to map country names and population values to rectangular coordinates. The chart uses the `d3.max` function to determine the scale domain and React’s `useState` and `useEffect` hooks to asynchronously load and slice the data for display.

TTom-S82
89% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population using D3 scales and React components. The SVG visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.format` to convert population values into readable billions. Data loads from a CSV of UN population estimates via `d3.csv`, with React hooks managing asynchronous state. Each bar includes a native SVG `<title>` tooltip showing the formatted value, with styled axes using Poppins typography.

JJanet Li
89% match
Loading thumbnail…

Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart displays the top N countries by estimated population for a selected year, using a React front end with D3.js v5 for data processing and SVG rendering. Data comes from a UN population dataset loaded via `d3.csv`. The chart features horizontally oriented bars styled with CSS gradients and drop shadows, colored by continent, with dropdowns to change the year and number of countries shown. Axes are built with `d3.scaleBand` and `d3.scaleLinear`, and the bar widths stretch using an SVG `<animate>` element on load.

RRahulSai05
89% match
Loading thumbnail…

Bar Chart - 04 [Stylized]

A stylized horizontal bar chart displays 2019 UN population estimates for the top ten most populous countries, using the `scaleBand` and `scaleLinear` APIs from D3 v5 within a React component. Bars are rendered as SVG rectangles, with tooltips showing formatted values via the `format` function. The chart features custom tick styling, a Poppins font, and a color palette emphasizing orange bars against muted gridlines. Data is loaded asynchronously from a CSV via `fetch` and parsed with `csvParse`.

EEhtisham UL Hassan
89% match