Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1 (q1)

✓ Published0🌍 Public
Aaravapalliharika2002@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Activity 6_Task 1

This visualization displays population data for ten countries in the year 2000 as horizontal bars, using SVG rendering within a React framework. The chart encodes population values with bar length on a linear scale, while countries are positioned along a band scale. It loads a CSV dataset from a GitHub URL and formats population numbers in abbreviated form using D3’s `format` function, replacing ’G’ with ’B’ for billions. React components manage axes and marks, with D3’s `scaleBand` and `scaleLinear` handling the spatial mapping, and native SVG `<title>` elements provide tooltips.

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
94% match
Loading thumbnail…

Activity 6_Task 1 Q1.1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart, using a linear x-scale for population values and a band scale for country names. Built with React and D3 v5, the chart renders SVG rectangles via a custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. Population data is loaded from a remote CSV using D3’s `csv` function, and the x-axis labels are formatted using `d3.format` to abbreviate numbers (e.g., "1.5B").

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

Activity 6_Task 1(q2)

This example shows a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with D3 v5 functions `scaleBand` and `scaleLinear` for positioning and scaling, and `format` for tick labels. Data is loaded as CSV from a GitHub URL and processed with `csv` and native JavaScript array methods before being sliced to the top 20 rows.

Aaravapalliharika2002@gmail.com
93% match
Loading thumbnail…

Activity6_Task1

This visualization displays population data for ten countries in the year 2000 using a horizontal bar chart rendered as SVG. The chart ranks countries from top to bottom by population, with green bars sized linearly to population values and formatted axis labels converting large numbers to billions. The React app loads CSV data from a GitHub repository using d3.csv, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Tooltips on each bar show the exact population value via SVG title elements.

Aamarnadhkari98@gmail.com
93% match
Loading thumbnail…

Activity_6_Task_1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart using SVG rendering within a React application. The chart uses D3.js v5 functions `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with axes rendered by custom components. Population values are formatted using D3's `format` function, abbreviating large numbers with "B" for billions. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

LLarry Johnson
93% match
Loading thumbnail…

Activity 6_task 1 Q1.1

This bar chart displays the population of ten countries in the year 2000, ranked along a vertical axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with population values converted from thousands. Axis components use `tickFormat` to abbreviate large numbers, converting 'G' to 'B' for billions.

Aakankshareddygorla@my.unt.edu
93% 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
93% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the population of ten countries in the year 2000 as a horizontal bar chart, with countries listed on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the scaling, while the AxisBottom and AxisLeft components generate the tick marks and labels. Data is loaded from a remote CSV file via d3.csv, and population values are formatted using d3.format with the '.2s' notation, displaying values in billions.

SSatish Nallamadugu
93% match