Skip to main content
SimilarExport ZIP
100%

Task 1

• Draft1🔗 Unlisted
Vvinishreddy.kamireddy@gmail.com
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from Hello VizHub

This chart displays the population of 30 countries in 2020 as a horizontal bar chart. The visualization loads data from a CSV file using the D3 `csv` function and renders the chart with SVG elements. It uses D3’s `scaleBand` and `scaleLinear` for axis scaling, and React components for the axes and marks, with the bar lengths proportional to population values. The x-axis labels are formatted using D3’s `format` function to abbreviate large numbers, and tooltips show the formatted value on hover.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task 1

This chart displays the population of 30 countries in 2020, sorted along the y-axis with a horizontal bar for each country whose length corresponds to its population. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, rendering SVG rectangles for the bars. The data is fetched via D3’s `csv` function, and tick labels on the x-axis are formatted using `d3.format`. Blue axis lines and green bars are styled through CSS, with tooltips showing each value on hover.

Yyashwanthkirla95@gmail.com
95% match
Loading thumbnail…

Task 1

A horizontal bar chart displays the top 30 countries by population in 2020. React renders the SVG, while D3 v5's `scaleBand` and `scaleLinear` position bars and map values to pixel widths. The chart includes labeled axes with a custom tick formatter converting values to billions. Hovering over each `rect` reveals the population via a native SVG `<title>` tooltip. Data is loaded from a CSV file using D3's `csv` parser.

Vvinishreddy.kamireddy@gmail.com
93% match
Loading thumbnail…

task1

This bar chart shows the population of 30 countries in 2020. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map country names and populations to SVG rectangles. Data is loaded from a CSV file via `d3.csv` and formatted using `d3.format`. Axes are custom-rendered, with hover tooltips displaying the formatted population values.

IIkram Mohammed
93% match
Loading thumbnail…

activity 6_Task 1

This chart displays the population of 30 countries in 2020 using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG rectangles as marks with native tooltips. Data is loaded asynchronously from a CSV hosted on GitHub via `d3.csv` (not `d3.forceSimulation` or other graph APIs), and population values are preprocessed by multiplying the year-2020 column by 1000. The axes are custom components (`AxisBottom` and `AxisLeft`) using D3 ticks and formatting with `format('.2s')` to display values in billions.

Gguttavenkata745@gmail.com
93% match
Loading thumbnail…

Activty6_Task 1

This chart displays the population of 30 countries in 2020 as a horizontal bar chart, with bars extending from a shared left baseline and ordered by country name. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the `csv` function fetches the data from a remote URL. The code defines separate components for axes and marks, with the bottom axis formatted using D3's `format` to abbreviate large numbers (e.g., converting "G" to "B" for billions).

Ssriharshithaanugu5@gmail.com
92% match
Loading thumbnail…

Activity 6_Task 1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file using D3’s `csv` function, and population values are multiplied by 1000. The SVG rendering uses custom React components for axes and marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers (e.g., “1.23B”).

Nnikhilthoutu24@gmail.com
92% match
Loading thumbnail…

Task1_Act6

A horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the vertical axis. Population values are encoded as bar lengths using a linear scale, with green bars and blue tick lines against a white background. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded as CSV via the `csv` function, with population values multiplied by 1000, and axis labels are formatted using `format('.2s')` to show values in billions.

JJean
92% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries for the year 2020, ranked along the vertical axis. The chart uses a green horizontal bar for each country, with a tooltip showing the precise population value on hover. It loads data from a CSV file via D3's `csv` function, and constructs a band scale and linear scale for the axes. The React components render SVG elements for the axes and marks, while D3's `format` function converts large numbers into abbreviated strings.

Kkaringusathwika@gmail.com
92% match