Pokemon Radar with select

100%

Pokemon Radar with select

✓ Published0🌍 Public

Last edited Nov 23, 2021

Created on Nov 23, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Pokemon Radar

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.

RRyan Lee

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

81% match

Loading thumbnail…

select and radar

This example shows a dropdown menu listing Pokémon names from the PokéAPI, which users can select to see their choice displayed. The React app fetches data from `https://pokeapi.co/api/v2/pokemon?limit=200` using `d3.json`, then passes the names to a `ReactDropdown` component. The selected value updates component state via `useState`, while the charting capabilities of Chart.js are loaded but not actively used in the displayed visualization.

Wwzhang88

77% match

Loading thumbnail…

Pokemon GO

This visualization explores a Pokémon GO dataset, showing how a selected Pokémon's stats like base attack, defense, and stamina vary, along with its available moves. It uses a radar chart to display these stats, and includes a dropdown menu for selecting different Pokémon to update the display. The code parses CSV data using standard JavaScript and renders the structured information, such as charged and fast moves, directly into the container.

Aabell@wpi.edu

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

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

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

70% match

Loading thumbnail…

Pokemon Scatter Plot

This interactive scatter plot visualizes Pokémon stats from the PokeAPI, letting users compare any two numeric attributes via dropdown menus for the x and y axes. The D3.js v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scatterplot` functions to render SVG circles with a smooth `transition().duration(1000)` animation as data points fly into place. Axes include gridlines and rotated labels, while the `dropdownMenu` module updates the selected columns on change.

MMihir Sawant

70% match