Skip to main content
SimilarExport ZIP
100%

Task1_Act6

✓ Published0🌍 Public
JJean
Last edited Oct 17, 2024
Created on Oct 17, 2024
Forked from Activity 7

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task1_Act6 PArt 2

A horizontal bar chart displays population figures for 20 countries, with bars extending from a shared left axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values, while `csv` loads data from a GitHub-hosted CSV file. SVG rectangles render each bar, with axes generated via custom React components. Population values are formatted using D3's `format` function, converting numbers to abbreviated labels like "B" for billions.

JJean
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
94% match
Loading thumbnail…

Task1_Act6

This bar chart displays population figures for ten countries in the year 2000, with countries listed along the vertical axis and horizontal bars representing their populations. The visualization uses React with D3 v5, employing d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded from a CSV file hosted on GitHub, processed with d3.csv to multiply the raw values by 1000, and rendered as SVG rectangles using React components. The code includes custom tick formatting that converts d3's SI notation to billions, and axes are constructed through reusable React components.

JJean
93% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 population of 30 countries, with countries listed on the vertical axis and population values represented by horizontal bar lengths. The visualization is built using React with D3 v5 for data loading and scales, rendering to SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for abbreviating population labels (e.g., converting billions to "B"). Data comes from a remote CSV file via `d3.csv`, with population values multiplied by 1000 during parsing.

Ssaimanvith22@gmail.com
93% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

SSahithi.R
93% match
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
93% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted alphabetically along the vertical axis with horizontal bar lengths representing population values in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data loads asynchronously from a GitHub-hosted CSV using `d3.csv`, with axis ticks formatted using `d3.format` and a hover tooltip provided by SVG `<title>` elements.

AArunVurukonda@my.unt.edu
93% match
Loading thumbnail…

Activity-6(Task1)

This bar chart displays the population of 30 countries in 2020, using horizontal bars that encode population values by length. The visualization is built with React and D3 v5, leveraging D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rendering for crisp output. The chart includes custom tick formatting that converts scientific notation to readable numbers, and tooltips show exact population values. Data is loaded from a remote CSV file using D3’s `csv` parser.

Vvandanakosuri@my.unt.edu
93% match