Skip to main content
SimilarExport ZIP
100%

Task8_Tutorial(1.1)

✓ Published1🌍 Public
Jjyothirmai318@gmail.com
Last edited Apr 7, 2024
Created on Apr 7, 2024
Forked from Task8_Task(1)

This example presents a horizontal bar chart ranking the population of ten countries in the year 2000, sourced from a CSV file and rendered with React and SVG. The visualization uses D3 v5 scales and axes, with `scaleBand` for the categorical country labels and `scaleLinear` for the population values. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw the bars and tick marks, and formats tick values using D3’s `format`. Data is fetched with `d3.csv` and loaded asynchronously through a custom `useData` hook, displaying a loading state until ready.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Task 8_Task 1

This example displays a horizontal bar chart of population data for ten countries in the year 2000, using an SVG rendered through React. The visualization imports D3 v5 modules like `scaleBand`, `scaleLinear`, `format`, and `csv` to load the dataset from a GitHub URL and map country names to categorical bands with population values on a linear scale. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while the `Marks` component draws green rectangles with tooltips showing formatted population values, with the bottom axis labeled "POPULATION-2000".

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

Fork of Task8_Tutorial(1.2)

This example shows a horizontal bar chart of the 20 most populous countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scaleBand and scaleLinear for axes and bars. Data is loaded from a CSV via d3.csv, and the code implements custom AxisBottom, AxisLeft, and Marks components to display the chart with blue tick lines and green bars.

Jjyothirmai318@gmail.com
92% match
Loading thumbnail…

task-8(1.2)

This example displays a horizontal bar chart of the top 10 countries by population in 2010, sorted along the y-axis with bars proportional to population values. It uses React with D3 v5’s `scaleBand`, `scaleLinear`, `max`, and `format` APIs to compute scales and tick labels, rendering SVG elements via reusable components like `AxisBottom`, `AxisLeft`, and `Marks`. Data loads asynchronously from a CSV URL using `d3.csv`, and each bar includes a native SVG `<title>` tooltip showing the formatted population.

DDivyaKota2@my.unt.edu
92% match
Loading thumbnail…

Task8_Q1_1

A horizontal bar chart displays the population of ten countries in the year 2000, ranked by country name on the y-axis and population values on the x-axis. The chart uses D3 v5 scales, including `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis, with React components rendering SVG rectangles for each bar. Tooltips show formatted population values using D3’s `format` function, while axis labels and tick marks are built with custom `AxisBottom` and `AxisLeft` components. Data is loaded from a CSV file via `csv` from D3.

Ttarunskuruvadi@gmail.com
92% match
Loading thumbnail…

Task-8(Tutorial 1)

This visualization displays a horizontal bar chart of population figures for 30 countries in 2020, using a custom dataset loaded from a GitHub-hosted CSV file. The React-based example renders with SVG, applying d3’s scaleBand for the categorical y-axis and scaleLinear for the numeric x-axis, with formatted tick labels via the d3.format function. The code demonstrates modular ES6 imports, including local axis and mark components, and applies a Poppins font with blue axis lines and green bars.

Ttallurisaiteja96@gmail.com
91% match
Loading thumbnail…

Task8_Q1

This example displays a horizontal bar chart of the population of ten countries for the year 2000, with bars sorted by country name and a blue axis line. The visualization uses React and D3 v5 to render SVG marks; `d3.scaleBand` and `d3.scaleLinear` map the categorical and quantitative variables, while axes are built from custom modules. Population data is loaded as CSV from a remote repository, with values scaled by a thousand. The chart includes interactivity via native SVG `<title>` tooltips that format tick values with `d3.format`.

LLakshmi Keerthi
91% match
Loading thumbnail…

TASK1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, ranked by country name on the y-axis and population in billions on the x-axis. It renders as an SVG using React components and D3 v5 scales, with d3.scaleBand for bars, d3.scaleLinear for the axis, and d3.format for tick labels (e.g., “1.2B”). Data is loaded via d3.csv from a GitHub-hosted dataset, with hover tooltips displaying formatted population values.

Ssanjanadadi19@gmail.com
91% match
Loading thumbnail…

Task1_activity7

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, using a dataset loaded from a GitHub-hosted CSV file. The bars are rendered as SVG rectangles via React components, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to positions and lengths. Axis components generate ticks and labels, while a `format` function converts numbers into abbreviated units like billions. The code initializes data asynchronously with `useEffect` and `csv`, and applies a custom CSS style for tick lines and bar fills.

Ppavanpkkalyan3@gmail.com
91% match