A5 Bubble Chart of Pokemon Stats from Gen 1 - Gen7

100%

A5 Bubble Chart of Pokemon Stats from Gen 1 - Gen7

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 26, 2024

This bubble chart displays a scatterplot of Pokemon stats from Generation 1 through 7, plotting Attack on the x-axis, HP on the y-axis, Speed as bubble radius, and Defense as bubble color. The code loads a CSV dataset, maps stat columns into numeric arrays, and renders the visualization as an SVG using d3.scaleLinear for all four encodings. Axes are drawn with d3.axisBottom and d3.axisLeft, and a d3-legend library provides size-encoding reference. Hover interactions and styling rely on CSS and the Quicksand font.

AI-generated description

Used D3 Legend Documentation as Reference: https://d3-legend.susielu.com/ Data is from: https://gist.github.com/armgilles/194bcff35001e7eb53a2a8b441e8b2c6

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot Matrix of Pokemon Stats from Gen1 - Gen7

This scatterplot matrix visualizes the relationships between six Pokémon battle stats—HP, Attack, Defense, Speed, Special Attack, and Special Defense—across all generations 1 through 7. Each panel compares two stats, with axes scaled from zero to each stat’s maximum value, revealing correlations and outliers such as Legendary Pokémon. Built with D3 v7, the visualization uses SVG rendering and three separate linear-scale pairs to position circles within a grid, with each stat labeled along its corresponding axis. Data is loaded from a CSV file containing the full Pokémon dataset.

AAllen Jake Polintan

86% 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…

Pokemon Base Stats

A horizontal strip of circles displays Pokemon base stats, with the size of each circle proportional to the total stat sum. Hovering reveals a tooltip with individual HP, attack, defense, special attack, special defense, and speed values. The visualization sorts Pokemon by their total in descending order and encodes their primary type with a solid color, while dual-type Pokemon use a linearGradient that blends both types. The code loads a CSV, processes numeric fields, and renders the static SVG layout without a force simulation, using `d3.csv`, `d3.scaleLinear`, and mouse event handlers for the tooltip.

Ccoltonjcox92

80% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes the relationship between base experience and species ID for Pokemon, using red semi-transparent circles to reveal data density. The chart is rendered as an SVG using D3 version 5, with the d3.scaleLinear, d3.axisBottom, and d3.axisLeft APIs creating the axes. The code loads the Pokemon dataset as a CSV file from a remote URL and parses its numeric fields. The plot features grid lines, custom font sizing, and rotated axis labels to enhance readability without directly encoding any additional variables.

Jjeffcampbell1999

79% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes the relationship between Special Attack and Special Defence stats for Pokémon from the PokeAPI dataset. Each circle represents a Pokémon, plotted along the x-axis for special attack and the y-axis for special defence, with a steelblue fill and 30% opacity. The visualization uses D3 v5 APIs including `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for the axes, and `scaleOrdinal` for color coding. The code loads the CSV data via `csv()` and converts the stat columns to numeric values. SVG rendering is used with a 960x500 canvas, and axis labels and a title are drawn using text elements styled with CSS.

MMihir Sawant

79% match

Loading thumbnail…

Pokemon

This scatter plot visualizes the relationship between the height and base experience of Pokémon species, using logarithmic scales on both axes to accommodate wide value ranges. The data comes from a Pokémon CSV dataset loaded via d3.csv, with each point representing an individual Pokémon as a semi-transparent magenta circle. The visualization employs d3.scaleLog for axis scaling, d3.axisBottom and d3.axisLeft for tick generation, and SVG circles for rendering the marks. Axis labels and a title are added as SVG text elements.

Llizziechoi121

79% 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…

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.

Aahuynh8@dons.usfca.edu

78% match