Skip to main content
Publishing & handoff

Current visibility: 🌍 Public. Copying a link or embed does not give visitors access to restricted visualizations or private project datasets.

Existing export choices

Project dataset ZIP export is unavailable without project read permission.

🌍 Public

Share visualization

Send this visualization to others.

Week 5: Pseudo-Visualization Pokemon Scatterplot

Public visualization

Viewing a saved revision (read-only)

88b82e9e48274dcaa3db2855cc63fb10

Week 5: Pseudo-Visualization Pokemon Scatterplot

0 stars0🌍 Public
JJacob Chlebowski
Last edited Sep 22, 2024
Created on Sep 21, 2024
Forked from Marks and Channels

This D3.js scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting each creature's speed on the X-axis against an offensive-defensive balance score on the Y-axis, with circle radius encoding HP and color encoding elemental type (water, fire, grass, or other). The visualization centers both axes at the canvas midpoint, using `scaleLinear` for coordinate mapping and a custom overlap-detection algorithm in `hue-and-size.js` that adjusts point opacity based on colliding circles. Axes are rendered via `axisBottom` and `axisLeft`, while an SVG background rect and bold directional labels ("Fast," "Slow," "Offensive," "Defensive") orient the viewer.

AI-generated description

A demonstration of basic D3 usage to implement the concept of Marks and Channels. Includes usage of:

  • Point Marks by X, Y, Size
  • Line mark varying in length
  • Scaling factors
  • SVG Rectangles
  • selection.each()
  • SVG Path Elements
  • d3.symbol()
  • SVG attributes transform and fill
  • D3 Color Schemes
  • JavaScript Modules

Part of the Constructing Visualizations Playlist.

See also blocks.roadtolarissa.com: Marks and Channels (a vanilla JavaScript version of this).