Skip to main content
SimilarExport ZIP
100%

Responsive Axes with Crosshair (SSP) and Tooltips

✓ Published1🌍 Public
Bbenclark.3rd@gmail.com
Last edited Feb 20, 2024
Created on Feb 20, 2024

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.

AI-generated description

A viz container with responsive axes that have consistent tick mark density. Try opening in full screen mode and resizing!

Challenge

  • Use this technique to make the axes on your viz responsive
MIT Licensed

Similar vizzes

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
95% 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
92% match
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
90% match
Loading thumbnail…

Fork of SSP with Responsive Axes & Viz

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.

Bbenclark.3rd@gmail.com
84% match
Loading thumbnail…

Responding to Resize

This visualization displays the attack and defense stats of 1,062 Pokémon as a scatter plot, with each point colored by primary type. It uses D3 v4 to draw an SVG chart that adapts to the browser window size. The redraw function sets up the scales, axes, and color legend, loading data from a CSV file of Pokémon attributes. On page load and whenever the window is resized, the visualization recalculates the layout to fit the current viewport, with axis labels, tick marks, and a categorical color legend reflecting the primary type. The chart updates dynamically to maintain readability and visual consistency across different screen sizes.

FFanYang715
82% 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
82% 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
80% match
Loading thumbnail…

Pokemon Scatter Plot

This interactive scatter plot visualizes Pokémon stats from the PokeAPI, letting users compare any two numeric attributes via dropdown menus for the x and y axes. The D3.js v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scatterplot` functions to render SVG circles with a smooth `transition().duration(1000)` animation as data points fly into place. Axes include gridlines and rotated labels, while the `dropdownMenu` module updates the selected columns on change.

MMihir Sawant
79% match