Skip to main content
SimilarExport ZIP
100%

Act 6.2

✓ Published0🌍 Public
VVenkataSatyaRamKamini@my.unt.edu
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from 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.

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 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.

VVenkataSatyaRamKamini@my.unt.edu
94% match
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
93% 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
89% 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
87% 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
86% 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
86% 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
85% match
Loading thumbnail…

GDP

This visualization displays GDP values by country as horizontal bars. Built with D3 v7, it loads CSV data from a GitHub repository using `d3.csv`, then maps country names to the x-axis and GDP values to the y-axis with linear and band scales. Bars change color on hover, and a tooltip shows the country name and GDP value. The SVG chart is rendered with rotated x-axis labels for readability, with axes styled via CSS classes.

Aadithiarikatla@gmail.com
84% match