Fork of Task 1 Question 1.2

100%

Fork of Task 1 Question 1.2

✓ Published1🌍 Public

Last edited Apr 8, 2025

Created on Mar 31, 2025

This horizontal bar chart ranks 20 countries by 2010 population, with the bars extending from a shared origin and the country names on the y-axis. The chart uses D3 v5 for data loading, scaling, and formatting, and React for rendering SVG components. The red, green, and blue data is fetched from a remote CSV; the `d3.scaleBand` and `d3.scaleLinear` APIs drive the layout, while `d3.format` is used to abbreviate large numbers.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Task 1 Question 1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with the country names on the y-axis and population values on the x-axis. The chart fetches data from a CSV file on GitHub, processes it with the `csv` function from d3.v5, and renders the visualization as SVG. React components structure the chart elements, while `d3.scaleBand` and `d3.scaleLinear` handle the axes, and the tick marks are styled with a blue color.

AAbhinay Peeta

93% match

Loading thumbnail…

Fork of Task 1

This chart displays the 2020 population of 30 countries as horizontal bars, scaled linearly by population and sorted by country name. The visualization uses React components with D3 scales (d3.scaleBand, d3.scaleLinear) to position and size SVG rectangles, while D3’s format function converts large numbers to billions (e.g., “B” suffix). Axes are custom React components drawing ticks and labels, with blue tick lines and light green bars. Population data is loaded as CSV from GitHub, processed in useData hook, and supports hover tooltips via SVG title elements.

AAbhinay Peeta

91% match

Loading thumbnail…

Fork of Activity 6_Task1 question1.2

This bar chart displays the population of 20 countries in 2010, sorted alphabetically along the vertical axis with horizontal bars extending to population values. The visualization uses React with D3 v5 modules including scaleBand, scaleLinear, and format to construct the SVG. Data is loaded via d3.csv from a GitHub-hosted CSV file, with the raw ’2010’ values multiplied by 1000 to represent actual population counts. Green bars include native SVG `<title>` tooltips showing formatted population values, while axis ticks and labels are styled with custom CSS.

Ssasidhharreddy@gmail.com

91% match

Loading thumbnail…

Fork of Fork of Task 1 Question 1.1

This example displays a horizontal bar chart of population data for 20 countries, sourced from a CSV file, with a bubble-like popup showing the population value. Built with React and D3 v5, the visualization uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG rectangles with axis labels and tick marks. The code imports `AxisBottom`, `AxisLeft`, and `Marks` components, with data loaded via `d3.csv` and formatted using `d3.format`.

AAbhinay Peeta

90% match

Loading thumbnail…

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Vvchittimadha@gmail.com

90% match

Loading thumbnail…

Fork of Fork of Task 8 Q1-2

This bar chart displays the population of 20 countries in 2010, rendered as an SVG using React and D3 v5. The data is loaded from a remote CSV file and visualized with horizontal bars, where country names appear on the y-axis and population values on the x-axis. The chart uses D3's `scaleBand` and `scaleLinear` for axis scaling, and `format` to abbreviate large numbers. Interactive tooltips show the exact population value on hover, while the axis ticks and labels are styled with custom CSS.

Vvchittimadha@gmail.com

89% match

Loading thumbnail…

Fork of Task_8_Question2

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with each bar labeled by country name and a numeric axis formatted in billions. Built with React and D3 v5, it uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.csv to load data from a remote GitHub dataset. SVG rectangles render the bars, while custom AxisBottom and AxisLeft components generate the axes and tick labels, and a native SVG `<title>` element provides tooltips on hover.

Mmythripopuri2001@gmail.com

89% match

Loading thumbnail…

Fork of Activity 6_Task 1_2

A horizontal bar chart displays the populations of 20 countries in 2010, ranked along the y-axis with population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to position bars, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render axes and rectangles. Data is loaded via `d3.csv` from a GitHub gist, formatted with `d3.format`, and styled with green fills and blue tick lines.

Lleelakrishnadivi7@gmail.com

89% match