100%

ICE-7 (q1)

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This interactive scatter plot visualizes the height and weight of 100 Pokémon fetched from the PokeAPI. Each circle represents a Pokémon, with hover interactions enlarging the point and displaying a tooltip with its name and measurements. Built with D3.js v7, the visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for labeling, and includes a legend and responsive SVG rendering.

AI-generated description

Reusable Scatter Plot

Fetches Pokémon data and renders an interactive scatter plot
Hover on data points to view Pokémon details
Includes legend and responsive axes with labels
Built with D3.js for data visualization

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7(q3)

A line chart visualizes base experience values for 100 Pokémon fetched from the PokeAPI, with the Pokémon index on the x-axis and base experience on the y-axis. Built with D3 v7, it renders an SVG line plot and circles, using d3.axisBottom and d3.axisLeft for labeled axes. Hovering over a circle triggers a tooltip showing the Pokémon’s name and base experience, with d3.json and Promise.all handling asynchronous data retrieval.

Pprasaad.lakshme901@gmail.com

86% match

Loading thumbnail…

ICE-7(q2)

This example visualizes the distribution of Pokémon types among the first 100 Pokémon from the PokeAPI. It fetches Pokémon data, extracts each creature’s primary type, and renders a pie chart using D3.js’s `d3.pie` and `d3.arc` functions. Each slice is labeled with the type name and count, while an interactive legend built with SVG `rect` and `text` elements identifies color associations. The chart uses `d3.rollup` for aggregation and D3’s ordinal color scale for slice coloring.

Pprasaad.lakshme901@gmail.com

83% match

Loading thumbnail…

ICE-7(q4)

This area chart displays base experience values for the first 100 Pokémon from the PokeAPI, with the Pokémon index on the x-axis and base experience on the y-axis. The visualization uses D3.js v7 to fetch data via the PokeAPI, create linear scales, render axes with labels, and generate the area path using `d3.area()`. The SVG chart applies a steelblue fill to the area beneath the line, with clearly labeled axes for readability.

Pprasaad.lakshme901@gmail.com

81% match

Loading thumbnail…

Pokemons

This scatterplot-style chart visualizes Pokémon by height on the y-axis and weight on the x-axis (using a square-root scale), with dot size encoding experience and color encoding species. The visualization uses D3 v3 with SVG and animation, rendering an interactive overview of the Pokémon dataset. The data is sourced from the PokeAPI and the chart was built with blockbuilder.org. The plot provides a comparative view of Pokémon physical attributes, with each dot representing an individual Pokémon and its position revealing correlations between size and weight across different species.

PPhilippe Rivière

80% match

Loading thumbnail…

Fork of Pokemon ICE 6 Scatter plot

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.

BBhanuMotupalli

80% match

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

79% match

Loading thumbnail…

ice 7 a

This interactive scatter plot visualizes the relationship between height and weight for individuals, with each dot colored by name and tooltips revealing age and gender on hover. It uses D3.js v7 (d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) to render an SVG chart with a separate legend and animated tooltip transitions, pulling data from a CSV file loaded via d3.csv. The visualization includes labeled axes and a categorical color scheme to distinguish data points.

RRakesh Kumar Chekuri

78% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot visualizes the relationship between height and weight for Pokémon species, with each circle representing an individual Pokémon. The chart uses d3.scaleLinear to map the data values to screen coordinates, d3.axisLeft and d3.axisBottom for the axes, and d3.extent to compute the domain. Data is loaded asynchronously from a CSV file using d3.csv. The SVG rendering includes gridlines, axis labels, and a title, with circles styled in navy at partial opacity.

Aagongwpi

77% match