Fork of HTML Starter

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.

82% match

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.

81% match

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.

79% match

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

MManeesh Kumar

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

Fork of HTML Starter

This example presents a dashboard for customer data, featuring a summary of key statistics, a data table, and a prominent SVG visualization. Built with D3.js (d3 v7) and rendered as SVG, the page loads a CSV dataset from a GitHub gist and displays it within a polished, gradient-styled interface. The code uses standard DOM manipulation and D3's data-binding capabilities to populate the visual elements.

AAmrit Adhikari

Fork of Fork of Fork of HTML Starter

This D3.js visualization loads a coffee sales CSV file and displays summary statistics about the dataset on a styled web page. It fetches the remote CSV using the Fetch API, parses it with `d3.csvParse`, and then calculates and displays the file size, row count, and column count in a dedicated summary box. The page also renders a static SVG circle graphic with D3 Data text, combining data loading and parsing with basic stat reporting.

Ssravya7136@gmail.com

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.