Fork of Pokemon ICE 6 Scatter plot

100%

Fork of Pokemon ICE 6 Scatter plot

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between attack and defense stats for Pokémon, with height and weight mapped to the rx and ry circle attributes and specific species color-coded. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and position circles in SVG. Data loads from a CSV via `d3.csv`, with numeric parsing applied to the relevant fields. The code also appends custom text labels for the axes and plot title, demonstrating an imperative D3 approach within a React-free HTML setup.

CCH SAMPATH

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

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

85% match

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and accompanied by a legend. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeDark2` for color encoding, and `axisBottom`/`axisLeft` for tick marks. The SVG rendering includes a light gray inner rectangle, semi-transparent circles, and dynamically adjusted margins to fit the legend. Data comes from a CSV of Pokémon attributes.

Bbenclark.3rd@gmail.com

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

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

83% match

Loading thumbnail…

Fork of SSP with Responsive Axes & Viz

A scatter plot maps Pokémon Attack and Defense stats, with each circle colored by generation and a legend identifying each generation. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to position points, render axes, and assign categorical colors. An inner rectangle highlights the plotting area, while the code reads data from a CSV file and converts numeric fields. The example is a fork of a scatter plot with responsive axes.

Bbenclark.3rd@gmail.com

83% match