Pokemon_Map

100%

✓ Published0🌍 Public

Last edited Dec 23, 2022

Created on Dec 23, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pokemon Scatterplot ICE 6

This scatterplot maps Pokémon attack and defense stats as circle positions, with height and weight encoded via the circle’s `rx` and `ry` attributes. Pikachu and Squirtle are highlighted in distinct colors for comparison. It uses d3.csv to load data, d3.scaleLinear with extent for scales, and d3.axisLeft/axisBottom with SVG text labels. The rendering is SVG, styled with cursive font labels and axis ticks, all within a React-free HTML page using d3 v5.

CCH SAMPATH

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

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

81% match

Loading thumbnail…

Pokemons

This scatterplot-style chart visualizes Pokémon by height on the y-axis and weight on the x-axis (using a square-root scale), with dot size encoding experience and color encoding species. The visualization uses D3 v3 with SVG and animation, rendering an interactive overview of the Pokémon dataset. The data is sourced from the PokeAPI and the chart was built with blockbuilder.org. The plot provides a comparative view of Pokémon physical attributes, with each dot representing an individual Pokémon and its position revealing correlations between size and weight across different species.

PPhilippe Rivière

81% match

Loading thumbnail…

Pokemon dataset

This example visualizes the Pokemon dataset as a scatter plot, mapping attack values to the x-axis and defense values to the y-axis, with each point colored by species and sized by its height and weight attributes. The code uses D3 v5’s `csv` loader to fetch data from a GitHub gist, then renders SVG circles via `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Points are styled with fixed radius and fill colors from a custom marker function, while axis labels and a title are added using SVG text elements.

CCH SAMPATH

80% match

Loading thumbnail…

Fork of Responsive Axes with Crosshair (SSP) and Tooltips and Comparison

This scatter plot visualization displays Pokémon attack and defense statistics, with each point colored by generation and interactive tooltips showing exact values. The chart uses D3.js with responsive axes that maintain consistent tick mark density through dynamic tick calculation based on plot dimensions, ensuring readability across different screen sizes. A crosshair follows the mouse position within the plotting area, and clicking points displays their attack values in a comparison panel, while a ResizeObserver tracks container size to trigger redraws. The SVG rendering includes a legend, axis labels, and handles the Pokémon dataset from CSV.

Bbenclark.3rd@gmail.com

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

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

79% match