Skip to main content
SimilarExport ZIP
100%

Fork of Activity 6_Question1b

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

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).

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Question1_2

This horizontal bar chart displays the populations of 20 countries for the year 2010, sorted by country name. The viz uses React with D3.js v5, importing `scaleBand`, `scaleLinear`, and `format` from the D3 library. The data is fetched as a CSV from a GitHub repository via D3’s `csv` function. The chart renders as an SVG, with bars colored orange, blue tick lines, and tooltips showing formatted population values (e.g., "1.23B").

CChandra Prakash Reddy Kalwakolu
95% match
Loading thumbnail…

Fork of Fork of Activity 6_Question1b

This example shows a horizontal bar chart of population for twenty countries, using a log-like linear scale where each bar’s length encodes the 2010 population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Axes are rendered as SVG components, with tick formatting converting values to billions and a tooltip showing the precise figure. The data is loaded via D3’s `csv` from a GitHub repository, sliced to the top twenty entries.

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

Fork of Activity-6_Question1.2

This horizontal bar chart displays the population of the first 20 countries in 2010, with countries listed on the y-axis and population values on the x-axis. The visualization uses React with D3 v5 to load data from a CSV file, and renders the bars as SVG rectangles. The code uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and a custom d3.format('.2s') to abbreviate population values, while tooltips show the exact formatted values.

Aabdul.khader2899@gmail.com
95% match
Loading thumbnail…

Fork of Fork of Activity6_Question 1.2

This bar chart displays the 2010 population for 20 countries, using horizontal bars with a green fill and axis labels in blue. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `scaleBand` and `scaleLinear` for positioning. SVG rectangles represent the marks, with tooltips formatted using D3's `format` and tick labels abbreviating billions as "B".

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

Fork of Activity 6_Question1_task2

This visualization shows a horizontal bar chart comparing the populations of 20 countries in 2010. Each bar’s length corresponds to the population value, with a blue axis line and tick marks, green bars, and a labeled x-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while the `csv` function loads data from a remote GitHub URL. Tooltips display formatted population values via the `format` function.

Jjampani921@gmail.com
94% match
Loading thumbnail…

Activity 6_Question1b

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.

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

Fork of Activity 6_Question1 1.2

This bar chart displays the population of the top 20 countries in 2010, ranked and sorted by country. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to an SVG canvas, rendering bars via custom `Marks`, `AxisBottom`, and `AxisLeft` components. The data is fetched from a CSV using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. Styling includes custom tick lines, fill colors, and a Poppins font.

HHarshita Vairagade
94% match
Loading thumbnail…

Fork of Activity6_Question1

This chart displays the populations of ten countries in 2020 as horizontal bars, ranked along a categorical y-axis. Population values are encoded as bar lengths. The visualization uses React for rendering and D3 version 5 modules including `scaleBand`, `scaleLinear`, `format`, and `csv` for data loading. The data comes from a CSV file hosted on GitHub, with values multiplied by 1000. The SVG is built from custom React components for axes and marks.

Ssaimanvith22@gmail.com
94% match