tmrose

@tmrose·3 public vizzes

Pokemon Scatter Plot

This scatter plot visualizes Pokémon data, showing the relationship between species ID and base experience. Each red circle represents a Pokémon, with tooltips revealing the identifier on hover. The visualization uses D3 v5 to load CSV data from VizHub, applying linear scales for both axes and rendering SVG circles via data joins. Axis labels and grid lines are configured with D3’s `axisLeft` and `axisBottom`, while the layout follows a standard margin convention.

May 14, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most popular US ski resorts by annual skier visits, using data from SnowBrains. The visualization customizes both axes: the y-axis removes tick lines and the domain, while the x-axis applies a custom tick formatter that converts large numbers to abbreviated units (e.g., "1.63M"). Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering. Data is loaded from a CSV file and parsed before being mapped to rectangular bars.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. The example shows how to customize axes with D3 v5, including tick formatting, axis labels, and grid lines. It uses `d3.csv`, `scaleLinear`, and `scaleBand` to map data, while `axisBottom` and `axisLeft` render the axes with custom tick formats converting values to abbreviated units. The SVG rendering removes default axis domains and applies styled tick lines via CSS.

May 7, 2019