Pokedex

100%

✓ Published0🌍 Public

Last edited May 26, 2023

Created on May 25, 2023

Forked from test of Fork of SANKEY Experiment

A Pokedex visualization uses a Sankey diagram to map Pokémon types to their legendary counterparts, showing which types lead to the most powerful creatures. The flow diagram connects type nodes like Water, Dragon, and Flying to specific Pokémon such as Kyogre, Rayquaza, and Lugia. Built with D3.js v3, the example implements a custom `d3.sankey` layout to calculate node positions and link depths, rendering the diagram as SVG with interactive hover effects on links. The data comes from a JSON file containing typed links and node values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pokedex

This example displays an interactive Pokédex built with React and D3. It visualizes a force-directed network of Pokémon characters, with each node representing a creature and links revealing relationships between them. The code uses `d3.forceSimulation` to manage node positioning and collision, while the React framework handles the UI rendering and state. Data is loaded and processed through the D3 library, with nodes and edges drawn as SVG elements through React’s virtual DOM. The visualization updates in real time as the simulation runs, demonstrating an interactive data graph.

Rrasyidhakim

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

70% match

Loading thumbnail…

Sankey Diagram

A Sankey diagram visualizes the flow of values between five nodes, with links of varying thickness representing the magnitude of each connection. The diagram is rendered as an SVG using D3.js v4 and the `sankey` layout function from the D3 graph gallery library. Node and link data is loaded from a JSON file, and the visualization uses `scaleOrdinal` and `schemeCategory10` for color mapping, with a color legend generated by the custom `colorLegend` function.

KKarkG

69% match

Loading thumbnail…

Data Visualization Project Week 14

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting Speed against the Attack minus Defense balance for each creature. Circle size encodes HP, and color encodes primary type, with filter buttons and a legend enabling type-based exploration. The visualization uses D3 scales and axes to render the SVG chart, while click events display detailed Pokémon information in a side panel. Hovering over legend items reveals the count of each Pokémon type.

JJacob Chlebowski

68% match

Loading thumbnail…

Fork of Data Visualization Final Project-updated

This interactive visualization for a Pokémon Go Great League booster ranks Pokémon and shows type effectiveness. It presents a horizontal bar chart of Pokémon type counts, a type effectiveness matrix, and animated scatter plots of moves. Built with D3 v5 (d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft), it uses dropdown menus for filtering and selection, with circle size encoding move popularity. Users can hover for tooltips and click to filter, with a reset button. Data comes from local CSV files (pokemon_1500.csv, fast_moves.csv, charge_moves.csv).

NNita

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

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

68% match

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting speed on the x-axis and offensive balance (attack minus defense) on the y-axis. Circle size encodes HP, while color represents Pokémon type. Users can filter by type using buttons, hover over the legend to see type counts, and click individual points to view detailed Pokémon attributes. Built with D3.js, the visualization uses scaleLinear for axes, selection joins for circle rendering, and event listeners to update the display.

JJacob Chlebowski

68% match