Skip to main content
SimilarExport ZIP
100%

Fork of Activity_6_tut-1

✓ Published0🌍 Public
Ssairam.amaraneni22@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Activity_6_tut-1

This interactive bar chart displays the 2020 population estimates for 30 countries, ordered along the y-axis with population values on the x-axis. Built with React and D3 v5, the visualization uses SVG rendering and maps data from a CSV file loaded via D3's `csv` function. The chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with a custom tooltip showing abbreviated values via `d3.format`. The code defines reusable components for axes and marks, applying CSS styling to ticks and bars.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity_6_tut-1

This visualization shows a horizontal bar chart of population figures for 30 countries in 2020, with each bar labeled by country name and positioned along a linear population scale. The chart uses React components and D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axis ticks generated by D3’s tick formatting. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and hover tooltips display formatted population values using the `.2s` SI format.

Ssairam.amaraneni22@gmail.com
96% match
Loading thumbnail…

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

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

Fork of Activity_6_tut-1

This example shows a horizontal bar chart comparing the population of thirty countries in 2020, with each bar representing a country and its length scaled by population. The chart uses React components to render SVG elements, with d3.v5 providing the scaleBand and scaleLinear functions to map country names and population values to pixel coordinates. The axis components generate tick marks and labels, while the Marks component draws the bars with native SVG <rect> elements. Data is loaded asynchronously from a CSV file using d3.csv and formatted with d3.format.

Ssairam.amaraneni22@gmail.com
93% match
Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

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

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

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

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam
92% match
Loading thumbnail…

Fork of Activity 7

This bar chart displays population estimates for 30 countries in 2020, organized alphabetically along the vertical axis with horizontal bar lengths encoding population values. 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 the bars. The data comes from a remote CSV file loaded via `d3.csv`, axis ticks are generated with custom React components, and numbers are formatted using `d3.format`.

Ssusarlasruthi2000@gmail.com
92% match
Loading thumbnail…

Fork of Fork of Activity-6

This horizontal bar chart displays the 2020 population estimates for 30 countries, with each bar's length proportional to its population value. Built with React and D3.js, the visualization uses reusable components for axes and marks. The `AxisBottom` component generates tick marks with formatted labels, while `AxisLeft` renders categorical labels. The `Marks` component maps each data row to a rectangle positioned by the categorical y-scale and sized by the linear x-scale, with tooltips showing the exact population via SVG `<title>` elements. Data is loaded asynchronously using D3's `csv` parser from a GitHub-hosted CSV file.

KKarnam Abinay Goud
92% match