Fork of Activity-6_task-1

100%

Fork of Activity-6_task-1

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

This visualization shows the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It uses React and d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering SVG rectangles via the Marks component. The data is loaded as CSV using d3.csv, with population values formatted using d3.format. Axes are custom components built with SVG elements, and the chart is styled with the Poppins font.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task1

This visualization displays the populations of 30 countries in 2020 as a horizontal bar chart, with the x-axis labeled “POPULATION-2020.” Built with React and D3 v5, it uses `scaleBand` for the categorical Country axis and `scaleLinear` for the Population axis, with `csv` loading data from a GitHub-hosted dataset. SVG rectangles are rendered from the `Marks` component, with axes drawn by `AxisBottom` and `AxisLeft`, and a `format('.2s')` tick formatter converting numbers to abbreviated labels.

Kkartheekgrpt@gmail.com

95% match

Loading thumbnail…

Fork of Activity 6_Task1

This bar chart displays the population of 30 countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React with D3 scales—`scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis—to render SVG rectangles. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and the code includes custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate axis ticks and bars. The x-axis labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting millions to billions with an "B" suffix).

EElena Momtcheva

95% match

Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Vvamsikrishnakanchukommala@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of the top 30 countries in 2020, with each bar labeled by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative axes, while `d3.format` converts raw values into readable SI units. Custom React components for axes and marks render the SVG rects, and data is loaded asynchronously from a CSV file via `d3.csv`.

Kkaringusathwika@gmail.com

94% match

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a horizontal linear scale with countries listed on a vertical band scale. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to compute dimensions, while custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels. Population values are formatted with `format('.2s')` and converted from thousands, and each rectangle includes a native SVG `<title>` tooltip. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL.

LLakshmiPrasannaValdas@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity 7

This chart displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to positions, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are loaded from a CSV file and formatted with D3’s `format` function, converting billions to a readable "B" suffix. The chart includes a labeled x-axis and blue tick lines, with a green fill for each bar.

Llikhithakarunakarreddym@gmail.com

93% match

Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Ppraneeth.d555@gmail.com

93% match

Loading thumbnail…

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This visualization displays the population of 20 countries in 2010 using horizontal bars, with countries listed along the vertical axis and population values on the horizontal axis. The chart renders as an SVG using React components, with D3 scaleBand and scaleLinear functions managing the layout. Data loads from a CSV file via d3.csv, and the x-axis uses d3’s format function to abbreviate large numbers (e.g., converting billions to “B”). Bar marks include tooltips showing the precise formatted population value, while axis ticks and labels are generated using custom React components.

HHema Tummapala

93% match