Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published0🌍 Public
MMannava Priyanka Chowdary
Last edited Oct 21, 2024
Created on Oct 21, 2024
Forked from Hello VizHub

This chart displays the 2020 population of 30 countries as a horizontal bar chart. Each bar’s length is proportional to population, with country names on the vertical axis and a formatted population scale on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Data is loaded from a remote CSV file using D3’s `csv` function.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
95% 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
95% 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
95% 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
94% match
Loading thumbnail…

Activity6_Task1

This chart displays the population of 30 countries in 2020 as horizontal bars, sorted by country name. It is built with React and D3 v5, using a linear x-scale for population values and a band y-scale for countries. The SVG rendering includes axis components and rectangular marks with tooltips, while CSV data is loaded asynchronously via the `useData` hook.

Ssanjanadadi19@gmail.com
94% 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
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart visualizes the 2020 population of 30 countries, using a horizontal layout with bars scaled by population. The visualization is built with React and D3 v5, leveraging `d3.scaleBand` and `d3.scaleLinear` for axes and `d3.format` for tick labels (e.g., converting "G" to "B"). Data is loaded from a CSV URL via `d3.csv` and rendered as SVG rectangles with tooltips. A Poppins font and CSS styles control the visual presentation.

Ssaiteja.cse.rymec@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted by country name along the vertical axis. The chart uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are formatted using D3’s `format` function, converting billions to a readable label. The data is loaded via `d3.csv` from a remote GitHub source, and each bar includes a tooltip showing the formatted population value.

PPothuguntla Pranitha
94% match