CSCE 5320 HW5

100%

CSCE 5320 HW5 - Cloud Workload Performance

✓ Published0🌍 Public

Last edited Oct 1, 2026

Created on Oct 1, 2026

A scatterplot displays cloud workload performance, plotting monthly cost on the x-axis against throughput on the y-axis. Each circle represents a workload, with its area encoding active user count and its color indicating the cloud provider. The visualization uses d3.csv to load data from a GitHub gist and d3.scaleLinear, d3.scaleOrdinal, and d3.scaleSqrt to map the fields. A summary panel reports row counts, column names, cost range, and mean and median values using d3.mean and d3.median.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CSCE 5320 HW6 - Q1 2D Rival

This scatterplot visualizes the relationship between CPU utilization, throughput, and service latency across multiple cloud providers. Each point uses position on the x- and y-axes to encode CPU percentage and requests per second, while the circle’s area, via `d3.scaleSqrt`, represents latency. Colors, assigned through `d3.scaleOrdinal` and `d3.schemeTableau10`, distinguish providers. Built with D3 v7, the SVG rendering includes axes from `d3.axisBottom` and `d3.axisLeft`, a legend, and a hovering tooltip. Data comes from a remote CSV listing multi-cloud performance records.

SSatya Tej Kammili

84% match

Loading thumbnail…

CSCE 5320 HW6 - Q1 3D Cloud Performance

This 3D scatter plot visualizes cloud-service performance across four providers (AWS, Azure, Google Cloud, IBM), showing CPU utilization, throughput, and service latency as x, y, and z coordinates. Each provider is color-coded with hover tooltips revealing service IDs, types, and exact metric values. Built with Plotly’s `scatter3d` trace type and D3 v7 for CSV loading and data parsing, the visualization reads from a GitHub-hosted CSV file and renders in an interactive, rotatable 3D scene with a fixed camera angle.

SSatya Tej Kammili

83% match

Loading thumbnail…

CSCE 5320 HW6 - Q3 Responsiveness

This example visualizes multi-cloud service performance by plotting CPU utilization against throughput, with each point colored by cloud provider. The SVG scatterplot uses D3 v7 scales for axes and a Tableau10 ordinal color scheme, with tooltips that appear after a 2-second delay to demonstrate responsiveness. The visualization loads CSV data from a GitHub gist, renders points with white strokes for separation, and highlights selected marks with thicker dark outlines. A status indicator reports the record count and tooltip delay setting, while the dark blue tooltip transitions in with transparency.

SSatya Tej Kammili

82% match

Loading thumbnail…

CSCE 5320 HW6 - Q2 Animation

This interactive scatterplot animates multi-cloud service performance by cycling through frames grouped by service type, plotting CPU utilization against throughput for each provider. The animation displays one frame at a time with pause/play controls, a frame label, and a tooltip; the data comes from a CSV loaded via `d3.csv`. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal` with `d3.schemeTableau10`, SVG axes, and employs a timer to update transitions between frames.

SSatya Tej Kammili

79% match

Loading thumbnail…

CSCE 5320 HW6 - Q2 Small Multiples

This example presents a small multiples visualization comparing service-type panels for multi-cloud performance data. Each panel plots CPU utilization percentage against throughput requests per second, using shared x and y axis scales to facilitate cross-panel comparison. The SVG rendering, generated with d3.scaleLinear, d3.scaleOrdinal, and d3.schemeTableau10, colors points by cloud provider via the d3.csv-loaded dataset. The code implements a three-column grid layout with panel titles and axes, providing a structured overview of relationships between the two metrics across different service categories.

SSatya Tej Kammili

79% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot compares CPU utilization against throughput for cloud services, with each point colored by cloud provider and labeled by service ID. Built with d3.csv and d3.select, it renders an SVG chart featuring axes, a legend, and tooltips that appear on hover. The visualization uses d3.append for graphical elements and d3.attr for styling, loading structured data from a CSV file to display performance metrics across multiple cloud service types.

SSatya Tej Kammili

77% match

Loading thumbnail…

AI Tool Usage

This visualization uses small multiples to compare cloud provider performance across service types. Each panel displays a scatter plot of CPU utilization percentage against throughput requests per second, with points colored by cloud provider using a Tableau10 scheme. The d3.v7 code loads CSV data, shares x and y linear scales across all panels for consistent comparison, and uses `d3.scaleOrdinal`, `d3.extent`, and `d3.csv`. The SVG rendering includes panels arranged in a three-column grid with axes, titles, and a legend.

AAwrng

75% match

Loading thumbnail…

This example presents a scatterplot of country-level data, plotting GDP per capita against CO2 emissions per capita, with each point colored by region and sized by population. The visualization summarizes the dataset’s rows, columns, and key statistics for the x-axis variable, including its mean and median. Built with D3 v7, it loads CSV data from a GitHub gist and uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for region-based coloring, and `d3.extent`, `d3.mean`, and `d3.median` to compute summaries. Rendering is SVG-based with axes and labels styled via CSS.

Llokeshpraveen01@gmail.com

69% match