Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
PPradhyumna Poralla
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, with green bars arranged in descending order by population. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` managing the axis scales and `csv` loading the dataset from a GitHub-hosted CSV file. Interactive tooltips appear on hover, displaying each value formatted in billions with D3’s `format` function.

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…

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
95% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000. The bars are rendered as SVG rectangles, with the x-axis using a linear scale for population values and the y-axis using a band scale for country names. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the marks, and custom `AxisBottom` and `AxisLeft` components to draw the axes and tick labels. Data is loaded from a remote CSV file using D3’s `csv` function, and the population values are formatted using D3’s `format` with a `.2s` abbreviation that converts gigabytes to billions.

MMallikarjun Narra
94% match
Loading thumbnail…

activity 6_Task 1 Q2

This example shows a horizontal bar chart ranking the populations of ten countries for the year 2000, with a green fill for each bar. Built with React and D3 v5, the visualization uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while data is loaded from a remote CSV via `d3.csv`. The SVG rendering includes custom axes, tick formatting that abbreviates large numbers (e.g., "1.2B"), and a tooltip on each bar showing the formatted population value.

Kkeerthanachinthalapally@gmail.com
94% match
Loading thumbnail…

activity6_Task1

This visualization displays a horizontal bar chart comparing the populations of ten countries for the year 2000, sourced from a CSV file loaded via d3.csv. It uses React with d3.v5, rendering SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. A custom d3.format with the '.2s' specifier converts values to billions, and each bar includes an SVG title element for tooltips. Axes are built with tick components that generate lines and text labels.

Ssudheervnarasimha1@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of twenty countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered as marks. Data is loaded from a CSV file using `d3.csv` and formatted with D3's `format` function to display values in billions. Axis components handle tick generation and titles, while hover tooltips reveal precise population figures.

Mmeghna.reddy700@gmail.com
93% match
Loading thumbnail…

Activity8-Task1

This horizontal bar chart displays the population of ten countries in the year 2000, using a green bar for each nation with a tooltip showing the exact value. The visualization is built with React and D3 v5, employing a `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rendering for all marks. Population data is loaded from a CSV file and formatted using D3’s `format` function, converting values from millions to billions with a custom tick label. Axis components are custom React functions that generate tick marks and labels.

Ssirichandana017@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart of population data for 20 countries in 2010, with countries listed along the y-axis and population values along the x-axis. The visualization uses React components to render SVG elements, with D3’s scaleBand and scaleLinear mapping data to positions and widths. The code imports csv from d3 to load the dataset from a GitHub gist, while AxisBottom and AxisLeft components generate tick marks and labels. Bars are drawn as SVG rectangles with a light green fill, and hovering reveals a tooltip with formatted population values.

Kkeerthanachinthalapally@gmail.com
93% match
Loading thumbnail…

Activity 7 - Task 1

This visualization shows a horizontal bar chart comparing the populations of ten countries in 2010, using green bars sorted by country name on the y-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for bars. CSV data is loaded via `useData` with `d3.csv`, while custom `AxisBottom` and `AxisLeft` components render ticks and labels. Population values are formatted with `d3.format` and tooltips appear on hover via SVG `title` elements.

VVinay Vemuri
93% match