Stats & Charts

Visualize data with built-in chart and table blocks

The collection editor includes a full set of data visualization blocks so you can build stats-driven layouts without any external tools. Create bar charts, scatter plots, spider charts, head-to-head comparisons, and sortable data tables — all directly on the canvas.

Data Tables (Season Stats)

The Season Stats block is a sortable data table that works for any kind of tabular data, not just season stats.

1. Add the block

   Drag Season Stats (listed as “Data Table” in the sidebar) from the Stats & Data section onto your canvas.

2. Enter data manually or upload a CSV

   Double-click the block to open the data editor. You have two options:

   • Manual entry — Type values directly into the table. Add rows and columns as needed.
   • CSV upload — Click the upload button and select a CSV file. The data populates the table automatically.
3. Configure columns

   Set column headers, alignment, and sort behavior. Visitors to your published collection can click column headers to sort the table.

Data tables span 2-3 columns and work best at full width for datasets with many columns. For simpler comparisons, 2 columns is usually enough.

Bar Charts

The Bar Chart block lets you compare values across categories with a clean, customizable bar chart.

1. Add a Bar Chart block

   Drag it from the Stats & Data section. Bar charts can span 1-3 columns depending on how much space you want.

2. Enter your data

   Double-click to open the chart editor. Add labels and values for each bar. You can customize colors and add a chart title.

3. Preview on the canvas

   The chart renders live as you make changes, so you can see exactly how it will look on the published page.

Scatter Plots

The Scatter Plot block visualizes the relationship between two variables. Each data point is plotted on an X-Y axis.

• Spans 2-3 columns for readability.
• Double-click to enter data points with X and Y values.
• Add axis labels and a title to provide context.

Scatter plots are especially useful for showing correlations — for example, minutes played vs. points scored, or age vs. performance rating.

Spider Charts

The Spider Chart (also called a radar chart) compares multiple attributes at once on a radial grid. It is ideal for player skill profiles or multi-category comparisons.

• Spans 1-2 columns — compact enough to fit alongside other blocks.
• Double-click to define the attributes (axes) and their values.
• Supports overlaying multiple datasets for side-by-side comparison.

Spider charts work best with 4-8 attributes. Fewer than 4 makes the shape hard to read; more than 8 gets cluttered.

Head-to-Head Comparisons

The Head to Head block puts two athletes or teams side by side with paired stat rows. Each row shows a stat name with values for both sides, making it easy to see who comes out ahead in each category.

1. Add a Head to Head block

   Drag it from the Stats & Data section. It spans 2-3 columns.

2. Set up the two sides

   Double-click to open the editor. Enter the names (and optionally photos) for each side of the comparison.

3. Add stat rows

   Add as many stat rows as you need. Each row has a label (e.g., “Points Per Game”) and a value for each side.

Stats Header

The Stats Header block is a simple title banner for introducing a stats section. Use it above your charts and tables to give the section a clear label and optional subtitle. It spans 2-3 columns and pairs naturally with the data blocks below it.

Shape Block

The Shape block adds decorative visual accents to your stats sections. Use it to add background shapes or color blocks behind your charts for a more polished look. Shapes can span 1-3 columns.

Building a Stats Section

Here is a typical workflow for putting together a stats-focused layout:

1. Start with a Stats Header

   Add a Stats Header block at the top to introduce the section (e.g., “2025 Season Statistics”).

2. Add a data table

   Drop in a Season Stats table spanning the full width with your raw data, either typed in or uploaded via CSV.

3. Add visualizations

   Below the table, add a row of charts. For example, a Bar Chart in one column and a Spider Chart in the next column.

4. Include a comparison

   Add a Head to Head block for a player or team matchup, or a Scatter Plot to show a trend across your dataset.

You can mix stats blocks with other block types freely. Add a Pull Quote next to a chart, or an Image block with a player photo beside a Spider Chart. The grid layout handles any combination.