Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Sep 26, 2017

Created on Sep 26, 2017

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.

AI-generated description

Part of the video course: D3.js in Motion.

An example scatter plot with color legend using D3 and d3-legend.

This data is from Pokemon, Pokemondb, and Bulbapedia. The dataset is about 1062 Pokemon, including their id, ndex, species, forme, first and second type, first ability and second ability, and etc.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>

mit Licensed

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes the relationship between Special Attack and Special Defence stats for Pokémon from the PokeAPI dataset. Each circle represents a Pokémon, plotted along the x-axis for special attack and the y-axis for special defence, with a steelblue fill and 30% opacity. The visualization uses D3 v5 APIs including `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for the axes, and `scaleOrdinal` for color coding. The code loads the CSV data via `csv()` and converts the stat columns to numeric values. SVG rendering is used with a 960x500 canvas, and axis labels and a title are drawn using text elements styled with CSS.

MMihir Sawant

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

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

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

83% match

Loading thumbnail…

Pokemon: Special Attack vs Special Defence, by Type

This interactive scatterplot visualizes the Special Attack versus Special Defence stats of Pokémon from the first three generations, with each point colored by its primary type. The visualization uses d3.scaleOrdinal with schemeCategory10 for color encoding, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft with grid lines. Clicking a legend item highlights that type while dimming others. Data is loaded via d3.csv from an external dataset, and all rendering uses SVG circles within a D3 v5 framework.

MMihir Sawant

83% match