Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6

✓ Published0🌍 Public
Vvidyagangasani@my.unt.edu
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

Vvidyagangasani@my.unt.edu
95% match
Loading thumbnail…

Fork of Activity 7

This bar chart displays population estimates for 30 countries in 2020, organized alphabetically along the vertical axis with horizontal bar lengths encoding population values. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for the bars. The data comes from a remote CSV file loaded via `d3.csv`, axis ticks are generated with custom React components, and numbers are formatted using `d3.format`.

Ssusarlasruthi2000@gmail.com
95% match
Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav
95% match
Loading thumbnail…

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

Pperamranji
94% match
Loading thumbnail…

Fork of Fork of Activity-6

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar's length proportional to its population value. Built with React and D3.js, the visualization uses reusable components for axes and marks. The `AxisBottom` component generates tick marks with formatted labels, while `AxisLeft` renders categorical labels. The `Marks` component maps each data row to a rectangle positioned by the categorical y-scale and sized by the linear x-scale, with tooltips showing the exact population via SVG `<title>` elements. Data is loaded asynchronously using D3's `csv` parser from a GitHub-hosted CSV file.

KKarnam Abinay Goud
94% match
Loading thumbnail…

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

Vvamsikrishnakanchukommala@my.unt.edu
94% match
Loading thumbnail…

Fork of Fork of Activity 6

This visualization presents a horizontal bar chart comparing population figures across 30 countries for the year 2020, sourced from a CSV file hosted on GitHub. The React-based application uses D3 v7 modules like `scaleBand`, `scaleLinear`, and `max` to compute scales, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and rectangular bars. Population values are formatted using D3's `format` function, with tick labels abbreviated to billions. The chart includes labeled axes and a tooltip on each bar via SVG `<title>` elements.

Ssathvik0311@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam
94% match