usage.html

---
layout: default
title: Usage
---

<div class="content">

<h2>Interactivity</h2>

<p>There are several ways to interact with our demo using the mouse, as demonstrated below. Touch interactivity is not currently supported.</p>

{% for control in site.data.controls %}
<h4>{{ control.title }}</h4>
<div class="columns">
  <div class="column is-narrow">
    <figure class="box is-marginless" style="max-width: {{ control.width }}px;">
      <img src="images/{{ control.image }}" width="{{ control.width }}"><br/>
      <figcaption class="is-size-7 has-text-grey">
        {{ control.caption }}
      </figcaption>
    </figure>
  </div>

  <div class="column">
    <p>{{ control.details }}</p>
  </div>
</div>
{% endfor %}

<h2>Interpretation</h2>

<p>To illustrate how to interpret an animated SPLOM, individual subplots from the <a href="index.html?source=diamonds">diamonds</a> dataset will be shown below with a red arrow <i class="fa fa-arrow-left" style="color: red;"></i>
 to highlight the example region.</p>

<table class="table">
  <thead>
    <tr>
      <th nowrap>Example</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    {% for item in site.data.interpretation %}
    <tr>
      <td class="is-size-7 has-text-grey has-text-centered" style="line-height: 1;">
        <img src="images/{{ item.image }}" width="{{ item.width }}"><br/>
        {{ item.caption }}
      </td>

      <td>{{ item.details }}</td>

    </tr>
    {% endfor %}
  </tbody>
</table>

<p>Regions with both <strong>high density and high diversity</strong> will result in the most movement and color flickering, bringing attention to regions that could potentially be misinterpreted due to overdraw in static SPLOMs.</p>

<h2>Advanced Usage</h2>

<p>Our tool supports the following URL query parameters for advanced users. Default values are provided in <strong>bold</strong>.</p>

<table class="table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th nowrap>Possible Values</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    {% for param in site.data.params %}
    <tr>
      <td><code>{{ param.name }}</code></td>
      <td>{% for item in param.values %}
        {% unless item.nolink %}<a href="index.html?{{ param.name }}={{ item.value }}">{% endunless %}{% if item.default %}<strong>{% endif %}{{ item.value }}{% if item.default %}</strong>{% endif %}{% unless forloop.last %}{% unless item.nolink %}</a>{% endunless %},{% endunless %}
      {% endfor %}</td>
      <td>{{ param.about }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<p>Multiple parameters may be combined together using the ampersand <code>&amp;</code> symbol. For example, consider the following:</p>

<pre><a href="index.html?prerender=false&shape=square&encoding=open&rows=4&scale=1.25" class="has-text-grey">index.html?<span class="has-text-danger">prerender</span>=<span class="has-text-primary">false</span>&amp;<span class="has-text-danger">shape</span>=<span class="has-text-primary">square</span>&amp;<span class="has-text-danger">encoding</span>=<span class="has-text-primary">open</span>&amp;<span class="has-text-danger">rows</span>=<span class="has-text-primary">4</span>&amp;<span class="has-text-danger">scale</span>=<span class="has-text-primary">1.25</span></a>
</pre>

<p>This set of parameters will disable prerendering, use square shapes with no fill and an outline colored by class, animate 4 rows per frame, and use a 25% larger size for the SPLOM.</p>

<h2>Point Encodings</h2>

<p>Using the URL parameters above, it is possible to use the following point encodings in our tool:</p>

{% for param in site.data.params %}{%
  case param.name %}{%
    when 'encoding' %}{%
      assign encodings = param.values %}{%
    when 'shape' %}{%
      assign shapes = param.values %}{%
    endcase %}{%
endfor %}

<table class="table" style="width: auto;">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th><code>circle</code></th>
      <th><code>square</code></th>
    </tr>
  </thead>

  <tbody>
    {% for encoding in encodings %}
    <tr>
      <th><code>{{ encoding.value }}</code></th>
      {% for shape in shapes %}
      <td>
        <a href="index.html?encoding={{ encoding.value }}&shape={{ shape.value }}">
          <img src="images/encoding-{{ shape.value }}-{{ encoding.value }}.png" width="124">
        </a>
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

<p>Click on any image above to use the shape and encoding values depicted. Some combinations (such as circles combined with color blending) are slower to load.</p>

</div>