Skip to main content
SimilarExport ZIP
100%

Activity_Question 1->2

✓ Published0🌍 Public
PPreethamreddyannavaram@my.unt.edu
Last edited Apr 4, 2025
Created on Apr 4, 2025
Forked from Hello VizHub

This example shows a bar chart of population data for the top 20 countries, comparing values from the year 2010. The chart uses a light green color for the bars and features red tick marks on the axes, with a custom Poppins font applied throughout. Built with React and D3 v5, the visualization pulls data from a CSV file hosted on GitHub, parsing and multiplying population values by 1000 for display. The axes are constructed using reusable components that generate tick lines and labels, while the `useData` hook handles asynchronous data loading via D3's `csv` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Question1.2

This example shows a horizontal bar chart of population figures for the top 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The chart uses React with D3 v5 scales and axes, loading data from a remote CSV file via `d3.csv`. Bars are rendered as SVG `rect` elements with a tooltip that formats values using `d3.format`, and the visualization includes custom axis components built with `scaleBand` and `scaleLinear`.

PPreethi Medepalli-91
92% match
Loading thumbnail…

Activity6_Question1(2)

This horizontal bar chart displays the populations of the top 20 countries for 2010, using green bars and blue axis lines. The visualization is built with React and D3 v5, using SVG rendering. Data is loaded from a CSV file using D3’s `csv` function, then mapped to scale bands and linear scales. Bars are rendered as SVG `rect` elements, with axis ticks generated by custom `AxisBottom` and `AxisLeft` components. Population values are formatted with D3’s `format` function to abbreviate large numbers (e.g., “1.2B”).

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

Activity6_Question 1.2

This example displays a horizontal bar chart of the top 20 countries by population in 2010, with bars colored light green and axes rendered as SVG elements. It loads population data from a GitHub-hosted CSV file using `d3.csv`, and builds the visualization with `scaleBand` and `scaleLinear` for scales. The React-based code demonstrates modular components for the bottom and left axes, as well as marks, while using `d3.format` to abbreviate large population values (e.g., converting gigabytes to billions) in the tooltip and tick labels.

MMounishAllam@my.unt.edu
90% match
Loading thumbnail…

Activity_6_Question1.2

This example shows a horizontal population bar chart for 20 countries using 2010 data, with bars colored light green and axes labeled in blue. The visualization uses React to render SVG elements, with D3 v5 APIs including `scaleBand` and `scaleLinear` to map categorical and quantitative data. The `csv` function loads data from a GitHub-hosted CSV file, while custom `AxisBottom` and `AxisLeft` components generate ticks. Each bar includes a native SVG `<title>` tooltip displaying formatted population values using D3's `format` function.

HHarsha vardhan reddy Yarmareddy
90% match
Loading thumbnail…

Activity6_Question 1-2

This horizontal bar chart displays the top 20 countries by their 2010 population, sourced from a CSV file fetched via d3.csv. The React visualization uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the population scale, rendering SVG rectangles with hover tooltips. Axes are built with custom React components, and the x-axis formats tick labels using d3.format to abbreviate large numbers into billions.

PPreethamreddyannavaram@my.unt.edu
90% match
Loading thumbnail…

Activity6_Question2

This bar chart displays the top 20 countries by population in 2010, using a horizontal layout with red bars scaled linearly from zero to the maximum value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rectangles for the marks. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values converted from thousands. Axes are custom React components, and hover tooltips show the formatted population using D3’s `format` with SI prefixes.

Kkartheekgrpt@gmail.com
90% match
Loading thumbnail…

Activity6_Question1-2

This example shows the top 20 countries by 2010 population as a horizontal bar chart, with country names on the y-axis and population totals formatted in billions along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements to render each bar. The data is loaded from a CSV file via `d3.csv`, and the chart includes custom axis components and a tooltip showing the formatted population value on hover.

Aayeshamanzoor111798@gmail.com
90% match
Loading thumbnail…

Activity 6_Question2

This bar chart displays the population of the top 20 countries in 2010, ordered along the y-axis with horizontal red bars extending along the x-axis. The visualization loads CSV data from a GitHub repository, slices the first 20 entries, and renders them using React with SVG. It employs D3 v5’s `scaleBand` and `scaleLinear` for axes, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to generate ticks, labels, and rectangles. A hover tooltip shows the formatted population value via a `<title>` element.

Ccharishmakalyanapu@gmail.com
90% match