Skip to main content
SimilarExport ZIP
100%

Task1_Act6

✓ Published1🌍 Public
JJean
Last edited Oct 17, 2024
Created on Oct 17, 2024
Forked from Activity 7

This bar chart displays population figures for ten countries in the year 2000, with countries listed along the vertical axis and horizontal bars representing their populations. The visualization uses React with D3 v5, employing d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded from a CSV file hosted on GitHub, processed with d3.csv to multiply the raw values by 1000, and rendered as SVG rectangles using React components. The code includes custom tick formatting that converts d3's SI notation to billions, and axes are constructed through reusable React components.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task1_Activity6

This visualization displays populations of ten countries in the year 2000 as a horizontal bar chart rendered with SVG in React. It uses D3’s scaleBand for the categorical y-axis, scaleLinear for the quantitative x-axis, and format for truncated tick labels (e.g., 'B' for billions). Data is loaded via d3.csv from a GitHub-hosted CSV file, with population values multiplied by 1,000. Tooltips show formatted population values via SVG <title> elements, and axis ticks are styled with blue lines and gray text.

Ssanjanadadi19@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 10 countries in the year 2000, ordered along a vertical band scale with horizontal bars extending from a shared origin. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, while custom React components render SVG axes and marks. Population values are loaded from a CSV file, scaled using d3-format’s `format('.2s')` to abbreviate tick labels (e.g., ’B’ for billions), and exposed via native SVG `<title>` tooltips. Styling applies blue tick lines, light green bars, and a Poppins font.

Ggsdontineni518@gmail.com
94% match
Loading thumbnail…

Task1_Act6 PArt 2

A horizontal bar chart displays population figures for 20 countries, with bars extending from a shared left axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values, while `csv` loads data from a GitHub-hosted CSV file. SVG rectangles render each bar, with axes generated via custom React components. Population values are formatted using D3's `format` function, converting numbers to abbreviated labels like "B" for billions.

JJean
94% match
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the population of ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization is built with React, D3 v5, and SVG, using `scaleBand` and `scaleLinear` for positioning. Data is loaded from a remote CSV file, and axis tick labels are formatted using D3’s `format` function to abbreviate large numbers with "B" for billions.

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

activity 6_Task 1

A horizontal bar chart displays the population of ten countries in the year 2000, with country names on the y-axis and population formatted in billions on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded as CSV from a GitHub repository using D3's `csv` method, with axis labels and tick formatting handled by custom `AxisBottom` and `AxisLeft` components.

Mmythripopuri2001@gmail.com
94% match
Loading thumbnail…

Activity6_Task1_Q1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout where each bar's length corresponds to the population value. The visualization uses D3 v5's `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering marks as SVG rectangles. Tooltips show formatted population values (using D3's `format` with SI prefixes like "B" for billions). The data is loaded from a remote CSV file using D3's `csv` function, with the population values computed by multiplying the raw 2000 column by 1000. React manages the component state and rendering, with custom `AxisBottom` and `AxisLeft` components generating the tick marks and labels.

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

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ranked by value. The visualization uses React with D3 v5, rendering as an SVG. The `Marks` component creates rectangles whose width is scaled by population, while the `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data is loaded via the `csv` API from a remote URL, with population computed by multiplying the 2000 column by 1000. The `scaleBand` and `scaleLinear` functions map countries and populations to screen coordinates, and formatted tick labels replace 'G' with 'B' for billions.

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

Activity6_Task1

This bar chart shows the population of ten countries in the year 2000, ranked and scaled by count. Built with React and D3 v5, it uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` to load and process data from a GitHub-hosted CSV. Custom axis and mark components render rectangles with tooltips, and the x-axis labels are formatted using SI prefixes, converting 'G' to 'B' for billions. The chart includes styled ticks, a light green fill for bars, and a Poppins font.

AAreeba Hassan
94% match