Activity6_Task1_Tutorial_Alt

100%

Activity6_Task1_Tutorial_Alt

✓ Published0🌍 Public

Last edited Mar 28, 2025

Created on Mar 28, 2025

This horizontal bar chart displays the top 30 countries by 2020 population, using green bars to compare values across a blue-ticked axis. The visualization loads CSV data from a GitHub gist, parses the population column, and renders an SVG using D3 v7's `scaleLinear`, `scaleBand`, and `d3.axisBottom`/`axisLeft`. Custom ES6 modules (`Marks.js`, `AxisBottom.js`, `AxisLeft.js`) encapsulate the bar drawing and axis formatting, with tick labels formatted in compact notation (e.g., "1.2B").

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG (pinned at v6, since this runtime environment only supports UMD, and in v7 D3 dropped UMD support)
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Taskl 1

A horizontal bar chart displays the top 30 countries by population in 2020, using light green bars ordered alphabetically by country name. The visualization employs D3.js v7 with SVG rendering, using `d3.scaleLinear` and `d3.scaleBand` for positioning, along with `d3.axisBottom` and `d3.axisLeft` for axes. Population values are formatted as billions on the x-axis, while the data originates from a CSV file hosted on GitHub, fetched asynchronously via `d3.csv`.

Nnavyabade05@gmail.com

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

90% match

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of the top 30 countries in 2020, using a linear scale for population values and a band scale for country names. Each bar is rendered as an SVG rectangle with a lightgreen fill, while the axes include formatted tick labels that abbreviate millions as "M" and billions as "B". The visualization loads data from a remote CSV file using `d3.csv`, and constructs the chart with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` within a 900x500 SVG canvas.

MMeghana Sadhu

90% match

Loading thumbnail…

Fork of Activity6Task1T1

This horizontal bar chart displays the top 30 countries by population in 2020, with each bar’s length encoded by population value and colored by a pastel ordinal scale. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.axisBottom`/`d3.axisLeft` to generate tick marks. Data loads asynchronously via `d3.csv` from a GitHub Gist, and bars are drawn as SVG rectangles with opacity, while axis labels and tick styling are applied through CSS.

Mmaheshsachin1234@gmail.com

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

89% match

Loading thumbnail…

Activity6_Task 1.2

This example displays a horizontal bar chart comparing the 2010 populations of 20 countries. The chart uses a linear scale for population on the x-axis and a band scale for countries on the y-axis, with each bar rendered as a light green rectangle. Built with D3 v7, the visualization renders as SVG and explicitly constructs axes and marks through modular functions. The left axis lists country names, while the bottom axis formats population values in billions using a tick formatter. Data is loaded asynchronously from a CSV URL via `d3.csv`.

Mmaheshsachin1234@gmail.com

89% match

Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, using a light green fill and blue tick marks. Population values are formatted with SI prefixes, converting "G" to "B" for billions. The visualization is built with React and D3 v5, loading CSV data via `d3.csv` and rendering SVG bars using `scaleBand` and `scaleLinear`. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders rectangles with tooltip titles.

VVarshith Peddineni

89% match

Loading thumbnail…

Activity6_Tutorial_1

A horizontal bar chart displays population figures for the top 30 countries in 2020, sourced from a CSV hosted on GitHub. The chart encodes population on a linear x-axis and country names on a categorical y-axis using colored bars. The visualization is built with D3 v7, using `d3.scaleLinear`, `d3.scaleBand`, and SVG rendering. Axis labels are added manually; the x-axis uses a custom tick format to display large numbers in billions. The rendering pipeline fetches data via `d3.csv`, selects the top 30 rows, and draws the marks with `Marks.js`.

Llokasaivenkatatammineedi@my.unt.edu

89% match