Skip to main content
SimilarExport ZIP
100%

task3-q1

✓ Published0🌍 Public
Bbadiniswetha@gmail.com
Last edited Apr 6, 2025
Created on Apr 4, 2025
Forked from Hello VizHub

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.

AI-generated description

Pokémon Scatter Plot Visualization

This project visualizes Pokémon stats using a scatter plot with D3.js.

📊 Features

  • Scatter plot of Attack vs Defense
  • Points colored by Pokémon Type
  • Interactive and responsive using D3 v7

📁 Dataset

CSV used: [ all_pokemon_data.csv`](https://raw.githubusercontent.com/yourusername/pokemon-viz/main/all_pokemon_data.csv)

The dataset includes Pokémon stats such as HP, Attack, D fense, Speed, and Type.

🔧 How to Use

  1. Clone this repository or download the index.html file.
  2. Open index.html in a browser.
  3. The chart will automatically load the CSV data from Gi tHub.

🔗 Live Demo (Optional)

You can host this on GitHub Pages or CodePen.

Made with 💖 and D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task3_Q3

A scatterplot displays Pokémon Attack versus Defense stats, with each point colored by the Pokémon's generation and a legend identifying each generation. The chart uses D3's scaleLinear, axisBottom, and axisLeft to build axes, alongside scaleOrdinal and schemeDark2 for categorical coloring. The SVG render includes a gray inner plot area, semi-transparent circles, and labeled axes for Attack and Defense, powered by data from data.csv.

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

Pokémon Attack and Defense Scatter Plot

This scatter plot visualizes the relationship between Attack and Defense stats for Pokémon, with each circle representing a species. The plot uses D3 scales and axes to map attack values on the x-axis and defense on the y-axis, over a gray inner rectangle. Data from the Pokémon Base Stats Dataset is rendered as semi-transparent circles via D3’s `selectAll` and `join` pattern. Axis labels are added using the `@curran/axis-labels` library, while `scaleLinear` and `extent` from D3 handle the value mapping.

11807589994@qq.com
84% match
Loading thumbnail…

Responding to Resize

This visualization displays the attack and defense stats of 1,062 Pokémon as a scatter plot, with each point colored by primary type. It uses D3 v4 to draw an SVG chart that adapts to the browser window size. The redraw function sets up the scales, axes, and color legend, loading data from a CSV file of Pokémon attributes. On page load and whenever the window is resized, the visualization recalculates the layout to fit the current viewport, with axis labels, tick marks, and a categorical color legend reflecting the primary type. The chart updates dynamically to maintain readability and visual consistency across different screen sizes.

FFanYang715
84% match
Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats, plotting speed on the x-axis against the balance of attack versus defense on the y-axis. Circle size encodes HP, while color indicates Pokémon type from the Kaggle dataset. Users can click individual points to view detailed stats and filter by type using buttons. The visualization is built with D3.js, utilizing `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `join` for data binding.

JJacob Chlebowski
83% match
Loading thumbnail…

Data Visualization Project Week 13

This scatterplot from Jacob Chlebowski’s dataset visualizes Pokémon attributes, plotting Speed on the x-axis against a balance metric (Attack minus Defense) on the y-axis. Circle size encodes HP, and hue encodes Pokémon type, with controls to filter by type and tooltips to display detailed Pokémon stats. Built with D3.js, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, custom `hue` logic for point styling, and event handlers for clicks and hovers. Data comes from a Pokémon Base Stats Dataset rendered in SVG.

JJacob Chlebowski
83% match
Loading thumbnail…

Data Visualization Project Week 15

This interactive D3.js scatterplot visualizes Pokémon base stats, mapping speed on the x-axis against the balance between attack and defense on the y-axis. Circle size encodes HP, while color represents type, with filters allowing viewers to isolate specific Pokémon types. Hovering over the legend reveals type counts, and clicking a point displays detailed stats. The visualization uses d3.scaleLinear, axisBottom, axisLeft, and handles filtering via data binding with selection.join() on the Pokémon Base Stats Dataset from Kaggle.

JJacob Chlebowski
83% match