Skip to main content

Markdown Visualizations

Markdown visualizations allow for a combination of markdown elements and query variables. You can use it to create a visualization that includes text, images, links, data, iframes, and more!

Getting Started

Markdown reference

Standard markdown syntax is accepted, see a syntax reference here.

Query elements

Data and other elements from the query can also be exposed using Mustache syntax - {{query_element}}. There are a few ways to reference query elements:

  1. Query details drop-down menu inside the vis editor

  2. Click any cell in the data table to copy the markdown syntax

  3. Write the syntax directly (see reference table below)

  • Fields follow the pattern: {{fields.view_name.field_name.property}}
  • Filters follow the pattern: {{filters.view_name.field_name.property}}

Available Query Elements and Syntax Reference

Example query:

Part of the queryElementExample SyntaxExample Output
FieldView name{{fields.order_items.sale_price_sum.view_label}}Order Items
FieldField name{{fields.order_items.sale_price_sum.label}}Sale Price Sum
FieldFirst row value{{result._first.Female.order_items.sale_price_sum.value}}$21.60K
FieldLast row value{{result._last.Female.order_items.sale_price_sum.value}}$28.82K
FieldAny row value (array syntax starting with 0){{result.5.Female.order_items.sale_price_sum.value}}$31.29K
FieldColumn total{{result.totals._first.Female.order_items.sale_price_sum.value}}$870.97K
FieldRow total (array syntax starting with 0){{result.5.row_total.order_items.sale_price_sum.value}}$62.87K
FieldGrand total{{result.totals._first.row_total.order_items.sale_price_sum.value}}$1.63M
FiltersLabel{{filters.users.state.label}}users.state
FiltersSummary{{filters.users.state.summary}}is: California,Virginia

* Note: There are two options for returning the field value: .value will return an interactive value where drilling is enabled, .value_static will return just the raw value with no interactivity.

Visual components

Some special components are also available to help visualize the data.

Change Arrow

Requires two data points to calculate a change. If the change is a positive number, the arrow will be green. If negative, it will be red.

Properties:

  • current: result.0.view_name.field_name.value_static *
  • comparison: result.1.view_name.field_name.value_static

* Note: Use the "value_static" property instead of value here since you need the value and not the drillable element.

Example:

<ChangeArrow current="{{result.0.users.count.value_static}}" comparison="{{result.1.users.count.value_static}}"></ChangeArrow> 

Sparkline

Requires more than one row of data and accepts a field name as a string.

Properties:

  • color: css color
  • field: view_name.field_name
  • height: number
  • reverse: "true" (remove for false)
  • type: 'line' | 'bar' (default line)
  • width: number

Example:

<Sparkline field="users.count" color="cornflowerblue"></Sparkline>

iframes

The markdown visualization also accepts iframes, which can optionally be parameterized with query elements.

By default our iframes are rendered sandboxed so some websites which include features such as popups may be unavailable or incompatible.

Here's a few of our favorite iframe examples:

<iframe width="650" height="450" src="https://embed.windy.com/embed2.html?lat=39.018&lon=-77.539&detailLat=39.018&detailLon=-77.539&width=650&height=450&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1"></iframe>
<iframe src="https://www.google.com/maps/embed/v1/search?q={{result.0.products.brand.value_static}}+in+{{result._first.users.city.value_static}},{{result._first.users.state.value_static}}&key=AIzaSyCXfF4zpXaYkgVaBzj3oZUtmcDAxpdoOGk&" width="100%" height="100%"></iframe>
<iframe width="200" src="https://google.com/search?igu=1&q={{result._first.customers.name.value_static}}+company&tbm=nws&source=lnms&sa=X&ved=2ahUKEwjv1rPg7LmAAxXsFFkFHWTbCYcQ0pQJegQIPxAB&biw=1420&bih=840&dpr=2"></iframe>
<iframe height=250 width=550 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lNAzOJrV-Zk" title="YouTube video player"></iframe>

Data Readout

In the past 12 months, Acme Corp has had **{{result._totals._first.order_items.order_count.value}}** orders made by **{{result._totals._first.users.count.value}}** users, resulting in **{{result._totals._first.order_items.sale_price_sum.value}}** total revenue. 
<br><br>
<Sparkline field="order_items.order_count" color="#ED6C91" height=70% width=100% reverse=true></Sparkline>

KPI with Sparkline

<div style="display:flex; align-items: center; justify-content:center; flex-direction: column;">
<div style="display:flex; align-items: center;flex-direction:column;">
###**{{result._first.users.count.value}}** Users this Month

<p style="font-size: var(--font-sm);"> <ChangeArrow current="{{result.0.users.count.value_static}}" comparison="{{result.1.users.count.value_static}}"></ChangeArrow> last month from {{result.1.users.count.value}}
</p>
</div>
<Sparkline field="users.count" color="#4889DE" height=50% width=70% reverse=true></Sparkline>
</div>

KPI Table

<table>
<thead>
<tr>
<th>Display</th>
<th>Email</th>
<th>Facebook</th>
<th>Organic</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>

<td>**{{result.0.Display.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Display.users.count.value_static}}" comparison="{{result.1.Display.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Display.users.count.value}})</td>

<td>**{{result.0.Email.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Email.users.count.value_static}}" comparison="{{result.1.Email.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Email.users.count.value_static}})</td>

<td>**{{result.0.Facebook.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Facebook.users.count.value_static}}" comparison="{{result.1.Facebook.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Facebook.users.count.value_static}})</td>

<td>**{{result.0.Organic.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Organic.users.count.value_static}}" comparison="{{result.1.Organic.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Organic.users.count.value}})</td>

<td>**{{result.0.Search.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Search.users.count.value_static}}" comparison="{{result.1.Search.users.count.value_static}}"></changearrow> (last month {{result.1.Search.users.count.value}}) </td>

</tr>
<tr>
<td><Sparkline field="Display.users.count" color="cornflowerblue" reverse="true" height="80%"></Sparkline> </td>
<td> <Sparkline field="Email.users.count" color="MediumSeaGreen" reverse="true" height="80%"/> </td>
<td> <Sparkline field="Facebook.users.count" color="gold" reverse="true" height="80%"/> </td>
<td> <Sparkline field="Organic.users.count" color="darkorange" reverse="true" height="80%"/> </td>
<td> <Sparkline field="Search.users.count" color="crimson" reverse="true" height="80%"/> </td>


</tr>
</tbody>
</table>

Record Lookup

<style>
.md-card {
display: grid;
gap: 0 var(--size6);
grid-template-columns: max-content 1fr;
}

.md-card-info {
grid-row: 1 / 1;
grid-column: 2 / 2;
font-size: 14px;
}

.md-card-info h4 {
font-size: 32px;
margin-bottom: 0;
}

.md-card-info p {
margin: 0;
}

.md-profile {
grid-row: 1 / span 2;
grid-column: 1;
}

.md-profile img {
display: block;
width: 200px;
border-radius: 12px;
}

.md-profile p {
text-align: center;
font-size: 8px;
color: var(--color-text1);
margin: 0;
}

.md-card-metrics {
grid-row: 2 / 2;
display: flex;
gap: var(--size4);
margin: 0;
padding: 0;
list-style: none;
}
.md-card-metrics li {
padding-block: var(--size4);
}
.divider {
background-color: var(--color-border2);
width: 1px;
margin-inline: var(--size2);
margin-block: var(--size4);
}
.md-metric-label {
font-size: 14px;
color: var(--color-text2);
}
.md-metric-value {
font-size: 27px;
font-weight: bold;
}

</style>

<div class="md-card">

<div class="md-card-info">
<h4>{{result.0.users.full_name.value}}</h4>
<p><a href="mailto:{{result.0.users.email.value_static}}">{{result.0.users.email.value}}</a></p>
<p>{{result.0.users.city.value}}, {{result.0.users.state.value}} {{result.0.users.zip.value}}
<a href="http://www.google.com/maps/search/?api=1&query={{result.0.users.zip.value_static}}" target="_blank">view map</a>
</p>
</div>

<div class="md-profile">
<img src="https://robohash.org/{{result.0.users.email.value_static}}" />
<p>Robots lovingly delivered by Robohash.org</p>
</div>

<ul class="md-card-metrics">
<li>
<div class="md-metric-value">{{result.0.users.age.value}}</div>
<div class="md-metric-label">{{fields.users.age.label}}</div>
</li>
<li class="divider"></li>
<li>
<div class="md-metric-value">{{result.0.order_items.order_count.value}}</div>
<div class="md-metric-label">{{fields.order_items.order_count.label}}</div>
</li>
<li class="divider"></li>
<li>
<div class="md-metric-value">{{result.0.order_items.sale_price_sum.value}}</div>
<div class="md-metric-label">{{fields.order_items.sale_price_sum.label}}</div>
</li>

</ul>



</div><!-- card -->

Invoice Report

# Invoice 
<img src="https://i.etsystatic.com/21003174/r/il/a9dfd6/4600341262/il_fullxfull.4600341262_kno3.jpg" style="width: 100px"/>


---------------------------------------

Invoice Number: {{result.0.order_items.user_id.value_static}}
Name: {{result.0.users.full_name.value_static}}
Contact: {{result.0.users.full_name.value_static}} • {{result.0.users.email.value_static}}


### Order Summary

<table>
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Item Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{{#result}}
<tr>
<td> {{order_items.order_id.value}} </td>
<td> {{order_items.created_at[date].value}} </td>
<td> {{order_items.count.value}} </td>
<td> {{order_items.sale_price_sum.value}} </td>
</tr>
{{/result}}
</tbody>
</table>


**Grand Total**: {{result.totals.first.order_items.sale_price_sum.value}} (no tax)
<br><br>
### Terms

+ Payments are to be made payable to Initech via Paypal[^1] or Direct Deposit[^2].
+ Grand Total must be paid by the end of [DATE] (30 days).
+ If Grand Total is not paid by the end of [DATE], an late-fee[^3] will be applied to the Grand Total.



[^1]: Paypal e-mail address for payments is <payments@initech.com>.
[^2]: Please contact if you wish to do a Direct Deposit.
[^3]: Late-fee of *2%* interest per-day until paid.