Skip to main content
SimilarExport ZIP
100%

Assignment 5 Line D3

✓ Published0🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Feb 27, 2024
Created on Feb 27, 2024

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.

AI-generated description

CS 360 Assignment 5 Line Chart in D3 Annie Huynh

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

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Assignment 6 Bar Chart With Sequential Color Scale

This bar chart displays the average Attack Power of Grass-type Pokémon across different Generations, with bars colored using a sequential blue-green color scale to represent value magnitude. The visualization is rendered as an SVG using D3 v6, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential(d3.interpolateBuGn)` for color encoding. A color legend is added via the `d3.legendColor()` API. Data is loaded from a CSV file containing Generation and Grass attack averages.

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

Assignment 5 Bubble Plot D3

This bubble plot visualizes Pokémon Attack and Defense stats, with HP mapped to bubble size and Generation mapped to color. It uses a D3.js v6 SVG scatter plot, scaling x and y axes with `d3.scaleLinear` and applying `d3.scaleOrdinal` for the categorical color scale. The underlying CSV data is fetched via `d3.csv` and drawn as circles using the standard D3 selection, enter, and append pattern, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Aahuynh8@dons.usfca.edu
81% 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
79% match
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
79% 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
77% match