Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published2🌍 Public
Bbhavanimandula@my.unt.edu
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Activity 7

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries for the year 2010, sorted by country name along the y-axis. The visualization uses React with D3 v5 scales, rendering an SVG with colored horizontal bars. D3’s `scaleBand` and `scaleLinear` map country names and population values, while the tick format converts values to billions. Data is loaded from a remote CSV via D3’s `csv` method, and interactive tooltips appear on each bar using SVG `<title>` elements.

Bbhargavipagolu2025@gmail.com
95% match
Loading thumbnail…

Activity6_population

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements for bars. Data comes from a remote CSV, loaded via `d3.csv`, with population values converted from thousands. Interactive hover tooltips show formatted values, while styled axes and labels clarify the visualization.

Kkeerthi.yanala104@gmail.com
95% 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
95% 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
95% 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
95% match
Loading thumbnail…

Activity6_population-2010

This bar chart displays the populations of 20 countries in 2010, with countries listed on the vertical axis and population values (formatted in billions) on the horizontal axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. The data is loaded from a CSV file via `d3.csv`, with the population column converted from a string to a number by multiplying by 1000.

Aanjalimadhavi98@gmail.com
94% match
Loading thumbnail…

Activity 6.2

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.

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

Activity_6

This horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name along the y-axis and population size along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric scale, and SVG `rect` elements for bars. Data loads from a CSV via the `csv` function, with population values converted from thousands, and axes are rendered by custom React components.

Ssanjanadadi19@gmail.com
94% match