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.
Viewing a saved revision (read-only)
88b82e9e48274dcaa3db2855cc63fb10
Week 5: Pseudo-Visualization Pokemon Scatterplot
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 descriptionA 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
transformandfill - 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).