Skip to main content
100%

Activity 6.2

✓ Published0🌍 Public
MMdAfikurRahmanKhan@my.unt.edu
Last edited Nov 16, 2025
Created on Nov 16, 2025
Forked from Activity 6

This is a horizontal bar chart displaying the populations of twenty countries in 2010, sorted by country name. The chart uses React components to render SVG elements, with D3 scales (`scaleBand`, `scaleLinear`) and formatting via `d3.format`. Data is loaded asynchronously from a CSV using `d3.csv`, and each bar includes a tooltip showing the population value. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to construct the visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6

This bar chart displays the populations of 20 countries in 2010, sorted vertically by country name with proportional horizontal bars. 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 reusable AxisBottom, AxisLeft, and Marks components. Population values are parsed from a CSV file using `d3.csv`, formatted with `d3.format`, and displayed with a tooltip on each bar.

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

Activity 6.12

This bar chart displays the population of 20 countries in 2010, ordered along a vertical axis with horizontal bars extending from a shared baseline. The visualization uses React to render SVG elements, with D3's `scaleBand` and `scaleLinear` mapping country names and population values to pixel coordinates. Axes are drawn using custom `AxisBottom` and `AxisLeft` components, while the `Marks` component generates rectangles with native SVG tooltips. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values converted from thousands using D3's `format` helper.

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

Activity-6

This chart displays the populations of 20 countries in 2010 as a horizontal bar chart, ordering the bars by country name. It uses d3.scaleBand and d3.scaleLinear to position bars, with React components for axes and marks, rendering to SVG. Data is loaded via d3.csv from a GitHub raw dataset, with population values converted from a string column to numbers. The chart applies d3.format for compact tick labels, replacing 'G' with 'B' for billions.

Iiftequaruddin883@gmail.com
94% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Rrakshithareddy217@gmail.com
93% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Rrakshithareddy217@gmail.com
93% match
Loading thumbnail…

Activity6_population2

A horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles are rendered via custom `Marks` components, with axes generated by `AxisBottom` and `AxisLeft`. Population values are loaded from a remote CSV file, formatted using D3's `format` function to display values in billions.

Rrishithagovini99@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of ten countries in 2020, sorted with the largest at the top. D3's `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render the axes and bars. The chart loads data from a remote CSV file using `d3.csv`, converts the year-2000 column to population by multiplying by 1000, and uses `d3.format` to abbreviate axis tick labels (e.g., billions). The visualization is built with React and D3 v5, rendering to SVG with a Poppins font and custom styling for ticks and marks.

Mmailtomeanusha11@gmail.com
93% match
Loading thumbnail…

Activity 6

This example displays a horizontal bar chart comparing the 2010 populations of 20 countries, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The visualization renders as SVG, with custom `AxisBottom` and `AxisLeft` components generating ticks, and `Marks` creating rectangles with tooltips formatted using `d3.format`.

Vvishu.valandas@gmail.com
93% match