Fork of Fork of Activity-6

100%

Fork of Fork of Activity-6

✓ Published0🌍 Public

Last edited Oct 20, 2024

Created on Oct 20, 2024

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar's length proportional to its population value. Built with React and D3.js, the visualization uses reusable components for axes and marks. The `AxisBottom` component generates tick marks with formatted labels, while `AxisLeft` renders categorical labels. The `Marks` component maps each data row to a rectangle positioned by the categorical y-scale and sized by the linear x-scale, with tooltips showing the exact population via SVG `<title>` elements. Data is loaded asynchronously using D3's `csv` parser from a GitHub-hosted CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

Vvidyagangasani@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity-6

This fork of Activity-6 presents a horizontal bar chart that ranks the top 30 countries by their 2020 population, using data from a CSV file hosted on GitHub. The bars are drawn as SVG rectangles, with their widths scaled by population values and their vertical positions determined by a categorical y-scale. The visualization uses D3 v5 for data loading (via `d3.csv`) and scale construction, while React manages the component state and rendering. Axis components render tick marks and labels, and hovering over a bar reveals its exact population value through a native SVG `<title>` tooltip.

KKarnam Abinay Goud

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

93% match

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file and rendered as SVG. React components build the visualization, using `scaleBand` and `scaleLinear` from D3 v5 to map country names and population values to positions and lengths. The `Marks` component draws rectangles with tooltips, while `AxisBottom` and `AxisLeft` generate ticks and labels.

Aakankshareddygorla@my.unt.edu

93% match

Loading thumbnail…

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav

93% match

Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav

93% match

Loading thumbnail…

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam

93% match

Loading thumbnail…

Fork of Activity_6_tut-1

This interactive bar chart displays the 2020 population estimates for 30 countries, ordered along the y-axis with population values on the x-axis. Built with React and D3 v5, the visualization uses SVG rendering and maps data from a CSV file loaded via D3's `csv` function. The chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with a custom tooltip showing abbreviated values via `d3.format`. The code defines reusable components for axes and marks, applying CSS styling to ticks and bars.

Ssairam.amaraneni22@gmail.com

92% match