dbt City: SimCity-style dbt Lineage Viewer

dbt City renders your dbt project's DAG as an isometric SimCity-style city. Sources become factories, models become office buildings (sized by connectivity), seeds become parks, and snapshots become warehouses. Schema groups form neighborhoods connected by a street grid that represents data lineage.

Quick Start

Open index.html in any modern browser. That is it: no server, no dependencies, no build step. The included example uses the classic jaffle_shop project.

Controls

Action	Input
Pan	Click + drag, or WASD / arrow keys
Zoom	Scroll wheel, or Q/E / +/- keys
Select node	Click a building
Clear selection	Click empty space or press Escape
Reset view	Press Space
Search	Type in the search box (top bar)
Toggle sprites	Use the "Textures" checkbox (bottom right)

Clicking a building highlights its full upstream and downstream lineage.

Using Your Own dbt Project

1. Generate (or locate) your dbt manifest.json:

dbt compile   # or dbt run, dbt build, etc.
# manifest.json is at target/manifest.json

2. Extract the graph data:

python extract_graph.py target/manifest.json > graph_data.json

3. Open index.html and replace the EMBEDDED_DATA variable at the top of the first <script> block with the contents of your graph_data.json:

const EMBEDDED_DATA = { /* paste your graph_data.json here */ };

Alternatively, remove the EMBEDDED_DATA line entirely and place graph_data.json next to index.html, then serve with any local HTTP server (the file will be fetched automatically):

python -m http.server 8000

graph_data.json Format

{
  "nodes": [
    {
      "id": "model.my_project.my_model",
      "name": "my_model",
      "type": "model",
      "schema": "analytics",
      "description": "...",
      "childCount": 3,
      "parentCount": 2
    }
  ],
  "edges": [
    ["source.my_project.raw.raw_table", "model.my_project.stg_table"]
  ]
}

Node types: model, source, seed, snapshot. The schema field determines neighborhood grouping.