> ## Documentation Index
> Fetch the complete documentation index at: https://docs.speckle.systems/llms.txt
> Use this file to discover all available pages before exploring further.

# Compare parametric design options from Grasshopper

> Mark Data Objects as design options, attach numeric properties, publish to Speckle, and explore all variants side-by-side in a dashboard with 3D views and a parallel coordinates chart.

Use this guide when a Grasshopper script produces multiple versions of the same design — different heights, configurations, densities, or any other parameter — and each version has numeric properties you want to compare. It covers marking Data Objects as design options, structuring metrics, publishing to Speckle, and reading results in a dashboard.

<Note>
  This guide assumes familiarity with the **Data Object** and **Send**
  components in Grasshopper. If you are new to Speckle in Grasshopper, start
  with the [Grasshopper connector](/connectors/grasshopper/grasshopper) and
  [Data Objects](/connectors/grasshopper/grasshopper-objects) guides.
</Note>

## Tag design options in Grasshopper

<Steps>
  <Step title="Create a Data Object for each design variant">
    Use a **Data Object** component for each variant. Connect the variant's geometry to the **Geometries** input and set a descriptive **Name** (e.g. `"Option A"`, `"Variant · H2.0 · N4"`).

    Each variant appears as a named object on the canvas.
  </Step>

  <Step title="Mark the Data Object as a design option">
    Right-click the **Data Object** component and select **Mark as Design Option**.

    The component displays a **Design Option** label to confirm it is enabled.

    <Note>
      This sets the `isDesignOption` flag on the object automatically. Data Objects without this flag are ignored by the widget.
    </Note>

    <Frame>
      <img src="https://mintcdn.com/speckle/BGTO1TERQpivDJUd/images/workflows/design-explorer-mark-as-design-option.png?fit=max&auto=format&n=BGTO1TERQpivDJUd&q=85&s=86a5c8456b043a8050415f55c5b4ee78" alt="Grasshopper Data Object component right-click menu showing Mark as Design Option" width="1620" height="540" data-path="images/workflows/design-explorer-mark-as-design-option.png" />
    </Frame>
  </Step>

  <Step title="Add numeric properties as performance metrics">
    In the **Properties** input, add numeric values that describe each variant's performance or characteristics. Properties shared across **all** design option objects become the chart axes — any property present on some options but not others is excluded from the parallel coordinates chart.

    Group related values under a parent key. The widget flattens nested properties using `::` as a separator and uses the last segment as the axis label.

    For example, this structure:

    ```
    cost
      material: 42000
      fabrication: 8500
    performance
      score: 87
      efficiency: 0.74
    geometry
      height_m: 2.0
      panel_count: 4
    ```

    produces chart axes labelled **material**, **fabrication**, **score**, **efficiency**, **height\_m**, and **panel\_count**. Keep leaf names short — they appear as axis labels and in the properties panel.

    The component preview shows all property keys and values alongside the Design Option label.
  </Step>
</Steps>

## Publish to Speckle

<Steps>
  <Step title="Connect the list to a Send component">
    Connect the merged list to a **Send** component. Set the project and a model name that reflects the study (e.g. `facade-study`, `tower-options`).

    The Send component preview shows the correct object count.
  </Step>

  <Step title="Publish and verify">
    Click **Publish**. Open the model in the Speckle web viewer and confirm each variant appears as a separate selectable object with its properties visible in the properties panel.

    All variants are published and ready to connect to a dashboard.
  </Step>
</Steps>

## Add the widget to a dashboard

<Steps>
  <Step title="Open or create a dashboard">
    From your Speckle workspace, open **Intelligence** and create a new dashboard, or open an existing one in edit mode.

    The dashboard editor opens with the widget panel visible on the left.
  </Step>

  <Step title="Drag a Design Explorer widget onto the canvas">
    In the widget panel, open the **Grasshopper** group and drag a **Design Explorer** widget onto the canvas.

    An empty Design Explorer widget appears on the canvas.
  </Step>

  <Step title="Connect to your Grasshopper model">
    Click the widget to open its sidebar. Under **Data sources**, click **Add data source** and select the project and model you published to.

    The widget loads and displays a thumbnail card for each design option.
  </Step>
</Steps>

## Read the results

The widget shows three views simultaneously.

### Parallel coordinates chart

One line per option runs across all metric axes. Hover a line to highlight the matching tile in the grid. Click a line to open that option in detail view. The chart makes trade-offs visible: options that score well on one axis often score worse on another.

### Grid

The grid shows a thumbnail card for each option. Thumbnails are captured automatically from the live 3D model — no screenshots needed. Use the **Sort by** dropdown to rank cards by any metric.

<Frame>
  <img src="https://mintcdn.com/speckle/BGTO1TERQpivDJUd/images/workflows/design-explorer-grid-view.png?fit=max&auto=format&n=BGTO1TERQpivDJUd&q=85&s=d64e1cdebad4409c42b6036f9d6a70cf" alt="Design Explorer grid view showing thumbnail cards with rank badges and sort dropdown" width="1620" height="1080" data-path="images/workflows/design-explorer-grid-view.png" />
</Frame>

### Detail view

Click any tile or chart line to open detail view for that option:

* **Properties panel** (left): all metrics as key-value pairs
* **3D viewer** (centre): the selected option's geometry in isolation, with fit-to-view and orthographic toggle
* **Filmstrip** (right): the full ranked list for switching between options without returning to the grid

Click the option name in the header bar to return to the grid.

<Frame>
  <img src="https://mintcdn.com/speckle/BGTO1TERQpivDJUd/images/workflows/design-explorer-detail-view.png?fit=max&auto=format&n=BGTO1TERQpivDJUd&q=85&s=d06637b816d33eea4ee1163f987ab0d1" alt="Design Explorer detail view with properties panel, 3D viewer, and options list" width="1620" height="1080" data-path="images/workflows/design-explorer-detail-view.png" />
</Frame>

<Tip>
  In detail view, the divider between the 3D viewer and the options list is
  draggable. Drag it to give more space to whichever panel you need.
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="Why does the widget say 'Design Explorer requires a Grasshopper data source'?">
    The widget checks the source application of the connected model. Only models
    published from the Grasshopper connector are supported. Connect a different
    data source or re-publish the model from Grasshopper.
  </Accordion>

  <Accordion title="Why does the widget say 'No design options found'?">
    Check that each Data Object has been marked as a design option via the
    right-click menu (**Mark as Design Option**). Also confirm the objects are
    at the top level of the model, not nested inside Collections.
  </Accordion>

  <Accordion title="Why are some of my properties missing from the chart?">
    Only properties that are present on **all** design option objects appear as
    chart axes. If a property is missing on even one object, it is excluded.
    Check that every Data Object has the same set of numeric property keys.
  </Accordion>

  <Accordion title="What happens to thumbnails when I reload the page?">
    Thumbnails are recaptured from the live model on each load. They are not
    stored between sessions. Cards are interactive immediately; thumbnails fill
    in progressively in the background.
  </Accordion>
</AccordionGroup>

## See also

* [Grasshopper connector](/connectors/grasshopper/grasshopper)
* [Data Objects in Grasshopper](/connectors/grasshopper/grasshopper-objects)
* [Intelligence Dashboards](/analytics/intelligence-dashboards)