> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-fix-nav-issues.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> marimo 是一款用于与数据交互的新一代 Python 笔记本

# 结合 ClickHouse 使用 marimo

export const CommunityMaintainedBadge = () => {
  return <div className="CommunityMaintainedBadge">
            <div className="CommunityMaintainedIcon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                <path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
            </svg>
        </div>
            Community Maintained
        </div>;
};

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

[marimo](https://marimo.io/) 是一款开源的 Python 响应式笔记本，内置 SQL。运行某个单元格或与某个 UI 元素交互时，marimo 会自动运行受影响的单元格 (或将其标记为已过时) ，从而保持代码与输出一致，并在 bug 发生前防患于未然。每个 marimo 笔记本都以纯 Python 格式存储，可作为脚本执行，也可部署为应用。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/clickhouse-connect.gif?s=e4444eb3b097e38a5e2704368b315dd7" size="md" border alt="连接到 ClickHouse" width="1536" height="864" data-path="images/integrations/sql-clients/marimo/clickhouse-connect.gif" />

<div id="install-marimo-sql">
  ## 1. 安装支持 SQL 的 marimo
</div>

```shell theme={null}
pip install "marimo[sql]" clickhouse_connect
marimo edit clickhouse_demo.py
```

这应该会在本机 (localhost) 上打开一个 Web 浏览器。

<div id="connect-to-clickhouse">
  ## 2. 连接到 ClickHouse。
</div>

在 marimo 编辑器左侧的数据源面板中，点击“Add database”。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/panel-arrow.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=1a7a8fd365a58a2c0e384f608e6243e5" size="sm" border alt="添加新数据库" width="491" height="561" data-path="images/integrations/sql-clients/marimo/panel-arrow.png" />

系统会提示你填写数据库信息。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/OHCdlXRrniGWimcZ/images/integrations/sql-clients/marimo/add-db-details.png?fit=max&auto=format&n=OHCdlXRrniGWimcZ&q=85&s=1b5659d759834d07398bd6a95b0e4465" size="md" border alt="填写数据库信息" width="818" height="487" data-path="images/integrations/sql-clients/marimo/add-db-details.png" />

随后，你会看到一个可运行的单元格，用于建立连接。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/run-cell.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=6e5be921d5319027c13474246a431147" size="md" border alt="运行单元格以连接到 ClickHouse" width="995" height="283" data-path="images/integrations/sql-clients/marimo/run-cell.png" />

<div id="run-sql">
  ## 3. 运行 SQL
</div>

设置好连接后，您可以新建一个 SQL 单元格，并选择 ClickHouse 引擎。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/choose-sql-engine.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=91cb3f8da6211871526129f9e40557a7" size="md" border alt="选择 SQL 引擎" width="2762" height="709" data-path="images/integrations/sql-clients/marimo/choose-sql-engine.png" />

本指南将使用 New York Taxi 数据集。

```sql theme={null}
CREATE TABLE trips (
    trip_id             UInt32,
    pickup_datetime     DateTime,
    dropoff_datetime    DateTime,
    pickup_longitude    Nullable(Float64),
    pickup_latitude     Nullable(Float64),
    dropoff_longitude   Nullable(Float64),
    dropoff_latitude    Nullable(Float64),
    passenger_count     UInt8,
    trip_distance       Float32,
    fare_amount         Float32,
    extra               Float32,
    tip_amount          Float32,
    tolls_amount        Float32,
    total_amount        Float32,
    payment_type        Enum('CSH' = 1, 'CRE' = 2, 'NOC' = 3, 'DIS' = 4, 'UNK' = 5),
    pickup_ntaname      LowCardinality(String),
    dropoff_ntaname     LowCardinality(String)
)
ENGINE = MergeTree
PRIMARY KEY (pickup_datetime, dropoff_datetime);
```

```sql theme={null}
INSERT INTO trips
SELECT
    trip_id,
    pickup_datetime,
    dropoff_datetime,
    pickup_longitude,
    pickup_latitude,
    dropoff_longitude,
    dropoff_latitude,
    passenger_count,
    trip_distance,
    fare_amount,
    extra,
    tip_amount,
    tolls_amount,
    total_amount,
    payment_type,
    pickup_ntaname,
    dropoff_ntaname
FROM gcs(
    'https://storage.googleapis.com/clickhouse-public-datasets/nyc-taxi/trips_0.gz',
    'TabSeparatedWithNames'
);
```

```sql theme={null}
SELECT * FROM trips LIMIT 1000;
```

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/results.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=d4ff3465f52b48f2e44dc5be952b997e" size="lg" border alt="DataFrame 中的结果" width="947" height="415" data-path="images/integrations/sql-clients/marimo/results.png" />

现在，你已经可以在 DataFrame 中查看结果了。接下来，我想将某个给定上车地点对应的最高费用下车点可视化。marimo 提供了多个 UI 组件来帮助你实现这一点。我会使用下拉菜单选择地点，并用 Altair 绘制图表。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/dropdown-cell-chart.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=7bf4803081a52700efd91474c14395d8" size="lg" border alt="下拉菜单、表和图表的组合" width="2720" height="2115" data-path="images/integrations/sql-clients/marimo/dropdown-cell-chart.png" />

marimo 的反应式执行模型也扩展到了 SQL 查询中，因此你对 SQL 的更改会自动触发依赖单元的后续计算 (对于开销较大的计算，也可以选择仅将单元标记为过时) 。因此，查询一更新，图表和表也会随之变化。

你还可以切换到 App View，以获得一个更简洁的数据探索界面。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/ldyQZWT-cIRJh7wo/images/integrations/sql-clients/marimo/run-app-view.png?fit=max&auto=format&n=ldyQZWT-cIRJh7wo&q=85&s=d13de1f559c0b58d4c8f15828e7bbb96" size="md" border alt="运行 App View" width="2209" height="1534" data-path="images/integrations/sql-clients/marimo/run-app-view.png" />
