Activity6_Question_4

100%

Activity6_Question_4

✓ Published0🌍 Public

Last edited Apr 6, 2024

Created on Apr 6, 2024

This bubble chart compares the fiber and protein content of different foods, with each bubble's size representing serving size and color indicating the food group. The visualization directly maps Fiber intake on the x-axis and Protein on the y-axis, using `d3.scaleLinear` for positions and bubble radius, and `d3.scaleOrdinal` for categorical coloring. Interactive tooltips, powered by D3’s `.on('mouseover')` and a `.transition()`, display exact values. The chart is rendered as SVG via `d3.select('#my_dataviz').append('svg')`, with data loaded from a CSV using `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes the nutritional content of six fruits, plotting calories on the x-axis, sugar content on the y-axis, and using bubble area to represent fruit weight. The chart includes labeled axes, a title, and a legend showing weight values for reference. Built with D3 v7 and SVG, it uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.axisBottom`/`d3.axisLeft` to render the visualization. Data is loaded from a local CSV file, and the chart is styled with a bordered, rounded background.

KKhushi Desai

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

76% match

Loading thumbnail…

Activity6_Question4

This example shows a bubble chart comparing beverage manufacturers by plotting glucose levels on the x-axis and ratings on the y-axis, with bubble size encoding calorie content and color distinguishing maker categories. The visualization uses d3.csv to load tabular data and d3.scaleLinear for the x, y, and bubble radius scales, while d3.scaleOrdinal assigns distinct colors to manufacturers. SVG circles are rendered with d3.selectAll and .join('circle'), and an interactive tooltip appears on mouseover using D3’s event handling. The chart includes labeled axes, a title, and legend ranges for the scales.

SSiddhartha Alwala

76% match

Loading thumbnail…

Fork of Activity6_Question 4

This bubble chart compares beverage manufacturers across glucose levels (x-axis) and ratings (y-axis), with bubble size encoding calorie content and color distinguishing seven brand groups. The chart includes interactive tooltips on hover, displaying calorie and glucose values for each data point. Built with D3 v7, it uses SVG rendering and animation, with scales for positioning, sizing, and color mapping. The visualization also presents separate legends for bubble size (calorie ranges) and categorical colors, drawing from a local CSV data file. Data points are styled with red strokes and 70% opacity for visual clarity.

Kkondaveeti.bhargavi7780@gmail.com

76% match

Loading thumbnail…

Activity_6-Task-4-Q-9

This bubble chart visualizes the nutritional profiles of ten common snacks, plotting sugar content on the x-axis, calories on the y-axis, and encoding fat content through bubble radius. The SVG visualization uses D3.js v7 with `d3.scaleLinear` for axes and bubble sizing, plus `d3.scaleOrdinal` with `schemeCategory10` for color-coded snack categories. Interactive tooltips appear on mouseover, displaying each snack’s name, calories, and sugar content. Static labels identify each bubble, with data loaded from a local CSV file containing snack nutrition metrics.

Kkrishna444battula@gmail.com

76% match

Loading thumbnail…

Activity 6 Question 4

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and ratings on the y-axis, with bubble size encoding calories and color distinguishing brand names. Built with D3 v7, the SVG visualization includes hover tooltips showing calorie and glucose values, plus legends for bubble size and color categories. The chart reads from an external CSV file and animates interactive mouseover transitions.

Jjaswanthreddy2000@gmail.com

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

76% match