Skip to main content
SimilarExport ZIP
100%

ACT6_TUT1_TASK3

✓ Published0🌍 Public
RRevanth putta
Last edited Oct 26, 2025
Created on Oct 26, 2025

This stylized bar chart uses a horizontal layout to compare the 2010 populations of twenty countries, encoding values with bar lengths on a linear scale. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes and positioning, with SVG `<rect>` marks that display a tooltip on hover. The chart applies a clean, minimal aesthetic with a Poppins font, custom tick and axis styling, and a teal fill for bars. Data is loaded from a CSV file hosted on GitHub, and axis labels are formatted to abbreviate large numbers, such as replacing 'G' with 'B'.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Act-6 Task-1

This example shows a horizontal bar chart of 2010 population figures for 20 countries, with bars sorted by country name and labeled in billions. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and d3-format’s `format('.2s')` for tick labels. Data is loaded asynchronously from a CSV via `d3.csv`, and hover tooltips are provided through SVG `<title>` elements.

Bbhargavireddy4016@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing 2020 populations for up to 30 countries, with each bar labeled by country and sized proportionally to its population. The chart uses an SVG rendering with a green fill for bars and blue tick lines, and hover tooltips formatted with abbreviations like "B" for billions. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist URL. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are custom React components that generate tick lines and rectangular marks, while `format('.2s')` handles tick label abbreviation.

Jjtulasi05@gmail.com
90% match
Loading thumbnail…

Activity_6_Task_1_Q1.2

This chart presents a horizontal bar chart comparing the populations of 20 countries in 2010, using D3 v5 within a React framework. The bars are rendered as SVG rectangles, with the country names on the y-axis and a linear population scale on the x-axis; hovering reveals a tooltip with the formatted value. The code builds axes using `scaleBand` and `scaleLinear`, formats tick labels with `format('.2s')`, and loads data via `d3.csv` from a GitHub-hosted CSV file. Styling is applied through CSS classes for marks and gridline ticks.

AAP19110020041-Pavan Kumar
90% match
Loading thumbnail…

activity 6_task 1

This example shows a horizontal bar chart of population data for 20 countries in 2010, with each bar labeled by country name and sized by population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning, and `format` to abbreviate axis tick labels (converting "G" to "B" for billions). Data loads from a remote CSV file via `d3.csv` in a custom `useData` hook. The code also defines reusable axis and mark components, and includes tooltips on each bar using SVG `<title>` elements.

Bbrahmateja.edu2023@gmail.com
90% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2010 population estimates for 20 countries, ranked vertically by country name. Data is loaded from a remote CSV file and rendered as SVG rectangles using React. The visualization uses D3 v6 scales (`scaleBand` and `scaleLinear`) along with custom `AxisBottom` and `AxisLeft` React components. Axes are formatted with D3's `format` function to abbreviate large population values, and tooltips show the same formatted values on hover.

Kkandooriabhiram@gmail.com
90% match
Loading thumbnail…

Activity6_Task - 1

A horizontal bar chart displays the 2010 populations of 30 countries, ordered by name along the y-axis, with bar lengths proportional to population values on a linear scale. React components render the SVG visualization, while d3 v5 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`, `format`) load data from a GitHub-hosted CSV and compute scales and tick formatting, abbreviating large numbers with SI prefixes. The bars use CSS fill colors, and hover tooltips show formatted values via native SVG `<title>` elements.

NNitish Thotakura
90% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 10 countries in the year 2000, ordered along a vertical band scale with horizontal bars extending from a shared origin. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, while custom React components render SVG axes and marks. Population values are loaded from a CSV file, scaled using d3-format’s `format('.2s')` to abbreviate tick labels (e.g., ’B’ for billions), and exposed via native SVG `<title>` tooltips. Styling applies blue tick lines, light green bars, and a Poppins font.

Ggsdontineni518@gmail.com
90% match
Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name along the y-axis. Each bar’s length encodes population value, with a formatted tick label converting SI units (e.g., "B" for billions) for readability. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, then sliced to the first 20 rows.

Ggsdontineni518@gmail.com
90% match