Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Vvamsikrishnakanchukommala@my.unt.edu
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Activity 7

This visualization shows the population of thirty countries in 2020 as a horizontal bar chart, with a title labeling the x-axis "POPULATION-2020". It uses React to render an SVG and the D3 v5 library's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. D3's `format('.2s')` formats axis tick labels (e.g., converting values to billions), and the `csv` function loads population data from a remote GitHub CSV file. The chart is interactive only through SVG `<title>` tooltips showing exact values.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

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

Fork of Activity 7

This example visualizes the 2020 population of 30 countries using a horizontal bar chart. The SVG renders through React components, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar lengths on the x-axis. Axis tick labels use d3.format with the '.2s' specifier to abbreviate values, replacing 'G' with 'B' for billions. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Ppavanbellam@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 7

This visualization displays a horizontal bar chart of population data for 20 countries as of 2020, sourced from a GitHub-hosted CSV file. Using d3.scaleBand and d3.scaleLinear, the chart renders as an SVG, with blue tick lines for the y-axis and a population axis formatted with d3.format to abbreviate large numbers with 'B' for billions. Rectangles serve as marks, each with a tooltip showing the exact population value via an SVG title element. The visualization integrates D3 v5 with React, using hooks like useState and useEffect to load and manage data.

MManideeprenikindi
94% match
Loading thumbnail…

Fork of Fork of Activity 7

This chart displays the populations of twenty countries in 2020 as horizontal bars, sorted by country name along the vertical axis and scaled linearly by population along the horizontal axis. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` handling the axis mappings and `format` producing the tick labels. Data is fetched via `d3.csv` from a remote GitHub-hosted CSV file, and each bar includes a tooltip showing its formatted population value.

Ssairamisetti3829@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Activity 6

This visualization presents a horizontal bar chart comparing population figures across 30 countries for the year 2020, sourced from a CSV file hosted on GitHub. The React-based application uses D3 v7 modules like `scaleBand`, `scaleLinear`, and `max` to compute scales, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and rectangular bars. Population values are formatted using D3's `format` function, with tick labels abbreviated to billions. The chart includes labeled axes and a tooltip on each bar via SVG `<title>` elements.

Ssathvik0311@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

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

Fork of Activity 7

This chart displays the 2020 population of 30 countries as a horizontal bar chart, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The bars are drawn as `rect` elements with tooltips, while axis ticks are styled—bottom ticks blue and labels gray—via `AxisBottom` and `AxisLeft` components, with tick formatting using D3's `format('.2s')` to abbreviate large numbers.

Aabjalshaik02@gmail.com
93% match