Skip to main content
SimilarExport ZIP
100%

Fork of activity 6_Question 1A

✓ Published1🌍 Public
Vvullihanumantharao@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from activity 6_Task 1

This example shows a horizontal bar chart ranking population figures for ten countries in the year 2000, using a CSV dataset fetched from GitHub. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) to map country names and population values to screen coordinates, while React components (`AxisBottom`, `AxisLeft`, `Marks`) render the SVG axes and bars. Population values are formatted with `format('.2s')` to display compact tick labels like “1.2B,” and native SVG `<title>` elements provide hover tooltips with the same formatted values.

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 Activity_8_Question-1.1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000. The chart uses D3 scales (scaleBand and scaleLinear) to position bars and axes, with React components handling the SVG rendering. Data is loaded from a remote CSV file via d3.csv, and tooltips display formatted population values using d3.format.

Kkesava
94% match
Loading thumbnail…

Fork of Activity 6_Question1_task1

This interactive bar chart displays the 2000 population figures for ten countries, using a horizontal layout with blue tick lines and green bars. Built with React and D3 v5, it loads CSV data from a GitHub repository and renders the chart as SVG. The visualization uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components handling the drawing. Native SVG `<title>` elements provide tooltips, while tick formatting converts raw numbers into abbreviated units like "B" for billions.

Jjampani921@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_Question 2

This example presents a horizontal bar chart of population figures for 20 countries in 2020, arranged from top to bottom by country name. The chart uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning bars and `format` to abbreviate axis tick labels. Data is loaded from a remote CSV using D3’s `csv` function, with population values computed by multiplying the 2010 column by 1000. Bars include a native SVG `<title>` tooltip showing the formatted population value.

HHarshita Vairagade
94% match
Loading thumbnail…

Fork of Activity 6_Question 1

This visualization shows the top 10 countries by population in the year 2000 as horizontal bars, with country names on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the marks. The SVG rectangles render the data, which is loaded via `csv` from a GitHub-hosted dataset, and tooltips display formatted population values using D3’s `format`. The custom `AxisBottom` and `AxisLeft` components generate the tick marks and labels.

Aanusha.chilkamarri26@gmail.com
93% match
Loading thumbnail…

Fork of Activity 6_Q1

This example displays a horizontal bar chart of the top ten countries by population in the year 2000, with bars sized proportionally to population values. It uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning. The `csv` loader fetches data from a GitHub-hosted CSV file, and `format('.2s')` converts population numbers into abbreviated labels like “1.2B”. Native SVG `<title>` elements provide hover tooltips, while axis ticks and labels are generated through custom React components.

KKarnam Abinay Goud
93% match
Loading thumbnail…

Fork of Fork of Activity 6_Question 1

A horizontal bar chart displays the top 10 countries by population in the year 2000, using a green fill for each bar. The chart is built with React and D3 v5, with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a CSV file hosted on GitHub, formatted with D3's `format('.2s')` to show values in billions, and tooltips expose exact population figures. The SVG is rendered with reusable components for the axes and marks.

Aanusha.chilkamarri26@gmail.com
93% match
Loading thumbnail…

Fork of Activity7question1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with bars encoded by a d3.scaleLinear x-axis and a d3.scaleBand y-axis. The chart uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with tick marks styled in blue and bars filled in light green. Data is loaded asynchronously via d3.csv from a remote GitHub dataset, and the population values are formatted using d3.format to display billions with a "B" suffix.

Vvaishnavi6gan@gmail.com
93% match
Loading thumbnail…

Fork of Activity7question1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with bars encoded by a d3.scaleLinear x-axis and a d3.scaleBand y-axis. The chart uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with tick marks styled in blue and bars filled in light green. Data is loaded asynchronously via d3.csv from a remote GitHub dataset, and the population values are formatted using d3.format to display billions with a "B" suffix.

Vvaishnavi6gan@gmail.com
93% match