Fork of SSP with Responsive Axes & Viz

100%

Fork of SSP with Responsive Axes & Viz

✓ Published0🌍 Public

Last edited Feb 14, 2024

Created on Feb 14, 2024

A scatter plot maps Pokémon Attack and Defense stats, with each circle colored by generation and a legend identifying each generation. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to position points, render axes, and assign categorical colors. An inner rectangle highlights the plotting area, while the code reads data from a CSV file and converts numeric fields. The example is a fork of a scatter plot with responsive axes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Responsive Axes (SSP)

This visualization shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and a legend indicating the generation. The scatter plot uses D3.js scales and axis functions, but its key feature is responsive axes that maintain consistent tick mark density as the viewport resizes. The code calculates the number of ticks based on the inner width and height divided by a fixed tick density constant, ensuring axes remain readable at any size. Data comes from a CSV file containing Pokémon attributes.

Bbenclark.3rd@gmail.com

91% match

Loading thumbnail…

Fork of Responsive Axes with Crosshair (SSP) and Tooltips and Comparison

This scatter plot visualization displays Pokémon attack and defense statistics, with each point colored by generation and interactive tooltips showing exact values. The chart uses D3.js with responsive axes that maintain consistent tick mark density through dynamic tick calculation based on plot dimensions, ensuring readability across different screen sizes. A crosshair follows the mouse position within the plotting area, and clicking points displays their attack values in a comparison panel, while a ResizeObserver tracks container size to trigger redraws. The SVG rendering includes a legend, axis labels, and handles the Pokémon dataset from CSV.

Bbenclark.3rd@gmail.com

88% match

Loading thumbnail…

Fork of Responsive Axes with Crosshair (SSP)

This scatterplot displays Pokemon Attack and Defense stats, with points colored by generation and a hoverable crosshair that tracks the mouse position. The visualization uses SVG rendering with D3.js scales and axes, and implements responsive tick mark density via `axisBottom` and `axisLeft` with computed tick counts based on container dimensions. Data comes from a CSV file containing Pokemon attributes, and the code uses ResizeObserver to adapt the chart to resizing windows.

Bbenclark.3rd@gmail.com

88% 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…

Responsive Axes with Crosshair (SSP) and Tooltips

A scatter plot of Pokémon Attack versus Defense values uses responsive axes that maintain consistent tick mark density as the container resizes. The visualization leverages D3 scales and axis components, with a ResizeObserver tracking dimensions and a SVG crosshair that follows the mouse within the plot area. Tooltips display the Attack and Defense values for each data point, while a color legend distinguishes Pokémon by generation.

Bbenclark.3rd@gmail.com

84% match

Loading thumbnail…

Fork of activity 6_Q3

A scatter plot shows Pokémon Attack versus Defense, with points colored by Generation and a legend indicating each generation. The data is loaded from a CSV file. The visualization uses D3's `select`, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, `scaleOrdinal`, and `schemeDark2` APIs. It arranges elements within an SVG canvas, using a grey background rectangle, axes with labels, and semi-transparent circles, with the legend positioned on the right side.

PPothuguntla Pranitha

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

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

81% match