Fork of activity 6_ Q1.2

100%

Fork of activity 6_ Q1.2

✓ Published0🌍 Public

Last edited Apr 6, 2024

Created on Apr 6, 2024

This example shows a horizontal bar chart comparing the 2010 populations of twenty countries, sorted alphabetically by country name. Population values are converted from raw CSV numbers and formatted as billions using D3's `format` function. The visualization uses React with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering SVG rectangles for each bar. Hovering over a bar reveals a tooltip with the formatted population value. The chart includes styled axes with blue tick lines and a labeled x-axis, and loads data asynchronously from a GitHub-hosted CSV file.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Aaadesh.pranesh@gmail.com

94% match

Loading thumbnail…

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Kkowshiksamudrala08@gmail.com

94% match

Loading thumbnail…

Fork of Activity 6_Question 2

This example presents a horizontal bar chart of population figures for 20 countries in 2020, arranged from top to bottom by country name. The chart uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning bars and `format` to abbreviate axis tick labels. Data is loaded from a remote CSV using D3’s `csv` function, with population values computed by multiplying the 2010 column by 1000. Bars include a native SVG `<title>` tooltip showing the formatted population value.

HHarshita Vairagade

93% match

Loading thumbnail…

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com

93% match

Loading thumbnail…

Fork of Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

Bbhavanadupati3@gmail.com

93% match

Loading thumbnail…

Fork of Activity6_Q1.2

This example displays a horizontal bar chart of 2010 population data for twenty countries, loaded from a CSV file. The chart uses React with D3 v5 scales and axes, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. SVG rectangles render the bars, with tooltips appearing on hover. The code imports D3 utilities like `csv`, `format`, and `max` to process and format the data, replacing 'G' with 'B' for billion labeling.

SShiva Sai Reddy

93% 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

93% match

Loading thumbnail…

Fork of Activity 6_Q1_2

This visualization shows a horizontal bar chart comparing the 2010 population of twenty countries, sourced from a CSV file hosted on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, rendering marks as SVG rectangles. Axes are customized via reusable components, and `d3.format` converts tick labels from billions to abbreviate them.

KKarnam Abinay Goud

93% match