Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Task-7

✓ Published1🌍 Public
JJames Cruz
Last edited Apr 15, 2024
Created on Apr 14, 2024
Forked from Fork of Task-7

This example presents a horizontal bar chart of 2020 population data for the top 30 countries, sourced from a CSV file. Built with React and D3 v5, it renders vector graphics as SVG elements. The visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The bars are drawn as SVG rectangles, and hovering over each bar reveals a tooltip displaying the population value formatted in billions. The chart's title, "POPULATION-2020", is placed below the x-axis.

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…

Fork of Fork of Fork of Task-7

A horizontal bar chart displays the populations of 30 countries for 2020, sorted by country name. The visualization uses D3 v5 scales and SVG rendering within a React application, with `d3.csv` loading the dataset from a GitHub repository. Population values are transformed from the raw data, and d3's `format` function converts large numbers into abbreviated labels like “B” for billions.

JJames Cruz
94% match
Loading thumbnail…

Fork of Task-7

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, sourced from a CSV file. Built with React and rendered as SVG, it uses D3 v5 APIs like `scaleBand`, `scaleLinear`, and `format` to map data to coordinates and create tick labels. The visualization includes a bottom axis with formatted values and a left axis with country names, with styled tick marks and bars defined in the accompanying HTML.

JJames Cruz
93% match
Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example shows a horizontal bar chart of population totals for 30 countries in 2020. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names to bar positions and population values to bar widths. Axes are generated by custom React components (`AxisBottom`, `AxisLeft`) that call `xScale.ticks()`. Tooltips appear via SVG `<title>` elements, and population data is loaded from a remote CSV using D3’s `csv` function.

Hharsha13638@gmail.com
92% match
Loading thumbnail…

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Vvchittimadha@gmail.com
91% match
Loading thumbnail…

Fork of Fork of Task 8 Q1-2

This bar chart displays the population of 20 countries in 2010, rendered as an SVG using React and D3 v5. The data is loaded from a remote CSV file and visualized with horizontal bars, where country names appear on the y-axis and population values on the x-axis. The chart uses D3's `scaleBand` and `scaleLinear` for axis scaling, and `format` to abbreviate large numbers. Interactive tooltips show the exact population value on hover, while the axis ticks and labels are styled with custom CSS.

Vvchittimadha@gmail.com
91% match
Loading thumbnail…

Fork of activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name along the y-axis. The chart uses React to render SVG marks, with D3 v5’s `scaleBand` and `scaleLinear` to position bars and axes, and `format` to abbreviate population values (e.g., “B” for billions). Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with raw population values multiplied by 1,000. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are built as React components, and each bar includes a native SVG `<title>` tooltip.

Ggouthamigongidi2457@gmail.com
91% match
Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example displays a horizontal bar chart of the 2010 population for about twenty countries, from a CSV file accessed via a URL. Built with React and D3 v5, the SVG visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The marks are rectangles, and the code includes custom components for axes and tooltips, using D3's `format` function to abbreviate population values. The chart is rendered with a green fill for bars, and its styling is defined in the accompanying HTML.

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

Fork of Task8-task1

This bar chart displays the population of countries in 2020, ranked by country name. The visualization renders horizontal bars using React and SVG, with D3 v5's `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. The chart includes custom axis components (`AxisBottom`, `AxisLeft`) and bars (`Marks`) that display tooltips on hover. Data is loaded from a CSV via D3's `csv` function, and the population values are multiplied by 1000 for display. The chart is styled with Poppins typography and uses a green color for the bars.

Sshraehithareddy@gmail.com
91% match