Skip to main content
SimilarExport ZIP
100%

CS 360 Assignment 2 Bar Chart

✓ Published1🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Feb 5, 2024
Created on Jan 26, 2024

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.

AI-generated description

CS 360 Assignment 2 Bar Chart Annie Huynh

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

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Aahuynh8@dons.usfca.edu
77% match
Loading thumbnail…

Assignment 2 Dot 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.

Aahuynh8@dons.usfca.edu
74% 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
74% match
Loading thumbnail…

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.

Aahuynh8@dons.usfca.edu
73% match
Loading thumbnail…

Data Visualization Final Project

This visualization analyzes Pokémon type effectiveness through two linked views: a horizontal bar chart showing type counts and a matrix displaying damage multipliers between types. Hovering over a bar highlights the corresponding row in the effectiveness table, showing matchups against all other types. The bar chart uses `scaleLinear` and `scaleBand` for axes, while the matrix is rendered as an HTML table within a `foreignObject`. Data loading uses `csv()`, and interactivity relies on mouseover events that adjust rectangle opacity and table styling.

Dderrick373519@gmail.com
73% match
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
73% match
Loading thumbnail…

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.

Aahuynh8@dons.usfca.edu
71% match
Loading thumbnail…

Fork of Data Visualization Final Project-updated

This interactive visualization explores Pokémon type matchups using a dataset of 1,500 Pokémon. It combines a scatter plot, horizontal bar chart, and an effectiveness matrix table. The scatter plot uses D3's `scaleLinear`, `scaleOrdinal`, and `scaleBand` to map attributes, while the color legend uses `colorScale`. The bar chart shows type counts, and the matrix displays type effectiveness with tooltips. Animations use `.transition().duration(2000).delay()`. The interface responds to hover and click events to highlight selected types, dynamically updating the table's background colors.

NNita
71% match