Activity 7.1 Q2

100%

Activity 7.1 Q2

✓ Published0🌍 Public

Last edited Apr 6, 2025

Created on Apr 6, 2025

This visualization shows the average caloric value of foods grouped into three categories—Low, Medium, and High—using an area chart with a monotone curve. The code loads a CSV dataset from GitHub, categorizes each food by its caloric value, and computes the mean per group. It uses d3.group, d3.mean, d3.scaleBand, d3.scaleLinear, and d3.area to render the SVG path, with axes and labels added via d3.axisBottom and d3.axisLeft.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity_6_Task_2_1

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.

LLarry Johnson

79% match

Loading thumbnail…

Activity 6-Question 4

This bubble chart shows the correlation between average weight, average sugar, and calories per serving for various food items, with each circle's x-position mapping to weight, y-position to sugar, and radius to calorie count. A legend on the right decodes the circle sizes for calorie values, while a categorical color scale distinguishes the 20 food items. Interactive tooltips display exact values for each food on hover. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for chart axes. The data, loaded from `fooditems.csv`, is rendered as SVG circles with a black tooltip that follows the mouse.

Ttallapanenisahithi@gmail.com

79% match

Loading thumbnail…

Assignment_2_2

This area chart displays the caloric content of various cereals, with each cereal name on the x-axis and its calorie value on the y-axis. Using D3 v7, the visualization employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric axis, and `d3.area` to generate the filled path. The SVG rendering includes rotated axis labels, data point labels, and a legend, with the data loaded from a remote CSV source via `d3.csv`. The chart appears within a styled container with a white background and subtle shadow.

MMadhusudhan Reddy Kuppam

78% match

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the correlation between average sugar, weight, and calories across various food items from a CSV dataset. Each circle’s x-position maps to weight, y-position to sugar, and radius to calorie content, with color distinguishing food type via the d3.scaleOrdinal and schemeCategory10 palette. The chart includes interactive tooltips on mouseover, plus legends for both calorie radius and food categories. Built with D3 v7, it renders as SVG and uses d3.axisBottom and d3.axisLeft for scales.

Yyadlapallisaisathvik@gmail.com

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

78% match

Loading thumbnail…

Activity 6-task 4

This bubble chart displays the correlation between average sugar, average weight, and calories per serving for various food items. Circles are positioned by weight and sugar on the x and y axes, while the circle radius encodes calorie count, with a legend showing calorie values. A hover tooltip reveals exact food item, weight, sugar, and calorie details. Built with D3 v7, it loads fooditems.csv and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.schemeCategory10`, and a simple SVG animation on hover to change opacity and stroke.

Ttallapanenisahithi@gmail.com

77% match

Loading thumbnail…

activity 7.1 question 2

This example shows an area chart of average clothing weight by size. The visualization loads CSV data from a GitHub gist, groups the records by clothing size, and computes the mean weight for each category before drawing the chart using D3 v7. The SVG rendering uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and a `d3.area` generator to create the filled path. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart is styled with steelblue fill.

Ggketan456@gmail.com

77% match

Loading thumbnail…

Activity7_Q2

This area chart displays average temperature recordings over time, with a smooth curve drawn through the data points and a filled region beneath. The visualization uses D3 v5’s `area` and `line` generators with `curveBasis` interpolation, mapping years to a `scaleTime` x-axis and temperatures to a `scaleLinear` y-axis, both with gridlines. The code loads CSV data, parses dates with `d3.timeParse`, and renders axes using `axisBottom` and `axisLeft`. Data comes from a GitHub gist, and the SVG output includes styled gridlines and axis labels.

SSahithi.R

76% match