Fork of Week 2: speed only

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.

81% match

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.

81% match

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats, plotting speed against the balance between attack and defense, while encoding HP through circle radius and Pokémon type through color. Users can click individual points to reveal detailed stat information and filter the dataset by type. The visualization uses D3.js v7 APIs including `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with custom overlap detection adjusting circle opacity to reveal densely clustered regions. The dataset is drawn from the Pokémon Base Stats Dataset sourced from Kaggle.

81% match

Data Visualization Project Week 9

This scatterplot visualizes Pokémon base stats, plotting Speed on the x-axis against an offensive/defensive balance (Attack minus Defense) on the y-axis. Circle size encodes HP, while color indicates Pokémon type, and overlapping circles are made more transparent. The visualization uses D3 scales, axes, and selections to render the chart, with data from a Pokémon Base Stats CSV. The code employs `d3.scaleLinear`, `axisBottom`, `axisLeft`, and `selection.join` to manage dynamic circle elements.

Fork of Week 2: Pokemon Data Extremes

This example presents text-based extremes for the Pokémon dataset, listing the lowest and highest values for Speed, Attack, Defense, and HP. It identifies the Pokémon with the minimum and maximum stat values. The tool parses CSV data and calculates extremes using JavaScript's `reduce` method, then displays results in a formatted HTML container. The visualization is a simple textual output rather than a graphical chart, with data sourced from the Pokémon Base Stats Dataset.

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting speed against the balance between attack and defense. Circle size encodes HP, while color maps to Pokémon type. Users can filter by type using buttons and click individual points to view detailed stats. Built with D3.js, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft`, with custom overlap-based opacity adjustments to manage point density. A legend and a details panel complement the interactive filtering and selection features.

Data Visualization Project Week 12

Week 4: Pokemon Simple Scatter Plot

This scatter plot maps Pokémon Attack and Speed stats from the Kaggle Base Stats Dataset as circles, with click interactions revealing each creature’s name via alert. Built with d3 scaleLinear, axisLeft, extent, xAxis, and yAxis, it renders axes, labels, and a gray inner rectangle. The viz.js component handles data binding and scales, while index.js configures dimensions and margins. Circle radius and opacity are derived from the plot width and a fixed ratio.