Fork of A6_Q1.1

100%

Fork of A6_Q1.1

✓ Published1🌍 Public

SShashankkodishala@my.unt.edu

Last edited Oct 18, 2024

Created on Oct 18, 2024

Forked from A6_Q1

This fork of Activity6_Task1 renders a horizontal bar chart of the top ten countries by population in the year 2000. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to position SVG rectangles and axes, with a tooltip showing the formatted population value. The chart applies a light green fill to bars, blue tick lines, and a Poppins font, loading data from a CSV URL and formatting large numbers with D3's `format`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.

Kkrunalpatel@my.unt.edu

92% match

Loading thumbnail…

Fork of Activity6_Task1

This horizontal bar chart displays the top 20 countries by 2010 population, with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and `csv` to load data from a GitHub-hosted CSV file. SVG rectangles represent each country, with tooltips showing formatted population values via D3’s `format` function. Axes are custom-rendered components, and the data is processed by converting the 2010 values from thousands to raw numbers before slicing the dataset.

PPothuguntla Pranitha

91% match

Loading thumbnail…

Fork of Activity8_Task1_DV

This fork renders a horizontal bar chart of population data for 30 countries in 2020, using React to compose an SVG scene. The code imports D3 v5 utilities like `scaleBand`, `scaleLinear`, and `max` to position bars and axes, while custom components (AxisBottom, AxisLeft, Marks) generate tick lines and rectangles. Population values are loaded from a CSV via D3’s `csv` function, then formatted with `format('.2s')` to display billions with a 'B' suffix. The visual emphasizes green bars against a clean white background, with tooltips revealing precise values on hover.

Llikithabaddam@my.unt.edu

91% match

Loading thumbnail…

Fork of Activity6_ Task 1

This fork of Activity6 Task 1 presents a horizontal bar chart visualizing the 2010 populations of the top 10 countries, ranked using a `d3.scaleBand` on the y-axis and a linear scale (`d3.scaleLinear`) on the x-axis. Built with React and D3 v5, the chart renders as an SVG, with bar widths representing population values. Data is loaded from a remote CSV file via `d3.csv`. The axes are composed manually: the bottom axis uses `d3.format` to abbreviate large numbers, while the y-axis displays country labels from the scale's domain.

PPreethamreddyannavaram@my.unt.edu

91% match

Loading thumbnail…

Fork of Activity 6_Task 1_Q1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with a linear scale for population and a band scale for country names. The visualization is built with React and D3 v5, fetching data from a remote CSV file and rendering SVG elements. Custom axis components generate tick marks and labels, while rectangular marks include tooltips showing the formatted population value via the d3 `format` API.

KKondreddy Saikiran reddy

91% match

Loading thumbnail…

Fork of activity 6_Task 1

A horizontal bar chart displays population figures for ten countries in 2000, with bars colored light green and axis ticks in blue. The visualization loads CSV data from a GitHub repository using D3 v5’s `csv` method, then renders SVG elements through React components. D3’s `scaleBand` and `scaleLinear` position the categorical y-axis and quantitative x-axis, while the `format` function converts population values into abbreviated units like billions.

HHari Kiran

91% match

Loading thumbnail…

Fork of Activity 6_Task 1_Q1.2

A horizontal bar chart displays the 2010 populations of 20 countries, loaded as CSV data via `d3.csv` in a custom `useData` hook. React components render the SVG, with `scaleBand` and `scaleLinear` mapping countries and population values, while `AxisBottom` and `AxisLeft` create axes. The `Marks` component draws rectangle bars with tooltips, and populations are formatted using `d3.format`.

KKondreddy Saikiran reddy

91% match

Loading thumbnail…

Fork of Activity6_q1.1

A fork of a VizHub activity example, this visualization renders a horizontal bar chart of country populations for the year 2000. The data is loaded from a GitHub-hosted CSV and displayed using React and D3 v5, with the top ten countries sorted by population. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG `<rect>` marks for each bar and a `<title>` element for tooltips. The code demonstrates importing D3 functions and local ES6 modules, and customizes axis styling through CSS classes.

Jjahnavigummadi@my.unt.edu

91% match