Activity 8_task2

100%

Activity 8_task2

✓ Published0🌍 Public

Last edited Apr 13, 2024

Created on Apr 13, 2024

A 100% stacked horizontal bar chart shows the proportion of six food categories (Fruit, Vegetables, Meat, Dairy, Grains, Snacks) receiving ratings from "Below 4" to "Above 8" on a scale of 0 to 1. The visualization uses D3.js v7 with an SVG renderer, employing d3.stack() with keys for the rating columns and d3.scaleBand() for category placement. Tooltips display the exact percentage for each category-rating segment, while d3.axisBottom and a custom legend annotate the chart.

AI-generated description

Food items proportion

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6_Task2

This stacked horizontal bar chart displays the proportion of six food categories (Fruit, Vegetables, Meat, Dairy, Grains, Snacks) across rating bands from "Below 4" to "Above 8." Each category is a row of stacked colored segments, where segment length represents the percentage of ratings in that band. The visualization uses d3.stack() to compute cumulative values and d3.scaleOrdinal() for categorical colors. It renders via SVG with d3.axisBottom and d3.axisLeft, and includes interactive tooltips on mouseover showing exact percentage values. Data comes from a CSV file with pre-computed proportions.

Sshivakumarganji@my.unt.edu

92% match

Loading thumbnail…

Fork of Fork of Activity6_Task2

This horizontal stacked bar chart shows the proportion of ratings (from "Below 4" to "Above 8") for six food categories (Fruit, Vegetables, etc.), with each bar’s segments representing the percentage of ratings in that range. The chart uses `d3.stack()` to create the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the x-axis. Hovering over a segment reveals a tooltip showing the exact percentage for that rating, calculated from the provided data. The visualization is rendered as SVG using D3 v7, with colors assigned via `d3.scaleOrdinal`.

Sshivakumarganji@my.unt.edu

90% match

Loading thumbnail…

Activity 6 Question 2

A horizontal stacked bar chart shows the proportion of ratings (Below 4 through Above 8) for six food categories, with each bar segmented by rating level and colored by category. The visualization uses D3 v7 with an SVG renderer and d3.stack to compute stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Tooltips display exact percentages on mouseover, and a legend identifies each rating color. Data comes from a CSV file containing proportional values for fruit, vegetables, meat, dairy, grains, and snacks.

Nnikhilapogula@my.unt.edu

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

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

89% match

Loading thumbnail…

Activity6_Task2.1

This example shows a stacked horizontal bar chart comparing the percentage distribution of vegetable ratings across six categories, from “below 4.0” to “above 8.0.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, with `d3.scaleOrdinal()` for color mapping and `d3.scaleBand()` for the vegetable categories. Each bar segment displays a tooltip on mouseover, showing the exact rating percentage. The chart loads data from a CSV file and renders as SVG, with axes and labels styled via external CSS.

Ssumanthnaidu213@gmail.com

88% match

Loading thumbnail…

Activity6_Question2

This visualization shows how different food categories—fruit, vegetables, meat, dairy, grains, and snacks—are distributed across six rating bands, from below 4 to above 8, as stacked horizontal bars representing proportions that sum to 100%. Each segment’s width encodes the percentage of ratings in that band, with colors distinguishing rating levels and a tooltip revealing exact percentages on hover. The chart loads data from a CSV file and uses d3.stack() for stacking, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom and d3.axisLeft for axes. An ordinal color scale maps rating keys to a fixed palette, and mouse events update tooltip content dynamically.

SSiddhartha Alwala

88% match

Loading thumbnail…

task 8 question 2.2

A stacked horizontal bar chart shows the proportion of ratings (below 4, 4-5, 5-6, 6-7, 7-8, above 8) for six food categories, with each bar segmented by rating range. The visualization uses D3.js v7 with SVG rendering, employing d3.stack() to aggregate the data, d3.scaleBand() for the category axis, d3.scaleLinear() for the percentage axis, and d3.scaleOrdinal() for color encoding. Interactive tooltips display the exact percentage of each rating segment on hover, using event listeners and d3.format() to present values. The data is loaded from a CSV file containing pre-computed proportions.

Vvchittimadha@gmail.com

88% match