Skip to main content
SimilarExport ZIP
100%

Activity6_Task2(Question 1)

✓ Published0🌍 Public
SSowjanya Devupalli
Last edited Oct 17, 2024
Created on Oct 17, 2024
Forked from Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The horizontal bars are sorted by population, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `csv` for data loading, and renders SVG `rect` elements via the `Marks` component. The chart applies a custom Poppins font, teal bar color, and axis tick styling for a polished presentation.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_6 Q-1

This bar chart displays the top 10 most populous countries in 2000, using data from the United Nations World Population Prospects 2019. Horizontal bars use vibrant orange against a light background, with population values shown along the x-axis in billions. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population scale. SVG rectangles render the marks, with axes generated through custom `AxisBottom` and `AxisLeft` components using D3's `format` for tick labels.

Kkrishna444battula@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This visualization is a horizontal bar chart that displays the top 10 most populous countries based on 2019 United Nations data, with population values shown on the x-axis and country names on the y-axis. The chart uses React to render SVG elements, with axes generated by the `AxisBottom` and `AxisLeft` components, and data bars drawn by the `Marks` component. The population data is loaded from a CSV using d3's `csv` function, and the scales are created using `scaleBand` and `scaleLinear`.

RRevanth putta
92% match
Loading thumbnail…

Activity6_Task2(question 1)

This bar chart displays the top 10 most populous countries as of January 1, 2024, using a vertical bar layout with axes labeled for country names and population in thousands. The visualization fetches data from the UN population estimates dataset via `@curran/un-population-estimates-2024`, filters for country entries, and sorts them in descending order. It renders with D3 scales (`scaleBand` and `scaleLinear`) and includes axis labels from the `@curran/axis-labels` library. The chart uses standard SVG rectangles for bars and a light gray inner rectangle background.

SSowjanya Devupalli
92% match
Loading thumbnail…

Activity6_Task1Question2

This visualization displays the top 20 most populous countries in 2010 as a horizontal bar chart, with population values encoded by bar width and country names listed on the y-axis. The chart uses React with D3 v5 APIs, including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements rendered through a custom `Marks` component. Population data is loaded from a CSV file using `d3.csv`, sorted descending, and formatted with D3's `format('.2s')` to convert numbers into billions. Axis ticks are styled with CSS classes.

Kkamalini.ponnuru11@gmail.com
92% match
Loading thumbnail…

Activity 6_Task 1 Question 1.1

This bar chart displays the top 10 countries by population for the year 2000, using horizontal bars to facilitate comparison. Built with React and SVG, the visualization renders population values on a linear scale, with formatted tick labels (e.g., "1.2B") for readability. The code leverages D3.js's `scaleBand`, `scaleLinear`, `max`, and `format` functions for layout and number formatting, while the data is fetched and processed from a CSV file using D3's `csv` method. The chart includes clear axis labels and a title, all styled with CSS.

Gguttavenkata745@gmail.com
91% match
Loading thumbnail…

Activity6_Task1_Question1.1

This chart displays the top 10 countries by population in 2020, using a horizontal bar chart rendered as SVG elements. Population values are loaded from a CSV file and formatted with SI prefixes, converting gigabytes to billions for readability. React manages the component state, while D3's `scaleBand` and `scaleLinear` position the bars, with the `Marks` component generating each rectangle. Axes are created through custom `AxisBottom` and `AxisLeft` components, and the chart includes a native SVG tooltip showing the population value on hover.

Hharshabandi3060@gmail.com
90% match
Loading thumbnail…

Activity6Question1

This horizontal bar chart displays the top 10 countries by population in 2020, using a dataset loaded as CSV from GitHub via D3’s `csv` function. Built with React and D3 v5, it renders an SVG with categorical bars (using `scaleBand` for the y-axis) and a linear x-axis (via `scaleLinear`), formatted with D3’s `format` for SI units. Interactive hover tooltips show the population values through SVG `<title>` elements. The axes and tick marks are styled with blue lines and gray text, with bars colored light green, all wrapped in a Poppins font layout.

Ssatishvelaga02@gmail.com
90% match
Loading thumbnail…

Activity6_Task1.1

This bar chart displays the top 10 countries by population in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scales and formatting functions (scaleBand, scaleLinear, format) to position bars and transform tick labels. Population data is loaded from a CSV file via d3.csv and prepared in a custom useData hook. Each bar includes a native SVG tooltip showing the formatted population value.

Ssunny.musku2631@gmail.com
90% match