Skip to main content
SimilarExport ZIP
100%

Act 6.2

✓ Published1🌍 Public
VVenkataSatyaRamKamini@my.unt.edu
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Hello VizHub

This stacked bar chart displays the percentage distribution of GDP growth across six categories for 14 countries, with each bar segmented by growth range. The visualization uses d3.stack() to process the CSV data and d3.scaleOrdinal() for coloring. Hovering over a segment triggers a tooltip showing the precise percentage, while the y-axis uses d3.scaleBand() for country labels. The SVG rendering includes custom axes and a color legend, with the code loading D3 v7 via UNPKG.

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…

Act 6.2

This stacked bar chart displays GDP growth rate distributions across six countries, with each bar segmented into five growth-range categories using distinct colors. The visualization uses d3.stack() to process the CSV data and d3.scaleBand() for country positioning. Tooltips reveal exact percentages on mouseover via event handlers. The SVG rendering employs d3.axisBottom with gridlines, custom color palettes, and d3.format() for numeric precision.

VVenkataSatyaRamKamini@my.unt.edu
97% match
Loading thumbnail…

Act 6.2

A stacked horizontal bar chart compares GDP growth distributions across fourteen countries, with each bar divided into five percentage-range categories. Built with D3 v7, the visualization maps country names to the y-axis using `d3.scaleBand`, GDP percentage ranges to x-axis positions via `d3.scaleLinear`, and color-codes segments by category using `d3.scaleOrdinal`. Data from `data.csv` is loaded and transformed through `d3.stack`, while interactive hover effects display precise GDP percentage values via a tooltip. The SVG output includes labeled axes and a legend, with styling provided by external fonts and CSS.

VVenkataSatyaRamKamini@my.unt.edu
94% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes GDP growth rates across six countries, segmented into five ranges from “below 6.0” to “above 10.5.” Each bar represents a country, with colored segments proportional to the share of growth in each range. The visualization uses D3 v7’s `d3.stack()` to aggregate the data, `d3.scaleBand()` for the country axis, and `d3.scaleLinear()` for the value axis. Hovering a segment reveals its exact percentage via a custom tooltip, while the SVG rendering and ordinal color scale highlight category differences.

Vvidiyalasahithi1999@gmail.com
90% match
Loading thumbnail…

activity6 task 2

This visualization shows the distribution of GDP growth rates across six countries, with each country’s values broken into five rate categories using a stacked horizontal bar chart. The chart uses a linear x-axis for percentages and a banded y-axis for countries, with colored segments representing each growth-rate range. Built with D3 v7, it loads CSV data via `d3.csv`, applies `d3.stack` for stacking, and uses `d3.scaleOrdinal` for color mapping. Interactive tooltips display exact percentages on mouseover using D3 event handlers.

Ssiri2001j@gmail.com
89% match
Loading thumbnail…

activity 6 task2

This visualization shows the GDP growth rates of six countries, broken down into five distinct growth-rate categories. The chart uses a stacked horizontal bar layout, with each bar representing a country and segmented by its growth-rate proportions. The code uses D3 v7 to create the SVG visualization, employing `d3.stack()` to generate the stacked data structure, `d3.scaleBand()` for the country axis, and `d3.scaleLinear()` for the growth-rate scale. Interactive tooltips display the exact percentage for each segment on mouseover, using D3 event handlers and HTML div elements.

Bbrahmateja.edu2023@gmail.com
88% match
Loading thumbnail…

Fork of Activity6_task2

This stacked bar chart displays the GDP growth rates for six countries across five rate categories, from below 6.0 to above 10.5. It uses d3.stack to create the stacked series and d3.scaleOrdinal for color encoding. The d3.axisBottom and d3.axisLeft render the scales, while mouse events update a tooltip showing the exact percentage for each segment.

Vvidiyalasahithi1999@gmail.com
87% match
Loading thumbnail…

Activity 6.task2

This visualization shows the distribution of GDP growth rates across six countries, with each horizontal bar broken into stacked segments representing five growth-rate categories. The code uses D3 v7’s `d3.stack()`, `d3.scaleOrdinal()`, `d3.scaleBand()`, and `d3.scaleLinear()` to render the chart as SVG. Hovering over a segment triggers a tooltip displaying the exact percentage for that country and category. Data is loaded from a CSV file with country and growth-rate columns.

Ssanavenkatasurendrareddy@gmail.com
87% match
Loading thumbnail…

act 6.4

A bubble chart displays economic indicators for 15 countries, plotting GDP growth against investment as a percentage of GDP, with circle size encoding inflation rates. Built with D3.js, the visualization loads data from a CSV file using `d3.csv`, then uses `scaleLinear` for the x, y, and radius scales. Circles are appended to an SVG container with country labels positioned above each point, styled with steelblue fill and opacity.

VVenkataSatyaRamKamini@my.unt.edu
81% match