Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published1🌍 Public
Gguttavenkata745@gmail.com
Last edited Oct 18, 2024
Created on Oct 18, 2024
Forked from Hello VizHub

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.

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…

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

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Kkaringusathwika@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a vertical band scale. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with SVG rectangles drawn by the `Marks` component. The data is loaded asynchronously from a CSV file using `d3.csv`, and the population values are formatted in billions using D3’s `format` function. Tooltips reveal the exact population value for each bar on hover.

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

Activity 6_Task 1

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.

MMannava Priyanka Chowdary
95% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the population of 30 countries in 2020 as a horizontal bar chart. The React-based code uses D3 v5 to load CSV data, and employs `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. The SVG rendering includes custom axis components and rectangle marks, with tooltips showing formatted population values. Data originates from a GitHub-hosted CSV file, and the chart is rendered entirely with SVG elements.

SSowjanya Devupalli
95% match