Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
VVarshithMurakonda@my.unt.edu
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Hello VizHub

This bar chart visualizes the population of the top 30 countries in 2020 using a horizontal layout, with country names on the y-axis and population values on the x-axis. The data is loaded from a Gist CSV file via d3.csv, then sorted and sliced to select the top entries. The visualization uses d3.scaleLinear and d3.scaleBand to map values, while SVG rectangles render the bars. Interactive hover effects change bar colors from light green to orange, and axes are generated using d3.axisBottom and d3.axisLeft.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the populations of the top thirty most populous countries for 2020. Constructed with D3.js v6, the visualization sorts data in descending order and renders it as an SVG. Horizontal bars and axes are generated using D3's scaleBand and scaleLinear, with axes crafted via axisBottom and axisLeft. The data is loaded from a remote CSV file.

SSrihith Reddy Gaddam
95% match
Loading thumbnail…

Fork of Hello VizHub

A horizontal bar chart displays the populations of thirty countries in 2020, sorted by country name along the y-axis and ordered by population along the x-axis. The visualization uses React with D3 version 5, specifically `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles. Data is loaded from a CSV file via the `csv` function, with tooltips formatted using D3's `format` function to show abbreviated population values. The chart includes styled axes with blue tick lines and gray tick labels.

Ssaivaishnogaruda@gmail.com
92% match
Loading thumbnail…

Fork of Hello VizHub

A horizontal bar chart displays the top 30 countries by 2020 population, using a bright green fill and blue axis ticks. The React application loads CSV data from a GitHub repository and renders SVG graphics with D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and custom components for axes and rectangular marks. Tooltips on each bar show the formatted population value via an SVG `<title>` element.

Ssusarlasruthi2000@gmail.com
92% match
Loading thumbnail…

Fork of Hello VizHub

A horizontal bar chart displays the population of thirty countries in 2020, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. SVG rectangles render the bars, with axes drawn from custom `AxisBottom` and `AxisLeft` components. A tooltip shows the formatted population value on hover, and the x-axis labels abbreviate large numbers (e.g., "1.2B") using D3's `format`.

Ssahaspragna6@gmail.com
91% match
Loading thumbnail…

Fork of Hello VizHub1

This bar chart displays the populations of 30 countries in 2020, ranked from largest to smallest. The visualization loads a CSV dataset from GitHub and renders horizontal bars in SVG using React. It employs D3 v5’s `scaleBand`, `scaleLinear`, `csv`, `format`, and `max` functions, with custom React components for axes and marks. The x-axis uses abbreviated tick formatting, and hovering over a bar shows an exact population via a tooltip. The chart includes labeled axes and a title specifying the population year.

Ppravallikaratankanthkatragadda@my.unt.edu
91% match
Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population in 2000 for the ten most populous countries, sorted in descending order. The visualization uses D3 v7 to load CSV data via `d3.csv` with `autoType`, and renders horizontal bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with tick labels formatted using `d3.format('~s')`. The SVG output is styled with Poppins font and palegreen bars.

SSrihith Reddy Gaddam
91% match
Loading thumbnail…

Fork of Hello VizHub

This bar chart displays the population of the top 20 countries in 2010, ordered alphabetically. It uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` for tick labels. Data is loaded via `csv` from a GitHub URL. The chart includes styled tick marks and axis labels for clarity.

Ssaivaishnogaruda@gmail.com
91% match
Loading thumbnail…

Fork of Hello VizHub for activity 6

This example displays a horizontal bar chart of the top 30 countries by 2020 population, using data loaded from a CSV file hosted on GitHub. The visualization renders as an SVG, built with React and D3 v5. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate population values. Custom components draw the axes, while each bar includes a tooltip showing the formatted population value.

Sshravan.s0710@gmail.com
91% match