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.
AI-generated descriptionPart of the video course: D3.js in Motion.
This example shows how to make a D3 visualization that fills up the size of the page at the time it is loaded AND whenever the page is resized by the user. To experience the resize behavior, run this example full-screen and resize the browser.
This data is from Pokemon, Pokemondb, and Bulbapedia. The dataset is about 1062 Pokemon, including their id, ndex, species, forme, first and second type, first ability and second ability, and etc.
forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>
forked from <a href='http://bl.ocks.org/FanYang715/'>FanYang715</a>'s block: <a href='http://bl.ocks.org/FanYang715/1575defc5aefc5985210e25131468126'>Stylized Scatter Plot with Color Legend of Pokemon</a>