Skip to main content
SimilarExport ZIP
100%

Activity6_task1

✓ Published0🌍 Public
VVrushikaKanaparthy@my.unt.edu
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. SVG rectangles render the bars, with tooltips showing formatted values via `format('.2s')`. The chart includes custom `AxisBottom` and `AxisLeft` components for ticks and labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted along a linear scale. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for bars. Data is loaded via `d3.csv` from a GitHub-hosted CSV, with population values formatted using `d3.format`.

Bbhavanadupati3@gmail.com
95% match
Loading thumbnail…

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name along the y-axis, using a React and D3 v5 stack. The visualization imports `scaleBand` and `scaleLinear` from D3 to map country names and population values to SVG rectangles, with axes generated by custom `AxisBottom` and `AxisLeft` components. Data loads from a CSV via `d3.csv` and formats tick labels with `d3.format`. Hovering over a bar reveals its exact population through a native SVG `<title>` tooltip.

Ssiddhubhupathi@gmail.com
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name, using SVG rendered via React. The chart loads CSV data from a GitHub gist, multiplies the 2020 value by 1000, and maps it to a linear scale, while countries are positioned with a band scale. Axes are built with custom React components (AxisBottom, AxisLeft), and a marks component renders each bar with a native tooltip. The code uses d3.scaleBand, d3.scaleLinear, and d3.format for tick labels.

SSrihith Reddy Gaddam
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, loaded from a remote CSV via `d3.csv`. The visualization uses React components to render an SVG, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Axis labels and tick marks are generated with custom `AxisBottom` and `AxisLeft` components, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Aaravapalliharika2002@gmail.com
94% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. 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 parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.

Kkrishnavisheshkatta@my.unt.edu
94% match