Skip to main content
SimilarExport ZIP
100%

Week 2: Pokemon Base Stats Dataset

✓ Published6🌍 Public
JJacob Chlebowski
Last edited Sep 8, 2024
Created on Aug 30, 2024

Using a scrollable preformatted text block, this example displays the complete Pokémon Base Stats dataset as a raw JSON file. The interactive element is a simple font-size control. The code parses string values for eleven numeric columns, including Speed, Attack, and Defense, into numbers, and then uses `JSON.stringify` to render the entire array of 144 Pokémon records for inspection. It relies on the custom CSV-to-JavaScript data import functionality and standard document object model (DOM) methods for styling and display.

AI-generated description

Author: Jacob Chlebowski - jachlebowski@wpi.edu

The Pokemon Base Stats Dataset

Tasks:

  • I want to summarize all Pokémon in the dataset via a scatter plot matrix (4 quadrants: speed and offensiveness)
  • I want to search (lookup) the Pokémon that have a speed of 150+, among other attributes
  • I want to derive a new Pokémon by combining two existing ones (mean of each attribute)
  • I want to record a new Pokémon with all new attributes (catch rate, species, type, etc.)
  • I want to identify a single Pokémon on a scatter plot
MIT Licensed

Similar vizzes

Loading thumbnail…

Week 2: Global Salaries for Data Science Dataset

This example displays the raw contents of a Pokémon Base Stats dataset as a JSON-formatted text listing in the browser. It parses the CSV data using a custom import and converts numeric fields with unary plus operators. A scrollable container is created with inline CSS, and the JSON string is rendered inside a `<pre>` element, with font size controlled by a variable. The visualization simply outputs the structured data without any graphical encoding.

JJacob Chlebowski
86% match
Loading thumbnail…

Week 2: Global Salaries for Data Science Dataset

This example displays the raw contents of a Pokémon Base Stats dataset as a JSON-formatted text listing in the browser. It parses the CSV data using a custom import and converts numeric fields with unary plus operators. A scrollable container is created with inline CSS, and the JSON string is rendered inside a `<pre>` element, with font size controlled by a variable. The visualization simply outputs the structured data without any graphical encoding.

JJacob Chlebowski
86% match
Loading thumbnail…

PokémonBaseStatsDataset

This example displays the raw first row of the Pokémon Base Stats Dataset as a formatted JSON object in a pre element. The code loads the CSV file, coerces all numeric fields to numbers, and then renders the first entry’s complete attributes—including name, type, height, weight, and battle stats—at a large default font size. The visualization serves as a simple data inspection tool, using the imported CSV parsing from the dataset file and vanilla JavaScript DOM manipulation via `innerHTML` to present the structured record.

11807589994@qq.com
84% match
Loading thumbnail…

Fork of Week 2: speed only

This scatter plot matrix visualizes Pokémon base stats across four quadrants, focusing on speed and offensiveness (Attack and Sp. Atk). It summarizes all Pokémon in the dataset while enabling lookup of high-speed entries (150+) and identification of individual points. The visualization uses a scrollable container and parses CSV data with string-to-number conversion, rendering type counts as JSON text. Data comes from the Pokémon Base Stats Dataset on Kaggle, with the main script exporting computed stats without external libraries.

JJacob Chlebowski
78% match
Loading thumbnail…

Fork of Week 2: Pokemon Data Extremes

This example presents text-based extremes for the Pokémon dataset, listing the lowest and highest values for Speed, Attack, Defense, and HP. It identifies the Pokémon with the minimum and maximum stat values. The tool parses CSV data and calculates extremes using JavaScript's `reduce` method, then displays results in a formatted HTML container. The visualization is a simple textual output rather than a graphical chart, with data sourced from the Pokémon Base Stats Dataset.

JJacob Chlebowski
77% match
Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats, plotting speed against the balance between attack and defense, while encoding HP through circle radius and Pokémon type through color. Users can click individual points to reveal detailed stat information and filter the dataset by type. The visualization uses D3.js v7 APIs including `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with custom overlap detection adjusting circle opacity to reveal densely clustered regions. The dataset is drawn from the Pokémon Base Stats Dataset sourced from Kaggle.

JJacob Chlebowski
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
75% match
Loading thumbnail…

Week 4: Pokemon Simple Scatter Plot

This scatter plot maps Pokémon Attack and Speed stats from the Kaggle Base Stats Dataset as circles, with click interactions revealing each creature’s name via alert. Built with d3 scaleLinear, axisLeft, extent, xAxis, and yAxis, it renders axes, labels, and a gray inner rectangle. The viz.js component handles data binding and scales, while index.js configures dimensions and margins. Circle radius and opacity are derived from the plot width and a fixed ratio.

JJacob Chlebowski
74% match