Royal Blue Analytics branded Superstore KPI dashboard with 5 KPI cards, sales per customer gauge, regional sales area chart, state-wise Voronoi treemap, order distribution bars and chord diagram, customer segmentation radar with RFM scores, and sub-category analysis with multi-line chart.

Superstore Dashboard

Add an Order Distribution section with horizontal bars for Segment and Ship Mode, plus a chord diagram connecting segments to ship modes.

Add Sub-Category Analysis with a KPI card showing Appliances metrics (Sales, Profit, Orders, Customers stacked vertically with area chart trend) and a multi-line chart showing all sub-categories as light blue background lines with Appliances highlighted in primary blue.

Add a month filter dropdown (Jan 2023 - Dec 2026) that updates all charts dynamically, and include the Royal Blue Analytics logo in the header.

Add a Sales per Customer gauge chart (semicircle speedometer with gradient fill and target marker), a Regional Sales stacked area chart by West/East/Central/South, and a circular Voronoi treemap for state-wise sales.

Add a Customer Segmentation radar chart with Current Year vs Prior Year comparison (Champions, Loyal, New, Needs Attention, Lost, At Risk) and RFM score sliders with wavy line indicators.

Build a Superstore KPI dashboard with Royal Blue Analytics branding (#3B5998 primary blue, #1a365d navy). Include 5 KPI cards with sparklines showing Sales, Profit, Quantity, Avg Discount, and Profit Ratio with period-over-period comparison.

KPI Dashboard using Tableau Superstore Data

Sekou Tyler

Interactive star map showing the visible night sky from 54 cities worldwide. Uses ESA Gaia DR3 data with real-time stereographic projection, constellation overlays, draggable Earth globe, and yearly timeline animation.

Night Sky Atlas

Sundoo Park

Interactive pivot table experience. Browse databases/schemas/tables, drag columns into Filters, Columns, Rows, and Values quadrants to dynamically build pivot queries using the pivot_table_functions database (build_column_names and pivot_table). Requires the pivot_table_functions shared database to be attached.

Dive into Pivoting!

Alex Monahan

Financial briefing book (Income Statement, Balance Sheet, Cash Flow, Equity) for Dow Jones companies, powered by Yahoo Finance data and build with Claude.

Financial Reporting Briefing Book

ryan+devrel@superdatabrothers.com

Interactive NBA Game Quality explorer with Datadog-style key:value filter bar (Tab autocomplete, auto-close quotes, IN lists with bracket syntax, numeric comparisons, date part filters), edit/SQL toggle, 20x20 heatmap with contour edges and anchored axes, clickable axis label dropdowns, GQ box plot with player tick marks, orange dot overlay via player filter or dots:true directive, heatmap:true to apply filters to heatmap, sortable paginated table with click-to-filter rows.

NBA Game Quality Explorer — 2025-26

Add two more special filter directives:

heatmap:true — when present, the heatmap should reflect the currently filtered data instead of always showing the full dataset.
top:N — limits the result set to the top N rows by the current sort column/direction.

Also add contour edges to the heatmap — draw thin gray border lines along the edges where filled cells meet empty cells, to give the data shape a cleaner outline.

Make table rows clickable. Clicking a row should toggle a player:"Player Name" filter in the filter bar. If that player is already filtered, remove the filter. This creates a quick way to drill into a specific player's games.

Add Tab-key autocomplete to the filter bar — when the user starts typing a key name and hits Tab, autocomplete it to the nearest matching key followed by a colon. Also add auto-close quotes: when the user types ", automatically insert a closing " and place the cursor between them. If the cursor is right before an existing closing quote, skip past it instead of inserting another pair.

When a player: filter is active, overlay orange dots on the heatmap showing where that player's filtered games fall (with jitter so overlapping dots spread within a cell). Also add horizontal orange tick marks on the GQ box plot for those games. In the table, highlight matching player rows with a light orange background. Additionally, support a dots:true directive in the filter bar that shows dots for ALL currently filtered games (not just player-filtered ones).

I have an NBA box scores share at md:_share/nba_box_scores/c9126ae3-ef30-4b6e-af8e-d2212c1f2797. It has tables box_scores_gq, box_scores, and schedule. Can you explore the schema of each table and show me what's in them? Then build a simple dive that queries individual player game performances for the 2025-26 season (games since 2025-10-20), joining box_scores_gq with box_scores (on game_id and entity_id, where period='FullGame') and schedule (on game_id). Show a sortable, paginated table with columns: Team, Player, Opponent, Date, MIN, PTS, 3PTM, FG%, FT%, REB, AST, STL, BLK, TO, and Game Quality (GQ). Sort by GQ descending by default. 50 rows per page.

Add a 20×20 bin heatmap above the table that plots two stats against each other — default to PTS (x-axis) vs GQ (y-axis). Use a blue gradient color scale (lighter = fewer games, darker = more). The axis bounds should be anchored to the full dataset so they don't shift when filters are applied. Add tick labels on both axes. Show a tooltip on hover with the game count for that cell. When you click a heatmap cell, it should cross-filter the table to only show games in that bin. Add a “clear” link to remove the cell selection.

Make the X and Y axis labels on the heatmap clickable. When clicked, show a dropdown menu that lets you switch the axis to any of these stats: PTS, REB, AST, STL, BLK, TO, 3PTM, FG_V, FT_V, GQ. The dropdown should highlight the currently selected stat and close when you click outside it. Changing an axis should clear any selected bin.

Add a narrow vertical box plot to the right of the heatmap showing the distribution of Game Quality scores (min, 25th percentile, median, 75th percentile, max). It should use the same data source as the heatmap and be vertically aligned with it.

Next to the filter bar, add small "edit" and "SQL" toggle links. In "edit" mode, show the normal editable filter input. In "SQL" mode, show a read-only rendering of the current filters translated to SQL WHERE clause syntax (e.g., WHERE team_id ILIKE '%LAL%' AND points >= 30). This helps users understand exactly what the filters are doing.

Replace any simple filter inputs with a single Datadog-style key:value text input filter bar. It should support these filter keys:

String filters (case-insensitive contains): team, player, opp/opponent, date
Numeric filters (supports >, >=, <, <=, =): pts, reb, ast, stl, blk, to, 3ptm, min, gq, fg%, ft%, fg_v, ft_v
Date part filters (numeric): year, month, day, week

Example usage: team:LAL player:"LeBron James" pts:>=30 month:>=12
Support quoted values for multi-word strings, IN-list syntax with brackets like team:[LAL,BOS,GSW], and multiple filters combined with AND logic. Add a clear (✕) button.

Polish the whole dive:

Title: "NBA Game Quality Explorer — 2025-26" with a subtitle explaining GQ is a head-to-head dominance score across 9 stat categories within each week
Add a color legend bar below the heatmap (Fewer → More games)
Show FG% and FT% in the table as 0.545 (+3.2) format showing the percentage and the value-over-expected
Add a help text footer listing all available filter keys with an example
Make sure the design is clean with system-ui font, light gray background, and consistent spacing

Jacob Matson

LinkedIn-style Queens puzzle game with 4 difficulty levels, drag-to-mark, smart coaching hints, and unlimited replay

Queens Unlimited

Recreate linkedin's queens game, adding 4 difficulty levels

Queens Puzzle

Dermott Ryan

Best Practices for Dives

Planning first, not code. I started with a one-pager. THis covered the persistence spectrum (ephemeral / one-off / durable / embedded), the five design principles, the five-phase build workflow, the data-layer priority order: schema, comments, views, macros. Then I turned it into a slide-by-slide outline. 15 slides, build states per slide, real verbatim prompts with the typos left in, speaker notes that trust silence.

The Dive is one React component. A `slides` array, each entry a function returning JSX. A `Slide` primitive with three variants: `light` (cream), `dark` (charcoal), `statement` (centered, lots of room). A `Code` block for prompt examples. Brand colors match from our website so anyone watching both gets continuity. Coral, JetBrains Mono, Inter.

Once I have the narrative in a good place, I added navigation. Arrows, space, home/end, `f` for fullscreen. Tap to advance — left half back, right half forward. Wheel scroll with a cooldown so a trackpad gesture doesn't skip three slides at once. (Got bit by that previously so I fixed it here.)

Slide 19 is the heavy lifter. DABstep tier comparison, live SQL against `agentic_sql_results_public.results`, Recharts bar chart, macros bar in coral, the other three muted. Cost row underneath, one cell per bar. The chart animates on slide-active so the bars grow when you land. Otherwise you arrive and the punchline has already been delivered.

A few tweaks worth keeping:

- Shot/chaser grid needed the chaser text bumped from `#888` to `#aaa` on dark slides.
- Slide 2 had a generic "30%" treatment. Replaced with a 14rem coral number for emphasis.
- Persistence spectrum started as four equal columns. I ended up tuning for aesthetics.
- Slide 9, the "it's just code" reveal, shows a stripped-down `dive.tsx` snippet — `useSQLQuery`, `REQUIRED_DATABASES`, the React shell. The renderer choked on the literal `export` keywords inside the template literal. Preprocessor was reading them as top-level exports. Five-minute bug, ugly fix: `${'export'}` interpolations. Same rendered output, no parser confusion.
- NBA Game Quality Explorer link was the workspace UUID URL. Switched to the public dive-gallery slug.

I needed eight-ish iteration passes. Most of the time went into narrative: having a good setup, planting call backs, adding reveals. Each piece building on the pieces before it.

Remix of Jacob Matson's DABstep talk for the Data Engineer Things meetup. Two changes from the original: meetup attribution updated on the title slide, and first-person narration ("I") changed to team narration ("We") on the transition and V4 explanation slides.

This Is a Talk About SQL... and AI (Data Engineer Things remix)

Mike Xu

Interactive globe and flat-map visualization of 28,579 USGS seismic events (Mar 2025–Mar 2026). Three tabs: draggable orthographic globe with zoom, Natural Earth flat map with zoom and pan, and continent dashboard with 7 KPIs and 6 charts. Sequential pulse animation, client-side filters, hover tooltips, and high-res land polygons from land_geojson. Dashboard aggregations run client-side for instant continent tab switching.

Dive Gallery