Fork of activity6_Task1q2

100%

Fork of activity6_Task1q2

✓ Published0🌍 Public

Last edited Oct 22, 2024

Created on Oct 22, 2024

This interactive bar chart displays the population of 20 countries in 2010, with each country listed on the vertical axis and its population shown as a horizontal bar length. The visualization is built using React and D3 version 5, leveraging `scaleBand`, `scaleLinear`, and the `csv` loader to fetch data from a GitHub URL. SVG rectangles represent the bars, with tooltips formatted using D3's `format` function to abbreviate large numbers (e.g., '1.2B'). Axis components are custom React elements, and the chart is rendered entirely as SVG within a React component.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task1_Q1.2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name along the vertical axis with population magnitude encoded by bar length on the horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Population values are formatted using D3's `format` function to abbreviate large numbers with suffixes like "B" for billions. Data is loaded asynchronously from a remote CSV file via D3's `csv` parser.

Ggreeshmareddy135@gmail.com

95% match

Loading thumbnail…

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This visualization displays the population of 20 countries in 2010 using horizontal bars, with countries listed along the vertical axis and population values on the horizontal axis. The chart renders as an SVG using React components, with D3 scaleBand and scaleLinear functions managing the layout. Data loads from a CSV file via d3.csv, and the x-axis uses d3’s format function to abbreviate large numbers (e.g., converting billions to “B”). Bar marks include tooltips showing the precise formatted population value, while axis ticks and labels are generated using custom React components.

HHema Tummapala

94% match

Loading thumbnail…

Fork of Activity 6_Task1 question1.2

This bar chart displays the population of 20 countries in 2010, sorted alphabetically along the vertical axis with horizontal bars extending to population values. The visualization uses React with D3 v5 modules including scaleBand, scaleLinear, and format to construct the SVG. Data is loaded via d3.csv from a GitHub-hosted CSV file, with the raw ’2010’ values multiplied by 1000 to represent actual population counts. Green bars include native SVG `<title>` tooltips showing formatted population values, while axis ticks and labels are styled with custom CSS.

Ssasidhharreddy@gmail.com

94% match

Loading thumbnail…

Fork of Activity 6_Task 1_Q1.1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with a linear scale for population and a band scale for country names. The visualization is built with React and D3 v5, fetching data from a remote CSV file and rendering SVG elements. Custom axis components generate tick marks and labels, while rectangular marks include tooltips showing the formatted population value via the d3 `format` API.

KKondreddy Saikiran reddy

94% match

Loading thumbnail…

Fork of Activity6_Task1

This horizontal bar chart displays the top 20 countries by 2010 population, with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and `csv` to load data from a GitHub-hosted CSV file. SVG rectangles represent each country, with tooltips showing formatted population values via D3’s `format` function. Axes are custom-rendered components, and the data is processed by converting the 2010 values from thousands to raw numbers before slicing the dataset.

PPothuguntla Pranitha

94% match

Loading thumbnail…

Fork of Activity6_Task1_Question2

This bar chart displays the population of the top 20 countries in 2020, with countries listed on the vertical axis and population values on the horizontal axis. The visualization uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping data to positions. Each bar’s width reflects the population value, and hovering reveals a tooltip via the SVG `<title>` element. Data is loaded asynchronously from a GitHub-hosted CSV using D3’s `csv` function, formatted with `format('.2s')` to abbreviate large numbers. The chart includes custom axis components for bottom and left ticks.

Hharshabandi3060@gmail.com

94% match

Loading thumbnail…

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.

Kkrunalpatel@my.unt.edu

94% match

Loading thumbnail…

Fork of Activity 6_Task 1_2

A horizontal bar chart displays the populations of 20 countries in 2010, ranked along the y-axis with population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to position bars, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render axes and rectangles. Data is loaded via `d3.csv` from a GitHub gist, formatted with `d3.format`, and styled with green fills and blue tick lines.

Lleelakrishnadivi7@gmail.com

93% match