Activity6_Task1.2

100%

Activity6_Task1.2

✓ Published0🌍 Public

Last edited Oct 23, 2024

Created on Oct 19, 2024

A horizontal bar chart displays the populations of twenty countries in 2010, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG renders custom `AxisBottom` and `AxisLeft` components, while `Marks` draws rectangles with tooltips formatted using D3's `format` function.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of ten countries in the year 2000, using a d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The React components render SVG rectangles via the reusable Marks, AxisBottom, and AxisLeft modules, with axis ticks styled through CSS. Data is loaded as CSV using d3.csv, formatted with d3.format, and tooltips are provided by SVG title elements.

Sshanmukhivasa@my.unt.edu

94% 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

94% match

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of 20 countries for 2010, sourced from a CSV file, with bars sorted by country name. The chart uses D3's `scaleBand` and `scaleLinear` to map data to SVG coordinates, rendered as `rect` elements within a React component. Axes are drawn with custom components, and tick labels are formatted using D3's `format` function to abbreviate large numbers.

HHari Kiran

94% match

Loading thumbnail…

Activity6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. SVG rectangles render the bars, with tooltips showing formatted values via `format('.2s')`. The chart includes custom `AxisBottom` and `AxisLeft` components for ticks and labels.

VVrushikaKanaparthy@my.unt.edu

93% match

Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name along the y-axis. Each bar’s length encodes population value, with a formatted tick label converting SI units (e.g., "B" for billions) for readability. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, then sliced to the first 20 rows.

Ggsdontineni518@gmail.com

93% match

Loading thumbnail…

Activity 6 Task 1

A horizontal bar chart displays the populations of thirty countries in 2020, sourced from a CSV file. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `Marks` to render SVG rectangles. Axis components generate ticks and labels, while a custom tick formatter converts values to billions. A tooltip is provided via SVG `<title>` elements.

Mmounikakatipally995@gmail.com

93% match

Loading thumbnail…

Activity6_task1.1

This bar chart displays the population of ten countries for the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. Built with React and D3 v5, it employs `d3.scaleBand` and `d3.scaleLinear` to map data, and renders SVG rectangles via the custom `Marks` component. The chart is populated from a CSV file loaded asynchronously using `d3.csv`, with axes drawn by `AxisBottom` and `AxisLeft`.

Yyadlapallisaisathvik@gmail.com

93% match

Loading thumbnail…

Activity6_Task - 1

A horizontal bar chart displays the 2010 populations of 30 countries, ordered by name along the y-axis, with bar lengths proportional to population values on a linear scale. React components render the SVG visualization, while d3 v5 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`, `format`) load data from a GitHub-hosted CSV and compute scales and tick formatting, abbreviating large numbers with SI prefixes. The bars use CSS fill colors, and hover tooltips show formatted values via native SVG `<title>` elements.

NNitish Thotakura

93% match