Activity 7

100%

Activity 7 - Task 1

✓ Published0🌍 Public

Last edited Jul 23, 2023

Created on Jul 10, 2023

This visualization shows a horizontal bar chart comparing the populations of ten countries in 2010, using green bars sorted by country name on the y-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for bars. CSV data is loaded via `useData` with `d3.csv`, while custom `AxisBottom` and `AxisLeft` components render ticks and labels. Population values are formatted with `d3.format` and tooltips appear on hover via SVG `title` elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7-Task1

This visualization shows the populations of ten countries in 2020 as horizontal bars, scaled linearly along the x-axis and categorized by country along the y-axis. It is implemented in React with D3 v5 utilities, where `d3.scaleBand` positions the bars and `d3.scaleLinear` maps population values to pixel widths. The chart renders as an SVG with custom `AxisBottom` and `AxisLeft` components, and hoverable bars display tick-formatted tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV using `d3.csv`.

Mmn0658

94% match

Loading thumbnail…

This horizontal bar chart displays the 2010 populations of ten countries, sorted by name along the y-axis. The visualization uses React with D3.js v5, constructing an SVG with scales from `d3.scaleBand` and `d3.scaleLinear`. The population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` (abbreviated to billions), and rendered as green rectangles. Axis tick marks and labels are styled with blue lines and gray text, with a cumulative x-axis label reading "POPULATION-2010".

LLakshmanRangisetti

94% match

Loading thumbnail…

Activity 7

This horizontal bar chart displays the 2010 populations of ten countries, sorted by country name, with light green bars on an SVG canvas. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `format` (converting G to B), and rendered through custom React components for axes and marks. A native SVG `<title>` element provides hover tooltips.

VVenkat-Sumith-Thota

93% match

Loading thumbnail…

Activity 7 Task 1

A horizontal bar chart displays 2020 population estimates for ten countries, with bars extending rightward from a shared origin. The visualization uses React to render SVG elements, while D3 v5 provides scaleBand for the categorical y-axis, scaleLinear for the quantitative x-axis, and tick formatting via d3.format. The chart loads CSV data from GitHub using d3.csv, and includes blue axis ticks, orange bars, and tooltips showing formatted population values on hover.

MmNamratha25

93% match

Loading thumbnail…

Activity7Task1.2_2010Data

This bar chart displays the population of the top 10 countries in 2010, sourced from a CSV file loaded via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with population values formatted using `d3.format`. Bars are rendered as SVG `<rect>` elements with built-in tooltips showing the formatted population. The visualization is built with React, using reusable axis and mark components, and styled with green bars and blue axis lines.

HHemanthh81

93% match

Loading thumbnail…

Activity 7_Part1

This visualization displays the population of ten countries in 2020 as a horizontal bar chart, with countries sorted on the y-axis and population shown on the x-axis. The bars are rendered as SVG rectangles using React components, with the population values scaled by a linear axis and formatted in a compact, readable way (e.g., "1.2B"). The chart is built with D3.js v5 for data loading and scaling functions, including `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `csv` for fetching the dataset from a remote GitHub source. Axis ticks and labels are styled with a brown line color and a Poppins font, and each bar includes a tooltip showing the population value.

Rrikhitakoganti12

92% match

Loading thumbnail…

Activity 7-2.2

This example displays a horizontal bar chart ranking the population of ten countries in 2010, using green bars with blue tick marks and country labels on the left axis. It loads population data from a CSV file via `d3.csv`, then slices the first ten rows. The chart is built with React components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. SVG rendering with D3 v5 handles the visual output, including a formatted axis using `d3.format`.

Ppjdhungana@gmail.com

92% match

Loading thumbnail…

Activity 7

A horizontal bar chart displays the 2020 populations of ten countries, sorted by country name, with bars rendered as green SVG rectangles. The chart uses D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen positions, while React components build the axes and marks. Data loads from a remote CSV file, with population values converted from thousands. Axis tick labels use D3's `format` to abbreviate large numbers, and hovering over a bar reveals a native tooltip with the formatted value.

Aakshayvenishetty1437

92% match