Skip to main content
SimilarExport ZIP
100%

Activity6_Task1.2

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

A horizontal bar chart displays the population of twenty countries in 2010, ranked from top to bottom. Green bars extend from the left axis to the right, with a blue tick line marking the bottom axis. Built with React and D3 v5, the visualization uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and loads CSV data from a GitHub repository. Tooltips reveal the population value on hover, formatted with abbreviations like "B" for billions.

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…

Activity8-Task1

This horizontal bar chart displays the population of the top 20 countries in 2010, using green bars sorted by country name. Built with React and rendered as SVG, the visualization leverages D3 v5 functions including `scaleBand` and `scaleLinear` for axes, with CSV data loaded via `d3.csv`. Tooltips formatted with `d3.format` show abbreviated population values on hover, while custom Axis components handle tick rendering.

Ssirichandana017@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1.1

A horizontal bar chart displays the population of ten countries in the year 2000, sorted by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Green bars include tooltips, and axes are annotated with a custom formatter that converts SI units like "G" to "B" for billions.

Jjtulasi05@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of 20 countries in 2010, ordered by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to map the data from a remote CSV file, while `d3.format` converts tick labels to abbreviated "B" for billions. The SVG rendering includes custom axis components and rectangle marks with tooltips showing each value, styled with green fills and blue tick lines.

Jjaswanthreddy2715@gmail.com
94% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.

Kkrishnavisheshkatta@my.unt.edu
93% match
Loading thumbnail…

ACTIVITY6TASK-1

This visualization displays a horizontal bar chart ranking the populations of 20 countries for 2010, using green bars labeled along the left axis with a formatted population scale on the bottom. The React application loads data from a CSV file via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axes, rendered as SVG rectangles. Tooltips, provided through native SVG `<title>` elements, show the exact population in billions using d3.format.

HHanuReddy
93% match
Loading thumbnail…

Activity-6 Task1

A horizontal bar chart displays the 2020 population estimates for the top 30 countries. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist. Bars are colored light green, with blue axis ticks and a labeled population axis.

Hharshaps15@gmail.com
93% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
93% match
Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with a green bar for each nation and axis labels formatted in billions. It uses React components to render SVG marks via `scaleBand` and `scaleLinear`, pulling data from a CSV file loaded with `d3.csv`. The chart includes a custom axis, a bottom label, and a tooltip showing the population value.

HHarshita Vairagade
93% match