Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published0🌍 Public
MMannava Priyanka Chowdary
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

A stacked bar plot displays the distribution of three categories—Process, People, and Technology—across five company departments, with horizontal bars scaled by the number of employees. Hovering over a segment highlights it and shows a tooltip with the exact category and count. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to position rectangles within an SVG, while an ordinal color scheme assigns distinct hues. Data is loaded from a local CSV file, and the chart includes labeled axes and a legend.

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…

Activity 6_Q 2.1

This stacked bar plot displays the distribution of People, Process, and Technology scores across five departments, using horizontal bars segmented by category. Built with D3 v7, the visualization employs `d3.stack()` for data transformation, `d3.scaleOrdinal` for color encoding, and SVG rendering. Interactive tooltips reveal exact category counts on hover, while a legend identifies each segment. Data originates from a CSV file containing department-level metrics.

MMannava Priyanka Chowdary
94% match
Loading thumbnail…

Activity 6

This example demonstrates a stacked bar chart that visualizes how three categorical data fields (AM, AZ, FD) contribute to a total for each of five discrete IDs. The chart uses D3.js v7 and SVG rendering, with d3.stack() to process the data into layers, d3.scaleBand() for the x-axis, and d3.scaleLinear() for the y-axis. The bars are colored using d3.schemeCategory10 and drawn with semi-transparent rectangles.

MMannava Priyanka Chowdary
84% match
Loading thumbnail…

Activity6_Ques2

This stacked bar chart compares the percentage distribution of ratings across six categories—Technology, Finance, Healthcare, Education, Sports, and Entertainment—using horizontal bars. Each bar is segmented into five rating bands, from "below 4.0" to "above 9,” with a legend in the right margin. The visualization uses D3 v7's `d3.stack()` to aggregate the data and `d3.scaleOrdinal()` for color mapping. An SVG renders the chart, while mouseover events display a tooltip showing the exact percentage for each segment. The data is loaded from a local CSV file.

Nnithinnc@outlook.com
83% match
Loading thumbnail…

activity-6-a-2

A stacked bar chart shows the distribution of food ratings across five categories, from "Below 5.0" to "Above 8.5," for six food items. Each bar segment’s length encodes the proportion of ratings, with hover interactions displaying exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles, with data loaded from a CSV file and a custom color scale mapping each rating category.

SSathishvepuri143@gmail.com
82% match
Loading thumbnail…

Activity6_Question2

This stacked horizontal bar chart shows the distribution of ratings for six food categories, from "Below 4" to "Above 8," with each bar segment representing the percentage of ratings in that range. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for the y-axis categories. Hovering over a segment highlights it and displays a tooltip with the exact percentage, while the data is loaded from a local CSV file. The SVG rendering includes custom axis labels and a legend.

PPadmajaKodati@my.unt.edu
82% match
Loading thumbnail…

Activity6_Task2

This visualization shows the distribution of employee ratings across six tech job positions, using a horizontal stacked bar chart where each bar represents 100% of responses divided into four rating categories from “Below 5.0” to “Above 8.5.” The chart uses D3 v7 with SVG rendering and loads data from a CSV file containing counts for each position and rating category. Tooltips display the position, rating range, percentage, and count when hovering over segments. Data is transformed from counts to percentages using d3.stack, with scales implemented via d3.scaleLinear and d3.scaleBand, and a custom one-off legend added to the visualization.

Ddineshnimmagadda1@gmail.com
82% match
Loading thumbnail…

activity6_task2

A stacked horizontal bar chart displays customer satisfaction ratings across five product categories, with segments representing the percentage of responses in each rating level from "Excellent" to "Very Poor." The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for product categories, and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. Data comes from a local CSV file loaded asynchronously.

TThai Ha Dang
82% match
Loading thumbnail…

Activity6_2

This stacked horizontal bar chart displays customer satisfaction ratings for six product categories, with segments representing the percentage of ratings falling into five ranges from below 2.0 to above 4.5. The visualization uses D3 v7 to load CSV data and render SVG elements. Categories appear on the y-axis, while a linear x-axis shows the proportion for each rating band. An ordinal color scale distinguishes rating levels, and interactive tooltips display the exact percentage for each segment on hover. The chart includes axis labels, a title, and a legend.

DDee
82% match