Assignment 3 Strip Chart

100%

Assignment 3 Strip Chart

✓ Published1🌍 Public

Aahuynh8@dons.usfca.edu

Last edited Feb 13, 2024

Created on Feb 13, 2024

This strip chart visualizes the distribution of Pokémon Attack statistics across seven types (Bug, Dark, Fire, Grass, Ground, Normal, Water), loaded from a CSV file hosted on GitHub. The p5.js sketch draws each data point as a jittered dot (via `random()`) along vertical columns for each type, with a light grid background, axis labels, and a title. Attack values are mapped to the y-axis using linear scaling, allowing viewers to compare range and density across categories. The rendering uses `createCanvas`, `preload` with `loadTable`, and `point` calls within the `draw` loop.

AI-generated description

CS 360 Assignment 3 Strip Chart Annie Huynh

CSV URL: https://raw.githubusercontent.com/Ahuynh111/gist-practice/main/PokemonAttack%20-%20Sheet1.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 3 Histogram

This interactive histogram displays the distribution of Attack stat values across Pokémon from a CSV dataset. Built with p5.js, the visualization queries a remote CSV file via `loadTable()`, then uses a `preload()` function to load and parse the data before rendering. The code manually bins Attack values into ten intervals (0–20, 20–40, etc.) and draws each bar using `rect()` with heights proportional to the counts. The canvas displays grid lines, axis labels, and a title, with the y-axis rotated using `rotate()` to show the count axis vertically.

Aahuynh8@dons.usfca.edu

84% match

Loading thumbnail…

Assignment 2 Heat Map

This heat map visualizes the average attack values of Pokémon across seven types—Bug, Dark, Fire, Grass, Ground, Normal, and Water—for six generations, using a purple sequential color scale from light to dark to indicate increasing attack ranges. Each type is displayed as a row of colored squares, with one square per generation, alongside a legend showing six bins (0–20, 20–40, up to 100+). The visualization loads CSV data from GitHub using p5.js’s `loadTable`, then renders the grid and labels with the Canvas API and `rect` and `text` functions in `draw()`.

Aahuynh8@dons.usfca.edu

81% match

Loading thumbnail…

Assignment 4 ScatterPlot D3

This scatter plot visualizes the relationship between Attack and Defense stats for Pokémon, with each circle representing a single Pokémon. The visualization uses D3 v6 to load CSV data from a GitHub gist and render an SVG chart with linear scales mapping attack values to the x-axis and defense values to the y-axis. The code explicitly uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.selectAll to create the circles, axes, and labels, while styling circles with a mediumpurple fill and black stroke.

Aahuynh8@dons.usfca.edu

80% match

Loading thumbnail…

task3-q1

This scatter plot compares the Attack and Defense stats of Pokémon, with each point colored by the Pokémon's primary type. The visualization uses D3.js v7 to load a CSV dataset from GitHub, map the data to linear scales for both axes, and render SVG circles. Axis labels are added as text elements, and a categorical color scheme distinguishes the different Pokémon types.

Bbadiniswetha@gmail.com

79% match

Loading thumbnail…

Assignment 5 Line D3

This line chart visualizes the average attack power of Fire, Grass, Water, and Dark Pokémon types across multiple generations. The SVG rendering uses D3.js v6 with `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis, plotting four colored line paths from CSV data loaded via `d3.csv`. The chart includes axes, a title, and a manual legend with colored rectangles.

Aahuynh8@dons.usfca.edu

79% match

Loading thumbnail…

Activity6_Task3_Q3

A scatterplot displays Pokémon Attack versus Defense stats, with each point colored by the Pokémon's generation and a legend identifying each generation. The chart uses D3's scaleLinear, axisBottom, and axisLeft to build axes, alongside scaleOrdinal and schemeDark2 for categorical coloring. The SVG render includes a gray inner plot area, semi-transparent circles, and labeled axes for Attack and Defense, powered by data from data.csv.

PPothuguntla Pranitha

78% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot visualizes 1,062 Pokémon, mapping Attack on the x-axis and Defense on the y-axis, with each point colored by primary type. The chart uses D3 v4 with SVG rendering, featuring a linear scale for both axes and an ordinal color scale with a categorical scheme. A color legend generated via the d3-legend plugin identifies the type categories, and the visualization includes axis labels ("Attack" and "Defnse" [sic]), tick marks, and a legend for the "Type1" color encoding. The design employs translucent circles (opacity ~0.5) to reveal overlapping points, with axis lines hidden and clean tick styling. The dataset contains over 1000 Pokémon records loaded from a CSV file, and the chart is part of a video course.

FFanYang715

78% match

Loading thumbnail…

CS 360 Assignment 2 Bar Chart

This bar chart displays the count of Pokémon across twelve primary types, including Bug, Dark, Dragon, Electric, Fire, Grass, Ground, Normal, Psychic, Rock, Steel, and Water. The visualization uses the p5.js library, loading data from a remote CSV file via `loadTable` and rendering vertical bars with `rect` based on type frequencies. The chart includes labeled axes, a numeric scale showing counts, and a rotated y-axis title, providing a clear categorical comparison of Pokémon type distribution.

Aahuynh8@dons.usfca.edu

77% match