Skip to main content
SimilarExport ZIP
100%

Task-8(Tutorial 1)

✓ Published0🌍 Public
Ttallurisaiteja96@gmail.com
Last edited Apr 10, 2024
Created on Apr 8, 2024
Forked from Hello VizHub

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.

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…

TASK8_TUTORIAL1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, rendered with SVG in a React application. D3 v5’s `scaleBand` and `scaleLinear` map country names and population values to the bar positions and lengths, while custom React components draw the axes and marks. The data is loaded as CSV from a GitHub repository, with the population column formatted using D3’s `format` function to appear in billions.

Ttarunskuruvadi@gmail.com
93% match
Loading thumbnail…

Task8Tutorial_1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with bars colored light green and a blue axis line. The React application loads data from a CSV file using D3’s `csv` function, then renders the visualization as SVG. It uses `scaleBand` for the y-axis country categories and `scaleLinear` for the x-axis population values, with a custom tick format that converts large numbers into billions. Tooltips appear on hover via SVG `<title>` elements, and the axis labels are styled with Poppins font.

Mmanohar varma
93% match
Loading thumbnail…

Task8_Tutorial1

A horizontal bar chart displays the 2020 population estimates for 30 countries, sorted by country name along the y-axis. The visualization uses React to render SVG elements, with D3 v5 handling data loading via `csv`, linear and band scales, and axis tick formatting with `format('.2s')`. Population values are converted from the raw CSV data by multiplying the '2020' column by 1000. The chart includes labeled axes, a green bar fill, and tooltips showing formatted population values on hover.

Jjyothirmaijyothi2017@gmail.com
92% match
Loading thumbnail…

Task 8_Tutorial1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with each bar’s length proportional to population and a tooltip displaying the value in billions. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. Data is loaded via `d3.csv` from a GitHub repository, axes are rendered as SVG elements with tick marks, and bars are drawn as `rect` elements using the `Marks` component. The chart includes a labeled x-axis and uses a green fill for all bars.

KKeerthi
92% match
Loading thumbnail…

Task 8_Tutorial1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with each bar’s length proportional to population and a tooltip displaying the value in billions. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. Data is loaded via `d3.csv` from a GitHub repository, axes are rendered as SVG elements with tick marks, and bars are drawn as `rect` elements using the `Marks` component. The chart includes a labeled x-axis and uses a green fill for all bars.

KKeerthi
92% match
Loading thumbnail…

Task8_Tutorial1_HKK

This visualization displays the 2020 population estimates for 30 countries as a horizontal bar chart, with countries sorted along the y-axis and population values on the x-axis. Built with React and D3 v5, it leverages `d3.scaleBand` and `d3.scaleLinear` for positioning, while custom SVG axis components render tick marks and labels. The data is loaded as CSV from GitHub and formatted using D3’s `format` function to abbreviate large numbers.

Hhemanthkakani1999@gmail.com
92% match
Loading thumbnail…

Task8_Tutorial(1.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.

Jjyothirmai318@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart of 2020 population figures for 30 countries, with bars colored light green and a blue axis grid. The chart uses React components to render SVG elements, with D3's `scaleBand` and `scaleLinear` handling the y and x axes respectively. Data loads asynchronously from a GitHub-hosted CSV file via `d3.csv`, and tooltips display formatted population values using `d3.format`. The visualization demonstrates local ES6 module imports and D3 integration within a React framework.

TTarshit Vupperla
91% match