Hamilton Studio
ProjectsWritingSounds

© 2026 daniel hamilton ·raleigh, nc

Back to projects

Census

2023

A hackathon-winning canvas-centered visualization giving data teams a bird's-eye view of their entire pipeline.

data infrastructureproduct designcanvassystemsfigma
Panorama — entity relationship view showing All Users, All Events, and Purchased in Last 30 connected with typed relationship edges

Data teams face a structural contradiction. Their work is fundamentally relational: data flows from sources, through models, into entities and segments, and out to destinations. But almost every tool in their stack shows them one piece at a time. A source here, a sync log there, a segment builder in a third tab. The graph is invisible.

Panorama is the design response to that contradiction. It's a canvas-centered interface built inside Census that makes the entire data pipeline visible at once, letting teams move between altitude and detail without losing their place.

Three altitudes, one canvas

The design is organized around zoom as a semantic gesture, not just a UI affordance.

At 0%, the canvas is a strategic overview. Colored bars and node grids give teams a population-level view: how many dbt models, how many Looker models, how many entities, how many segments, how many destinations. The shape of a data architecture, its scale, balance, and anomalies, becomes visible in a glance. Yellow for Looker, blue for dbt, green for segments, gray for destinations.

At 75%, individual cards become readable. Data sources show their region, object count, and sync depth. Models show their column counts. Entities show their relationship to segments. Destinations show sync frequency and availability status. The canvas becomes a working document, not just a map.

At 100%, column-level fidelity. Clicking into a dbt model and a destination reveals the exact field mapping between them: which columns flow where, which transformations are in play, where the schema mismatch might be hiding. The domain → Email Domain mapping, the type mismatches, the coverage gaps: all of it readable without navigating to a separate config screen.

Entity relationships as a first-class view

One of the harder design problems was entity relationships. Census's entity model allows teams to define Users, Events, and Objects and connect them with typed relationships (One to Many, Many to Many). This is powerful, but invisible in list-based UIs.

The Entity View separates this concern from the pipeline view entirely. Nodes float on the canvas with color-coded type indicators. Relationship edges carry semantic labels. Clicking any entity opens a configuration panel showing its data source, schema columns, and relationship definitions, without leaving the canvas.

The result is a view that works equally well for explaining the data model to a stakeholder and for debugging why a segment isn't resolving correctly.

The start screen as orientation

Every new Panorama session begins with a modal: a gradient-rich welcome card that shows a miniature of the canvas alongside the product's core promise. "The Big Picture. All in Census." It's not onboarding in the checkbox sense. It's orientation. A moment to see the shape of what you're entering before you're inside it.

Design notes

The interface deliberately carries a different visual register than the rest of Census's product surface. The dot-grid canvas, the orthogonal connection lines, the thick colored header bars: these borrow the visual grammar of infrastructure tools (Terraform, Retool, n8n) while staying legible to data analysts who live in spreadsheets. It's a canvas for people who don't usually work on canvases.

The color system is load-bearing: cyan for sources (data coming in), blue for models and entities (defined structure), yellow for Looker (a specific integration type), green for segments (derived audiences), gray for destinations (data going out). The palette is consistent across zoom levels so the abstract view and the detail view feel like the same space.

Connector lines use orthogonal routing: right-angle elbows, not bezier curves. Bezier curves feel like diagrams; orthogonal lines feel like wiring. Panorama is closer to wiring.

01

Design Process

7 slides · click or use arrow keys
01 — Panorama Definition
01 — Panorama Definition
1 / 7
02

Three Altitudes

0% → 75% → 100%
0% overview — the full pipeline as abstract colored groups and connection lines
0%The entire pipeline at maximum distance — sources, models, entities, and destinations read as abstract groups connected by flow lines
25% — pipeline structure becoming legible, groups with visible node counts
75% — individual pipeline cards readable, Snowflake source selected
25%Pipeline structure legible — groups and node counts visible but individual cards remain abstract
75%Cards become readable — Snowflake source selected, downstream relationships highlighted
100% — prod.companies and Salesforce both expanded, column mapping highlighted
Entity view — relationship diagram with the All Events configuration panel open
100%Full detail — prod.companies and Salesforce expanded, domain-to-Email Domain column mapping highlighted in amber
Entity viewRelationship canvas with All Events configuration panel open — data type, source, and related syncs
Entities highlighted for entity canvas entry — the transition from pipeline to relationship view
TransitionEntities illuminate as you zoom out from detail view, signaling the entry point to the relationship canvas
03

Interactive Prototype

pipeline · entities · two views
C
Panorama/Entity Detail View
100%
21 Segments
7 Entities
11 Destinations
Search
Expand cards with + · drag nodes · scroll to zoom
Data Sources1
Snowflake
Snowflake
iq-44393.us-east-1
3 Objects
3 Entities
4 Columns
6 Segments
5/7 Fields
2 Destinations
dbtdbt Models2
dbt
prod.companies
7 Columns
dbt
prod.users
6 Columns
Entities3
All Users
3 Segments
+
All Events
2 Segments
+
Purchased in Last 30
1 Segment
+
Segments6
Active Last 30 Days
All Users · 12,543 records
Churned Accounts
All Users · 2,891 records
Enterprise Plan
All Users · 847 records
Purchased Last 30 Days
All Events · 4,120 records
New Signups This Week
All Users · 320 records
High LTV Accounts
All Objects · 1,203 records
Destinations3
Salesforce
Salesforce
3 Objects · 8 Columns
Every 15 minutes
Available for Sync
Marketo
Marketo
2 Objects · 5 Columns
Every 30 minutes
Available for Sync
Zendesk
Zendesk
3 Objects · 6 Columns
Every 60 minutes
Available for Sync
Mini Map
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Enter Panorama

Pipeline view: expand cards with + to reveal column mappings · Entities view: click nodes to inspect relationships · intro button resets

Tech: React, TypeScript, SVG canvas, Figma

Role: Product design, systems design, Figma prototyping

Context: Census · Data pipeline visualization