Assignment 2 Dot Chart

CSV URL: https://gist.githubusercontent.com/Ahuynh111/1e482a97d70acac597f636b109d9d74e/raw/ea243b11086e226c5f416302f931d3c77e42ac8d/PokemonStats.csv

Last edited Feb 13, 2024

Created on Feb 5, 2024

Forked from CS 360 Assignment 2 Bar Chart

A p5.js dot chart displays the number of Pokémon per generation across six generations. It loads data from a CSV file containing Pokémon stats, counts entries by generation, and plots the resulting totals as points along a horizontal count axis. The visualization uses p5.js functions including `loadTable`, `createCanvas`, `line`, `point`, and `text` to render axes, tick marks, labels, and data points on a 450×425 canvas. The chart shows that Generation 1 has the highest count, with subsequent generations progressively lower.

AI-generated description

CS 360 Assignment 2 Dot Chart Annie Huynh

MIT Licensed

Similar vizzes

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()`.

75% match

Assignment 6 Scatter Plot With Color Scale

This scatter plot visualizes Pokémon HP against Speed, with each point colored by the Pokémon’s generation using a qualitative color scale. The chart shows a positive trend, where higher Speed often correlates with higher HP, while the color legend distinguishes all seven generations. The visualization is rendered as an SVG using D3.js v6, with linear scales for the axes and an ordinal scale for the color mapping. Data is loaded from a CSV file via `d3.csv`, and the legend is generated using the `d3-legend` library.

Assignment 3 Strip Chart

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.

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.

Fork of activity 6_Q3

A scatter plot shows Pokémon Attack versus Defense, with points colored by Generation and a legend indicating each generation. The data is loaded from a CSV file. The visualization uses D3's `select`, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, `scaleOrdinal`, and `schemeDark2` APIs. It arranges elements within an SVG canvas, using a grey background rectangle, axes with labels, and semi-transparent circles, with the legend positioned on the right side.

PPothuguntla Pranitha

Assignment 6 Diverging Bar Chart

The chart compares average Attack and Defense stats across Pokémon generations using horizontal diverging bars, with Attack extending rightward and Defense leftward from a central axis. It employs D3 v6 to create an SVG visualization, using scaleBand for the categorical y-axis and separate linear scales for each metric. Bars are colored with a blue-red interpolated scale, and a d3-legend legend distinguishes the two directions. Data comes from a CSV file containing per-generation averages, rendered as static rectangles without animation.

73% match

Assignment 4 Bar Chart D3

This example presents a bar chart showing the average attack power of Fire-type Pokémon across different generations. The chart uses D3.js version 6 to load CSV data from a GitHub repository, scale the categorical and quantitative axes with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles. Axis ticks are generated via `d3.axisBottom` and `d3.axisLeft`, with labels applied directly to the SVG canvas.

73% match

Assignment 3 Box Plot

A box plot visualizes the distribution of HP values for Pokémon, displaying the minimum, first quartile, median, third quartile, and maximum as horizontal line segments connected by whiskers. The chart uses the p5.js library within a single sketch, loading Pokémon statistics from a CSV file via the `loadTable` function. Data is sorted, quartiles are computed manually, and the plot is drawn on a 500-by-700 canvas with a background grid, axis labels, and rotated text for the y-axis label.