Skip to main content
SimilarExport ZIP
100%

Assignment_2_2

✓ Published0🌍 Public
MMadhusudhan Reddy Kuppam
Last edited Mar 26, 2025
Created on Mar 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of cereals D3 Scatter Plot

This example visualizes the distribution of calories across different cereal brands using a vertical bar chart. The chart displays each cereal name on the x-axis with calorie values mapped to the y-axis, making it easy to compare relative calorie counts. The visualization is built with D3 v7 and renders as SVG, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`, with each bar's height proportional to the cereal's calorie value.

Ssreeramyamini@gmail.com
81% match
Loading thumbnail…

Assignment 2.3

This interactive scatter plot visualizes cereal data filtered to 100 calories, comparing sodium and sugar content. Each circle represents a cereal, with markers colored by rating value: red for ratings below 40, orange for 40–60, and green for ratings above 60. The visualization loads CSV data via `d3.csv` from a GitHub gist, uses `scaleLinear` for both axes, and renders circles as SVG elements with `d3.select` and `join`. Axis labels are positioned with SVG transforms, and the D3 v6 API is loaded directly from UNPKG.

Ppjdhungana@gmail.com
81% match
Loading thumbnail…

Activity 6_Task 2 Q2

This example visualizes the nutritional breakdown of 80 cereal products as a stacked bar chart. It uses a D3.js v7 SVG rendering with a horizontal layout, showing the contribution of three nutrient categories (calories, protein, fat) per cereal brand, as specified in the data.csv file. The chart employs `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the quantitative x-axis. Interactive tooltips display exact values per category and cereal when hovering over each bar segment, using D3’s event handlers (`mouseover`, `mousemove`, `mouseout`).

Aakankshareddygorla@my.unt.edu
79% match
Loading thumbnail…

Assignment 2.5:Reusable Scatter plot

This example demonstrates a reusable scatter plot that visualizes the nutritional properties of cereals, with the x-axis cycling through cups, sugars, sodium, and carbohydrates over time. The plot encodes three variables simultaneously using both the position of the circles and their horizontal and vertical radii, while color indicates the cereal's rating (red for low, orange for average, green for good). The visualization leverages D3 v6.7.0 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` for rendering, and it smoothly animates between different x-axis variables using `setInterval`. The code loads data from a CSV file and renders the interactive chart as SVG within a full-window canvas.

Ppjdhungana@gmail.com
79% match
Loading thumbnail…

Untitled

This example displays a scatter plot of breakfast cereals, mapping calories on the x-axis against protein content on the y-axis, with each point colored by manufacturer. It uses d3.scale.linear for axis scaling, d3.svg.axis for axes, and d3.scale.category10 for categorical color assignment. A custom HTML tooltip appears on mouseover, showing the cereal name and its values. The data is loaded from a CSV file using d3.csv.

Vvenkatajayanth03
79% match
Loading thumbnail…

Cereal Dataset

This visualization presents a summary of cereal nutritional data loaded from a local CSV file, including row and column counts, a preview table of the first ten entries, and a bar chart ranking the top ten cereals by rating. Built with D3 v7, the chart uses `d3.scaleBand` and `d3.scaleLinear` to map cereal names and ratings to SVG rectangles, with axes and hover tooltips via appended `title` elements. The page also incorporates simple decorative SVG shapes depicting a cereal bowl and a phone.

Rrajivkarri98@gmail.com
78% match
Loading thumbnail…

Activity6_Task3

A scatter plot of cereal nutritional data maps calories on the x-axis against protein content on the y-axis. Each dot represents a cereal type, colored by manufacturer, with a tooltip showing the cereal name and values on hover. The visualization uses D3 v3 scales, axes, and SVG circles, with data loaded from a local CSV file.

Hhemanthdummy999@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays the calorie content of 77 cereals from a CSV file, with each bar labeled by cereal name and rotated for readability. The visualization uses D3.js v7 to load data via `d3.csv`, scales the y-axis with `d3.scaleLinear`, and renders bars with `d3.selectAll` and `.enter()`. The x-axis is created with `d3.axisBottom`, featuring custom tick formatting that truncates long names. Interactive hover effects, defined in CSS, change bar color to orange. The chart includes axis labels for "Cereal Name" and "Calories," with a clean SVG layout and fixed margins.

Rrajivkarri98@gmail.com
78% match