Skip to main content
SimilarExport ZIP
100%

Activity 8 - Q2.3

✓ Published0🌍 Public
SSamir Tarda
Last edited Apr 9, 2024
Created on Apr 9, 2024
Forked from Hello VizHub

This stacked bar chart visualizes "Food Nutritional Ratings" across seven food groups (banana, poacee, sorgho, carot, apple, mango, olive, ananas) using data from a local CSV file. It renders in SVG with D3 v7, using `d3.csv` to load data, `d3.stack` to create series, and `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color encoding. The chart includes axis labels, a legend, and a hidden tooltip element.

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-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_Question 3

This stacked bar chart visualizes the distribution of fruit ratings across six categories, from “below 4.0” to “above 8.0.” Each horizontal bar represents a fruit, with segments colored by rating category and proportional widths indicating percentages. Built with D3 v7, the example uses `d3.stack()` for data transformation, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. It loads CSV data from a local file, renders SVG, and adds interactive tooltips on mouseover, styled with CSS.

Kkartheekgrpt@gmail.com
82% match
Loading thumbnail…

activity8-task2

A stacked bar chart displays cereal ratings by ingredient percentage, with each bar segmented into sugars, vitamins, and rating contributions. The chart uses D3 v7's `stack`, `scaleLinear`, `scaleBand`, and `axisBottom` APIs to construct the SVG visualization. Hover interactions reveal precise percentages via a tooltip. The categorical data comes from a CSV file listing cereal names and their nutritional values.

Bbobbymeyermsis@gmail.com
81% match
Loading thumbnail…

activity6_Task-2

This stacked bar chart displays the nutritional composition of ten common foods, breaking down proportions of fiber, protein, fat, carbs, and vitamins along a horizontal percentage axis. Hovering over any segment reveals an interactive tooltip showing the exact percentage value. The visualization uses d3.stack() to generate layered bars, with d3.scaleBand and d3.scaleLinear handling positioning, while d3.scaleOrdinal assigns distinct colors to each nutrient category. Data comes from a local CSV file, rendered as SVG elements with mouseover and mouseout events driving the tooltip behavior.

Ggolisanthoshi2000@gmail.com
81% match
Loading thumbnail…

Activity-6 Question-2

This stacked bar chart displays the distribution of vegetable ratings across six categories, from “below 4.0” to “above 8.0,” using percentage values loaded from a CSV file. The visualization uses d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to render SVG bars, with a tooltip on mouseover showing the exact percentage for each rating segment. Color-coded segments represent each rating range, and axes are labeled with a custom title and percentage axis.

Ssumanthpenna0221@gmail.com
81% 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
81% 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
81% match
Loading thumbnail…

Activity6_Task2 Question 2

This stacked bar chart visualizes the macronutrient breakdown—carbohydrates, fats, and proteins—across six food categories using data from a local CSV file. The chart uses `d3.stack()` to generate stacked series and `d3.scaleOrdinal` for color mapping, with bars rendered as SVG rectangles. Axes are built with `d3.axisBottom` and `d3.axisLeft`, while a legend is manually appended as colored rectangles and text labels. The visualization highlights proportional differences in nutrient composition, such as fruits being nearly all carbohydrates.

Vvemulasai306@gmail.com
81% match