Skip to main content
SimilarExport ZIP
100%

Activity_6_tut-1

✓ Published3🌍 Public
Ssairam.amaraneni22@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

A horizontal bar chart displays the 2020 population for the top 30 countries, sorted by country name with bars extending left-to-right. The visualization uses React with D3 v5's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles via the `Marks` component. Population values are loaded from a CSV, formatted with `d3.format`, and converted from raw numbers to billions using a custom tick formatter that replaces 'G' with 'B'. The chart includes styled axis ticks, a labeled x-axis, and tooltips showing the formatted population on hover.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Tutorial1

A horizontal bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name along the y-axis and population along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, with SVG `rect` marks fetching data from a CSV file. A tooltip shows the formatted population value on hover.

Ddandudivya98@gmail.com
93% match
Loading thumbnail…

Fork of Activity_6_tut-1

This visualization shows a horizontal bar chart of population figures for 30 countries in 2020, with each bar labeled by country name and positioned along a linear population scale. The chart uses React components and D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axis ticks generated by D3’s tick formatting. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and hover tooltips display formatted population values using the `.2s` SI format.

Ssairam.amaraneni22@gmail.com
93% match
Loading thumbnail…

Activity 6 Tutorial 1

This horizontal bar chart displays the population of 30 countries for the year 2020, with country names labeled along the y-axis and population values represented by bar lengths along the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map the data, and renders SVG rectangles through custom `Marks`, `AxisBottom`, and `AxisLeft` components. Population values are formatted with D3’s `format` function, and the data is loaded asynchronously from a CSV file using `d3.csv`.

BBharath Vupputuri
93% match
Loading thumbnail…

Act_6_Tut_1

This chart displays the 2020 populations of 30 countries as a horizontal bar chart, with bars ordered alphabetically by country name. The visualization uses React to manage state and render SVG elements, while D3’s `scaleBand` and `scaleLinear` handle visual scaling. Population values are loaded via `d3.csv`, formatted with `d3.format`, and tooltips reveal exact figures on hover. The code demonstrates custom axis components, including left-side country labels and bottom population ticks with a G-to-B suffix conversion.

Ssairam.amaraneni22@gmail.com
92% match
Loading thumbnail…

Activity_6_task1

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with each bar labeled by country name and values formatted in billions. The visualization uses React with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis), rendering SVG rectangles via the Marks component. Data is loaded as CSV from a GitHub repository and processed with d3.csv, with population values multiplied by 1000. The chart includes axis components for bottom and left ticks, plus an "POPULATION-2020" axis label.

HHarinathChakali33@gmail.com
92% match
Loading thumbnail…

Activity 6 Tutorial 1

This example presents a horizontal bar chart showing the 2020 population for 30 countries. The visualization uses D3 v5 for data loading and scaling, with React components for rendering each SVG element. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks and bar rectangles. The data is fetched from a CSV file using D3’s `csv` function, and tooltips display formatted population values.

BBamanGayathri
92% match
Loading thumbnail…

Activity6Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars extending from a shared baseline and country names on the y-axis. The visualization uses D3 v5 scaleBand and scaleLinear for positioning, with data loaded via d3.csv from a GitHub-hosted CSV file. React renders SVG elements, while helper components AxisBottom, AxisLeft, and Marks generate ticks and rectangles. Hovering reveals formatted population values through SVG title tooltips, and the x-axis uses SI-format abbreviations that convert "G" to "B".

Ssatishvelaga02@gmail.com
92% match
Loading thumbnail…

Activity6_tutorial-1

This visualization displays the top 30 countries by 2020 population using a horizontal bar chart rendered with SVG in a React application. The bars are populated from a CSV dataset, with population values formatted in billions using D3’s `format`. The chart uses `scaleBand` for the categorical country axis, `scaleLinear` for the quantitative population scale, and custom React components for the axes and marks. The code imports `csv`, `scaleBand`, and `scaleLinear` from d3.v5, while tooltips appear via SVG `<title>` elements on each rectangle.

Aamulyareddykondru01@gmail.com
92% match