Skip to main content
SimilarExport ZIP
100%

Activity 6_Question1b

✓ Published1🌍 Public
Aanusha.chilkamarri26@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Hello VizHub

This bar chart displays the population of 20 countries in 2020, sorted alphabetically by country name. The visualization is built with React and D3 v5, using SVG rendering. The code defines `AxisBottom`, `AxisLeft`, and `Marks` components that leverage `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Data is loaded from a CSV file via `d3.csv`, with population values calculated by multiplying 2010 figures by 1000.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Question1-2

This bar chart visualizes the population of 20 countries in 2010, sorted by country name. Each bar’s length corresponds to population, with hover tooltips showing formatted values in billions. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to render SVG rectangles and tick marks. Data is loaded from a CSV file via `d3.csv`.

Ssowmyaammula.sdv@gmail.com
95% match
Loading thumbnail…

Activity6-Question1.2

This bar chart displays the populations of 20 countries in 2020, sorted alphabetically on the y-axis with a linear population scale on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub-hosted CSV, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` with `d3.max` for the quantitative axis. SVG rectangles render the bars, with axis ticks and labels drawn via custom components and `d3.format` for tick labels.

Mmeenam1106@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_Question1b

This bar chart displays the population of 20 countries in 2010, ordered along the vertical axis with horizontal bars extending to represent each country’s population. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars rendered as SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are formatted with `d3.format` to abbreviate large numbers (e.g., converting billions).

Aanusha.chilkamarri26@gmail.com
94% match
Loading thumbnail…

Activity6-Question-1.2

This bar chart displays the population of 20 countries in 2010, with horizontal bars sorted alphabetically by country name and scaled linearly by population. The visualization uses React alongside D3 v5’s `scaleBand`, `scaleLinear`, and `csv` for data loading, rendering SVG rectangles through the custom `Marks` component. Axes are generated by `AxisBottom` and `AxisLeft`, with formatted tick labels using `format('.2s')` and a tooltip via `<title>`. Tick lines are styled blue and bars green, with data sourced from a remote CSV file.

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

Activity6_Question 1

This bar chart displays the 2020 populations of 30 countries, sorted alphabetically along the vertical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axis components are custom-built using D3’s tick methods, while data is loaded via `d3.csv` from a GitHub-hosted CSV file. Hovering over a bar reveals a tooltip via an SVG `<title>` element, and the x-axis labels are formatted using `d3.format`.

MMounishAllam@my.unt.edu
93% match
Loading thumbnail…

Activity 6 question 1_2

This bar chart displays the population of 20 countries in 2010, using horizontal bars ordered by country name. The visualization loads CSV data from GitHub via `d3.csv` and renders as an SVG using React components (AxisBottom, AxisLeft, Marks) with scales from `d3.scaleBand` and `d3.scaleLinear`. The x-axis uses `d3.format` to abbreviate population values (e.g., converting gigabytes to billions). Hovering over each bar reveals the exact population through an SVG `<title>` tooltip.

AAamani Chamarthi
93% match
Loading thumbnail…

Activity 6_Question 1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name, with bars extending from a shared left baseline. 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 remote CSV file via `d3.csv`, formatted with `format('.2s')` to show abbreviated labels like “1.2B”, and rendered as SVG rectangles with native tooltips. The code includes reusable axis components and applies a green fill to the bars.

MMonish Galla
93% match
Loading thumbnail…

Activity6_Question1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted with the largest population at the top of the chart. The visualization uses React components to render SVG elements and D3 v5 APIs, including `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with population values converted from the raw 2010 column. Marks are rendered as rectangles whose widths are proportional to population values, with tooltips formatted using D3’s `format`.

AAftab Hussain
93% match