# Subgrounds Workshop

#### See a top to bottom exploration of Subgrounds in our 3 part workshop in collaboration with MetricsDAO. In this workshop we show you how to use a Python library to query and build on The Graph.

* [**Part 1**](#part1)
* [**Part 2**](#part-2)
* [**Part 3**](#part-3)

## **Part 1:**

**This session is focused on Subgrounds' core features and serve as a guide on how to start and complete data analytics using Subgrounds.**

Participants can expect the following topics to be covered:

* **Intro:** Motivations for Subgrounds and some GraphQL basics
* **FieldPaths:** What are they and how do we combine them to create subgrounds requests?
* **`subgrounds.query` method:** the simplest way to get data
* **`subgrounds.query_df` method:** get data in a flattened representation, returned in a pandas DataFrame
* **`subgrounds.query_timeseries` method:** query and return regularized timeseries data
  * **Note:** this is planned for the `v0.1.0` release and is not yet publicly available.
* Creating and using `SyntheticFields`&#x20;
* Querying non-Subgraph APIs with Subgrounds

{% embed url="<https://www.youtube.com/watch?t=1s&v=osQft2dRm6A>" %}

#### Part 1 Resources:

{% tabs %}
{% tab title="Workshop Slides" %}
{% file src="<https://840468685-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6D6BR3ilTVkwaiCQCHml%2Fuploads%2FeU9hIzCmaKKvZy84njsw%2FSubgrounds%20Workshop%20%231%20Under%20the%20Hood.pdf?alt=media&token=f8a4287e-2193-440e-9f77-840fef53af91>" %}
{% endtab %}

{% tab title="Workshop.ipynb" %}
{% file src="<https://840468685-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6D6BR3ilTVkwaiCQCHml%2Fuploads%2FFF20aWHIj2EsO5f5XlhO%2FSubgrounds%20Part%201%20binary.ipynb?alt=media&token=e21ebdd9-7705-4ef2-b64f-529279852a69>" %}
{% endtab %}
{% endtabs %}

## Part 2

**This session introduces building full featured analytics dashboards using Subgrounds built-in data visualization library called Dash. During this part, we will take a "live build" approach and create a simple klimaDAO analytics dashboard in this session. The dashboard will explore KlimaDAOs treasury and general protocol metrics.**

**Topics:**

* Introduction to dash and data visualizations with dash
* **The Code:** Preparing Subgrounds for your data exploration
* **The Data:** Interfacing Subgrounds with Dash
* **App Layout section:** Building and assembling your dashboard components and layout
* **Callback:** Connecting visualizations to Subgrounds queries
* Running your app locally
* Deploying your app to Heroku intro

{% embed url="<https://www.youtube.com/watch?v=zU2JGADVl_s>" %}

**Resources:**

{% tabs %}
{% tab title="Workshop Slides" %}
{% file src="<https://840468685-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6D6BR3ilTVkwaiCQCHml%2Fuploads%2FuQKCAHfQjJQ0T5as5jzR%2FSubgrounds%20Workshop%20%232%20Building%20Subgrounds%20Powered%20Apps.pdf?alt=media&token=be9b9121-5b34-4841-a96b-7402759ec137>" %}
{% endtab %}

{% tab title="Github" %}
{% embed url="<https://github.com/Tachikoma000/Subgrounds_visualization_with_dash>" %}
Repo for Subgrounds visualizations with Dash
{% endembed %}
{% endtab %}

{% tab title="Dash Documentation" %}
{% embed url="<https://dash.plotly.com/introduction>" %}
{% endtab %}

{% tab title="Dash Components" %}
{% embed url="<https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/>" %}
Quickstart for Dash Bootstrap components
{% endembed %}
{% endtab %}
{% endtabs %}

## Part 3

**The final session is a continuation of part two, except that rather than deploying locally to your machine, we will guide you on deploying to the cloud (Heroku), generating your unique URL, and sharing your dashboard as an app.**

Topics

* Introduction to Heroku&#x20;
* Setting up Heroku account&#x20;
* Installing Heroku CLI&#x20;
* Creating App project folder on your IDE&#x20;
* Installing necessary App project libraries&#x20;
* Create necessary files for Heroku server&#x20;
* Deploy App to Heroku

{% embed url="<https://www.youtube.com/watch?v=ye9JrDubRtI>" %}

**Resources:**
