# Build a store performance monitoring dashboard for retail stores in the USA

## **Context**

<div align="left"><figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F8iAlvj1s2Th85m6IvcG5%2Fbeginner%20banner.png?alt=media&#x26;token=10e8f40a-3632-4920-87c3-6b0dca2a6775" alt="Beginner difficulty banner" width="175"><figcaption></figcaption></figure></div>

In this tutorial, you’ll learn how to use CARTO Builder to create an interactive dashboard for visualizing and analyzing retail store performance across the USA. We’ll create two types of layers; one displaying stores in their original geometry using bubbles and another using point geometry aggregated to Spatial Indexes, all easily managed through the CARTO UI.&#x20;

Thanks to this interactive map, you’ll effortlessly identify performance trends and pinpoint the most successful stores where revenue is inversely correlated with surface area. Are you ready to transform your data visualization and analysis skills? Let's dive in!

## **Step-by-Step Guide:**

1. Access the *Maps* from your CARTO Workspace using the Navigation menu and create a "New map".

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/bu1jwJkz48qs7MQQhZqb/image.png" alt=""><figcaption></figcaption></figure>

2. Let's add retail stores as the first data source.&#x20;
   * Select the A*dd source from* button at the bottom left on the page.&#x20;
   * Click on the *CARTO Data Warehouse* connection.
   * Select *Type your own query*.
   * Click on the *Add Source button*.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/2EDmz13dApS2rrtkflgv/image.png" alt=""><figcaption></figcaption></figure>

The SQL Editor panel will be opened.&#x20;

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/ycDbhZryj7pDOY8DrdC4/image.png" alt=""><figcaption></figcaption></figure>

To add retail stores source, run the query below:&#x20;

```sql
SELECT * FROM `carto-demo-data.demo_tables.retail_stores`
```

3. Change the layer name to "Retail Stores". Click over the layer card to start styling the layer.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/0xfIaEgCtEE1lc5NJ1Y0/store_1.gif" alt=""><figcaption></figcaption></figure>

3. Access more Options ![](https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/7p4vjRIC9K257FH158yW/image.png) in the *Fill Color* section and apply “Color based on" using `Size_m2` column. Pick a gradient palette (versus one for a categorical variable), and set the gradient steps to 4.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/WuEn6jgXWRhMxLtj85Vk/image.png" alt=""><figcaption></figcaption></figure>

3. Now click on the options for the *Radius* configuration and in the section “Radius Based On” pick the column `Revenue`. Play with the minimum/maximum size to style the layer as you like.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/CCA4RgHTbedlYZnv7ECI/image.png" alt=""><figcaption></figcaption></figure>

Now that you have styled "Retail stores" layer, you should have a map similar to the below.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/Cw6NATuHrIjSrhXAuC40/image.png" alt=""><figcaption></figcaption></figure>

4. Go to *Widget* tab, click on *New Widget* button and select your SQL Query data source.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/MsOlG65i1k4kIjAb2u3d/image.png" alt=""><figcaption></figcaption></figure>

5. First, we create a [Formula Widget](https://academy.carto.com/building-interactive-maps/solving-geospatial-use-cases/broken-reference) for the Total Revenue. Select the `SUM` operation on the `revenue` field, adjusting the output value format to `currency`. Add a note to indicate we are calculating revenue shown in the viewport. Rename to “Total Revenue”:

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/E1yxL4mELAfsIjDm33Ix/image.png" alt=""><figcaption></figcaption></figure>

6. Next, we will create a widget to filter by store type. Select [Pie Widget](https://academy.carto.com/building-interactive-maps/solving-geospatial-use-cases/broken-reference), choose `COUNT` operation from the list and select the column `storetype`. Make the widget `collapsible` and rename it to “Type of store”.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/rF3GyUJiE8wMdc9oY2mV/image.png" alt=""><figcaption></figcaption></figure>

7. Then, we create a third widget, a [Histogram](https://academy.carto.com/building-interactive-maps/solving-geospatial-use-cases/broken-reference) to filter stores by `revenue`. Set the buckets to `10`, formatting to `currency`, and make widget `collapsible`. Rename to “Stores by revenue”.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/SRY7lyETIF2N38ERMBJM/image.png" alt=""><figcaption></figcaption></figure>

8. Now let’s configure the tooltip. Go to Interactions tab, activate the tooltip and select the field `Storetype`, `Address`, `City`, `State`, `Revenue` and `Size_m2`.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/wc3lBM1uxweUvvBpjjHX/image.png" alt=""><figcaption></figcaption></figure>

9. Let’s also change our basemap. Go to Basemaps tab and select “Voyager” from CARTO.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/y72jOO4O191bFXctz5gw/image.png" alt=""><figcaption></figcaption></figure>

10. Now, we will upload the same data source using SQL Query type and this time we will dynamically aggregate it to Quadbin Spatial Indexes using the UI. To do so, run the following query:

```sql
SELECT * FROM `carto-demo-data.demo_tables.retail_stores`
```

11. The new layer will appear. Rename the layer to "Retail stores (H3)" and using the Layer panel, aggregate it to Quadbin.&#x20;

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/R1lixnKJST4xXVAu0upk/tutorial_quadbin.gif" alt=""><figcaption></figcaption></figure>

11. Change the order of your layer by dragging it after your point "Retail store" layer. In the layer panel, set the Spatial Index resolution to `7` and style it based on `Revenue` using `SUM` as the aggregation. &#x20;

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/GPCR7qCqYhCrTu5YN8Ij/image.png" alt=""><figcaption></figcaption></figure>

11. Finally, set the height of the hexagons to be based on `Size_m2`, multiplying by `20` using `Linear` es the color scale. Then, set the map view to `3D` to analyze the results.&#x20;

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/melfHQ7nRXqB1u0037jf/image.png" alt=""><figcaption></figcaption></figure>

11. Enable map dual view. On the left map disable the "Revenue store (H3)" grid layer, on the right map disable the "Retail stores" layer.

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/fAm8oVGjirOHtO4vkgHz/image.png" alt=""><figcaption></figcaption></figure>

As we can see, in metro areas in the west coast we have more stores of lower surface area, yet their revenues are much higher than rural areas, where we have stores with higher surface areas.

12. Switch back to `single map` view mode. Hide the "Retail stores (H3)" layer. Rename the map to “Monitor retail store performance” and add a rich description using [Markdown syntax](https://www.markdownguide.org/basic-syntax/).

```markdown
### Retail Store Performance Monitoring Dashboard

![Image: Global Populated Places](https://app-gallery.cartocdn.com/builder/Performance.jpg)

Unlock insights into the performance of retail stores across the USA with this interactive map, crafted using CARTO Builder. 

#### Key Features

- **Diverse Layers:**
  Discover two distinct layers offering individual store performance visualization and aggregated views using Spatial Indexes, offering a comprehensive perspective of retail dynamics.

- **Interactive Widgets:**
  Engage with user-friendly widgets, allowing effortless data manipulation, trend identification, and in-depth analysis, transforming static data into actionable insights.

- **Revenue and Surface Area Analytics:**
  Analyze the complex relationship between revenue and surface area, unveiling patterns, and opportunities to optimize store performance and maximize profits.
```

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/yhVYEjNKaHzTuYfHlI23/image.png" alt=""><figcaption></figcaption></figure>

11. We can make the map public and share it online with our colleagues. For more details, see [Publishing and sharing maps](https://docs.carto.com/carto-user-manual/maps/publishing-and-sharing-maps).

<figure><img src="https://content.gitbook.com/content/FEElAdsRIl9DzfMhbRlB/blobs/iG7YiGOraWEoBdTOpTsU/image.png" alt=""><figcaption></figcaption></figure>

11. Finally, we can visualize the result.

{% embed url="<https://clausa.app.carto.com/map/0d777e5d-1fb8-4ecd-a0ed-11b64ae8e45e>" %}
