Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Kkblikitha22@gmail.com
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from Hello VizHub

This example presents a horizontal bar chart visualizing the population of 30 countries for the year 2020. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The data is loaded asynchronously from a CSV file using `d3.csv` and rendered with custom `Marks`, `AxisBottom`, and `AxisLeft` components, which utilize `d3.axisBottom` and `d3.axisLeft` for tick generation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of countries in 2020, sorted by country name, with the x-axis scaled linearly from zero to the maximum population value. The visualization uses D3 v7 to load CSV data, create a band scale for the y-axis and a linear scale for the x-axis, and render SVG rectangles. The bottom axis includes horizontal grid lines via tickSize, and the chart includes axis labels for both dimensions.

Kkblikitha22@gmail.com
93% match
Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, with bars sorted by country name along the y-axis and population values along the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub repository, then renders SVG rectangles with a light green fill. The x-axis uses a linear scale with custom tick formatting to abbreviate large numbers (e.g., 200M, 1.2B), while the y-axis employs a band scale to position the country labels. Axis labels are added via the AxisBottom and AxisLeft components.

Vvenkatdinesh5010@gmail.com
93% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays population estimates for the top 30 countries in 2020, using d3.csv to load a CSV dataset and d3.scaleBand and d3.scaleLinear to map country names and population values. The SVG rendering uses d3.axisBottom and d3.axisLeft for tick marks, and the Marks module appends filled rectangles with steelblue to represent each bar’s length. Axis labels and a title for “POPULATION – 2020” are included.

Cchowdaryhemanth14@gmail.com
92% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with bars sorted by population. It renders as an SVG using React and D3 v5, loading data from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with tooltips formatted using `d3.format`. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the SVG elements.

NNagalakshmi Thota
92% match
Loading thumbnail…

Activity 6_Task 1

This example shows the 2020 populations of 30 countries as a horizontal bar chart. The visualization uses SVG rendering through React, with D3 version 5 APIs including `scaleBand`, `scaleLinear`, and `max` to map values. A `csv` loader fetches data from a remote GitHub-hosted file. Bars are drawn as `<rect>` elements via the custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. Tick labels use the `format` function to abbreviate large numbers.

Kkotagirivarshith2411@gmail.com
92% match
Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. The visualization uses D3.js (v7) and renders through SVG. A linear scale maps population values to bar widths, while a band scale positions countries along the vertical axis. The code explicitly creates light green bars via `Marks.js` and formats the population labels in billions using `d3.format` within `AxisBottom.js`.

MMili Patel
91% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing 2020 populations for up to 30 countries, with each bar labeled by country and sized proportionally to its population. The chart uses an SVG rendering with a green fill for bars and blue tick lines, and hover tooltips formatted with abbreviations like "B" for billions. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist URL. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are custom React components that generate tick lines and rectangular marks, while `format('.2s')` handles tick label abbreviation.

Jjtulasi05@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart ranking the 2020 populations of 30 countries. The visualization uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, rendering the bars as SVG `<rect>` elements. It loads CSV data from a GitHub repository and formats axis tick labels with `d3.format`. The components are built with React, while static axes and marks are defined in separate ES6 modules. A native SVG `<title>` element provides tooltips on hover.

Hhemanthmaddila13@gmail.com
91% match