Pokemon Scatter Plot

100%

Pokemon Scatter Plot

✓ Published0🌍 Public

Last edited Apr 8, 2019

Created on Oct 9, 2018

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.

AI-generated description

This scatter plot shows data about stats of Pokemon from the popular video games. The data was downloaded from the open sourced PokeAPI.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Pokemon stats dataset, displaying two selectable attributes on the x and y axes. Users can choose any combination of statistical columns via dropdown menus, with the visualization automatically updating through D3’s join pattern and smooth 1000ms transitions. The chart distinguishes between continuous and categorical data, using `scaleLinear` for numeric values and `scalePoint` for categorical ones. D3 v6 powers the axis rendering, while circle elements feature hover effects that add a stroke highlight.

Wwzhang88

89% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot displays Pokémon statistics from the UCI Machine Learning Repository Auto MPG dataset, though the code actually loads Pokémon stats. Users select which attributes to compare using dropdown menus for both the X and Y axes, with options including attack, defense, speed, and other stats. The visualization uses d3.v5 with SVG rendering and transitions that animate circles from the center to their computed positions over two seconds. Generic dropdown menu and scatter plot modules handle the UI and rendering, with axes labeled and circles colored red with partial opacity.

Wwzhang88

86% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes Pokémon data, showing the relationship between species ID and base experience. Each red circle represents a Pokémon, with tooltips revealing the identifier on hover. The visualization uses D3 v5 to load CSV data from VizHub, applying linear scales for both axes and rendering SVG circles via data joins. Axis labels and grid lines are configured with D3’s `axisLeft` and `axisBottom`, while the layout follows a standard margin convention.

Ttmrose

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

85% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes Pokémon data from a CSV file, plotting base experience on the x-axis against species ID on the y-axis. Each red semi-transparent circle represents a Pokémon, with the graph titled “Pokemon: Base Experience vs. Species_id.” The code uses d3.csv to load the data, then applies d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the SVG chart. Axis labels and a title are added using SVG text elements, with styling defined in the accompanying stylesheet.

Llizziechoi121

85% match

Loading thumbnail…

Fork of Pokemon ICE 6 Scatter plot

This interactive scatter plot visualizes Pokémon attributes, mapping attack and defense values along the x and y axes. Each circle’s radius is fixed, while the fill color categorizes species, and the radius properties are set from height and weight data. The visualization uses D3.js v5, loads CSV data from a GitHub gist, and renders SVG via the `select` and `join` APIs. Axis labels and a title are added using `axisLeft`, `axisBottom`, and text elements, with the plot drawn in the browser using React’s full-window dimensions.

BBhanuMotupalli

85% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes the relationship between height and weight for Pokémon species, with each circle representing an individual Pokémon. The chart uses d3.scaleLinear to map the data values to screen coordinates, d3.axisLeft and d3.axisBottom for the axes, and d3.extent to compute the domain. Data is loaded asynchronously from a CSV file using d3.csv. The SVG rendering includes gridlines, axis labels, and a title, with circles styled in navy at partial opacity.

Aagongwpi

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

84% match