> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/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>
            由社区维护
        </div>;
};

export const Image = ({img, alt, size = "lg"}) => {
  const normalizedSize = ["sm", "md", "lg"].includes(size) ? size : "lg";
  return <div className={`ch-image-${normalizedSize}`}>
      <Frame>
        <img src={img} alt={alt} />
      </Frame>
    </div>;
};

<CommunityMaintainedBadge />

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

<Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/clickhouse-connect.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=2d6094ac7d7a879f44e63831d65fc479" size="md" border alt="连接到 ClickHouse" width="1536" height="864" data-path="images/integrations/sql-clients/marimo/clickhouse-connect.webp" />

<Steps>
  <Step title="安装带 SQL 支持的 marimo" id="install-marimo-sql">
    ```shell theme={null}
    pip install "marimo[sql]" clickhouse_connect
    marimo edit clickhouse_demo.py
    ```

    这会打开一个在 localhost 上运行的 Web 浏览器。
  </Step>

  <Step title="连接到 ClickHouse。" id="connect-to-clickhouse">
    前往 marimo 编辑器左侧的数据源面板，然后点击“Add database”。

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

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

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

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

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/run-cell.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=4b0b04adf173fe505c95b513d80c94e3" size="md" border alt="运行该单元格以连接到 ClickHouse" width="995" height="283" data-path="images/integrations/sql-clients/marimo/run-cell.webp" />
  </Step>

  <Step title="运行 SQL" id="run-sql">
    设置好连接后，您可以新建一个 SQL 单元格，并选择 ClickHouse 引擎。

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

    本指南将使用 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/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/results.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=eddde02c1c117400f526cde6b5212a97" size="lg" border alt="DataFrame 中的结果" width="947" height="415" data-path="images/integrations/sql-clients/marimo/results.webp" />

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

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

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

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

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/run-app-view.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=6ef7bec53db738b66dfb8dd51a5cdda7" size="md" border alt="运行 App View" width="2209" height="1534" data-path="images/integrations/sql-clients/marimo/run-app-view.webp" />
  </Step>
</Steps>
