Pokemon Radar

100%

✓ Published1🌍 Public

Last edited Nov 23, 2021

Created on Nov 23, 2021

This visualization displays the base stats of a Pokémon (bulbasaur) as a radar chart across six dimensions: HP, Attack, Defense, Special Attack, Special Defense, and Speed. The chart uses Chart.js to render the radar visualization on an HTML canvas element. The code fetches Pokémon data from the PokeAPI, including evolution chain information, and colors the radar chart based on the Pokémon’s type using a custom color palette. A separate HTML div displays the Pokémon’s evolutionary line.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Pokemon Radar with select

This example visualizes Pokémon base statistics—HP, Attack, Defense, Special Attack, Special Defense, and Speed—using a radar chart built with Chart.js. It fetches data from the PokéAPI for a single Pokémon, showing its stat profile. The page also includes a scatter plot of all first 251 Pokémon’s height and weight, rendered on a Canvas. The code uses the `fetch` API to retrieve JSON data and Chart.js’s `Chart` and `Chart.Scatter` constructors to draw both visualizations.

Wwzhang88

90% match

Loading thumbnail…

Pokemon Stats

A searchable Pokedex displays a radar chart of a Pokemon's base stats. Users type a Pokemon name into a form, and the app fetches the dataset from a remote JSON endpoint. It then renders six stats—HP, Attack, Defense, Speed, Special Defense, and Special Attack—as a Chart.js radar chart on an HTML canvas. The chart updates dynamically and uses Chart.js's RadarController, RadialLinearScale, PointElement, and LineElement.

Wwillapolman@gmail.com

83% match

Loading thumbnail…

Radar Chart

This radar chart displays six fictional dimensions—hp, attack, sp_attack, defense, sp_defense, and speed—on circular axes, with population data from a CSV file (though the chart’s data values appear hardcoded as [25, 35]). The visualization uses D3 v5 with SVG rendering, drawing concentric grid circles via scaleLinear, radial lines and labels for each dimension, and a lineRadial generator for the data paths. It includes color-coded strokes and an unused spiral generator.

Ssunilkrishnav

77% match

Loading thumbnail…

Pokemon GO Week 2

A radar chart displays the base stats of a selected Pokemon, with concentric circles and a polygon connecting values for max CP, attack, defense, and stamina. The visualization uses D3.js selections to append SVG circles, polygons, and text labels, scaling values via linear interpolation against the dataset’s minimum and maximum stats. The code processes a Pokemon GO dataset from Kaggle, loading CSV data into numeric fields and rendering a static view of Bulbasaur.

Aabell@wpi.edu

75% 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

73% match

Loading thumbnail…

Pokemon_Map

A scatterplot map of Pokémon battle data visualizes each creature’s danceability against a user-selectable audio feature (e.g., liveness, energy) using a continuous color gradient from dark blue to teal. Built with React and D3, it renders an SVG canvas with scaled axes, and hovering over a point triggers a tooltip showing metadata. The code uses `Delaunay.voronoi` for hit-testing, `d3.axisLeft` and `scaleLinear` for scales, and reads from an `iris.csv` dataset (despite the Pokémon title). A slider control adjusts the number of bar-chart sections shown in separate containers.

Eexchoco

73% match

Loading thumbnail…

NBA Radar Chart

This example visualizes NBA player statistics as a smoothed, multi-axis radar chart, comparing seven performance metrics like effective field goal percentage, rebounds, assists, and points per game. Data from the included CSV file is normalized to a 0–1 scale before being plotted. The chart is rendered using React and D3.js (v5), with the custom `RadarChart` function building the SVG, applying an ordinal color scale, and using a glow filter via `feGaussianBlur` for visual enhancement.

JJack Hanlon

71% match

Loading thumbnail…

Pokemon GO Final Viz

This interactive visualization explores a Pokémon dataset from Kaggle, displaying a selected Pokémon's base stats, type effectiveness, and movepool alongside a level-scaling CP curve. The interface uses D3.js to render a radar chart comparing stats to maximum values, a line graph for CP growth, and a matchup table, with dropdowns and an input box to select different Pokémon. The CP curve can be toggled to show absolute values, though labeling is limited in that mode.

Aabell@wpi.edu

70% match