How to Reference Data in Evidence: Using Curly Braces

TL;DR:

For a query named my_query and an input named my_input:

Background

One of the more frequent questions asked in our Slack community is this:

I don’t know if I should be using '${my_query}', ${my_query}, {my_query}, or my_query to reference my data in Evidence.

Let’s start with a bit of background.

Evidence is powered by SvelteKit

Evidence is powered by SvelteKit, which is a JavaScript framework.

A typical SvelteKit page looks like this:

<script>
  let framework = 'SvelteKit';
</script>

<h1>Hello World</h1>
<p>Welcome to {framework}</p>
<!-- Result: Welcome to SvelteKit -->

When you are writing Svelte, you define variables in the <script> tag, and then you can use curly braces to reference them in the rest of the page.

You can also reference variables in component properties. Here you also use curly braces to reference the variable.

<script>
  import Hello from './Hello.svelte';
  let framework = 'SvelteKit';
</script>

<div>
    <Hello 
        name={framework}
    />
</div>

Supporting Markdown with MDSveX

However, since data analysts are typically not familar with Javascript, we try to minimise the amount of Javascript you have to write, or learn.

We use MDSveX, which allows you to write Markdown, instead of HTML.

---
framework: MDSveX
---

# Hello World

Welcome to {framework}
<!-- Result: Welcome to MDSveX -->

Here, the variable is actually defined in the frontmatter, and we use curly braces to reference it in the rest of the page.

Evidence adds SQL and Custom Components

On top of this, Evidence allows you to write SQL queries, and they are saved in JavaScript objects - the object name is defined by the SQL query name.

```sql country_sales
select 'Canada' as country, 100 as sales union all
select 'USA' as country, 200 as sales union all
select 'Mexico' as country, 300 as sales
```

# Hello World


Welcome to {country_sales[0].country}
<!-- Result: Welcome to Canada -->

We also bring a lot of prebuilt components to Evidence. We import these behind the scenes for you, so you don’t have to. This means you can write code like:

```sql country_sales
select 'Canada' as country, 100 as sales union all
select 'USA' as country, 200 as sales union all
select 'Mexico' as country, 300 as sales
```

<DataTable data={country_sales} />

How do I reference my data in Evidence?

With the primer out of the way, let’s see the ways you can reference your data in Evidence.

Markdown

To use a query in Markdown, you can use curly braces to reference it.

```sql country_sales
select 'Canada' as country, 100 as sales union all
select 'USA' as country, 200 as sales union all
select 'Mexico' as country, 300 as sales
```

Welcome to {country_sales[0].country}
<!-- Result: Welcome to Canada -->

Here, we are referencing the first row of the country_sales query, and we are getting the country column.

We also use JavaScript variables to define the results of input components. They are stored in a special object called inputs.

<Dropdown name=country/>
    <DropdownOption value="Canada" />
    <DropdownOption value="USA" />
    <DropdownOption value="Mexico" />
</Dropdown>

Welcome to {inputs.country.value}
<!-- Result: Welcome to Canada -->

Components

When you pass a query to a component property, you can use curly braces to reference it.

```sql country_sales
select 'Canada' as country, 100 as sales union all
select 'USA' as country, 200 as sales union all
select 'Mexico' as country, 300 as sales
```

<DataTable data={country_sales} />

SQL Queries

When referencing JavaScript variables within SQL queries, use the $ prefix with curly braces. This follows JavaScript’s template literal syntax:

• For numbers: Use ${variable} directly
• For strings: Wrap in SQL quotes like '${variable}'

<Slider name=sales min=0 max=500/>
<Dropdown name=country/>
    <DropdownOption value="Canada" />
    <DropdownOption value="USA" />
    <DropdownOption value="Mexico" />
</Dropdown>

```sql filtered_sales
select *
from orders
where sales > ${inputs.sales}  -- Number: no quotes needed
and country = '${inputs.country.value}'  -- String: needs quotes
```

Note: Some input components have a value property, and some don’t. This is because some input components are not simple values, but rather objects with multiple properties. Refer to the docs for each component for more info.

Advanced: Query Functions

Evidence also comes with a number of query functions that you can use to manipulate your data inside components.

These functions take SQL strings as arguments (denoted by the backticks), so use the $ sign to reference JS variables.

```sql categories
select 
    category as category_name
from orders
```

```sql orders_by_category
select 
    category,
    item,
    sum(sales) as total_sales
from orders
group by all
```

{#each categories as row}

<BarChart 
    data={orders_by_category.where(`category = '${row.category_name}'`)}
/>

{/each}

Advanced: Component Object Properties

Some components properties accept JavaScript objects.

For example, the BarChart component accepts an echartsOptions property, which is a JavaScript object.

In this case, the echartsOptions content is already an object, so we dont need to wrap the query in extra curly braces to reference it.

```sql country_sales
select 'Canada' as country, 100 as sales union all
select 'USA' as country, 200 as sales union all
select 'Mexico' as country, 300 as sales
```

<BarChart 
    data={country_sales}
    echartsOptions={{
        yAxis: {
            max: country_sales[3].sales
        }
    }}
/>