Skip to main content
SimilarExport ZIP
100%

Fork of Activity_6_Task_2_1

✓ Published0🌍 Public
LLarry Johnson
Last edited Oct 24, 2024
Created on Oct 24, 2024
Forked from Activity_6_Task_2

A horizontal stacked bar chart shows the caloric distribution percentages across ten food types, with each bar segmented into five calorie bands from "below 2.0" to "above 6.5" calories. The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` to create the stacked segments, with a color scale assigning a distinct hue to each calorie category. Rectangles are positioned via `d3.scaleLinear()` for the x-axis and `d3.scaleBand()` for the y-axis, and interactive mouseover events display precise percentage values in a styled tooltip. Data comes from the included `calories.csv` file, rendered as SVG with custom fonts and axis labels.

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…

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
89% 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
88% 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
87% match
Loading thumbnail…

Fork of task 8 question 2.2

This visualization displays the proportion of ratings (from "Below 4" to "Above 8") for six food categories using stacked horizontal bars. The chart uses D3 v7 to process the CSV data with d3.stack(), maps categories to the y-axis via d3.scaleBand(), and encodes proportions on the x-axis with d3.scaleLinear(). Interactive tooltips, styled with CSS, reveal exact percentages on mouseover. The SVG rendering includes a legend and custom color palette from a d3.scaleOrdinal() scale.

Vvchittimadha@gmail.com
84% match
Loading thumbnail…

Fork of Task 6.2

A stacked bar chart displays the percentage distribution of fruit ratings across five categories, from "Below 1.0" to "Above 4.0," for nine fruit types. The visualization uses d3.stack() to compute stacked series, with d3.scaleOrdinal and a custom color palette mapping each rating category. Rendering as SVG, the chart includes axes via d3.axisBottom and d3.axisLeft, and an interactive tooltip that appears on mouseover via d3.select and event listeners. Data is loaded from a CSV file and formatted using d3.format.

Pperamranji
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
83% match
Loading thumbnail…

Activity 8_task2

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.

Sshivasaikumart@gmail.com
83% match
Loading thumbnail…

Fork of Activity-6 Question-2

This example presents a horizontal stacked bar chart showing the percentage distribution of vegetable ratings across six categories, from "below 4.0" to "above 8.0." The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to construct the layered bars, with `d3.scaleOrdinal()` assigning colors. Mouseover events trigger a custom tooltip displaying the exact percentage for each segment. Data loads from a local CSV file, and the visualization renders as SVG with axes labeled by vegetable type and percentage.

Ssusarlasruthi2000@gmail.com
83% match