#165 data voyager clarity

app/src/assets/css/modules/_misc.scss

@@ -206,8 +206,8 @@
 }
 
 .howto_item {
-    cursor: pointer;
     &-header{
+        cursor: pointer;
         display: flex;
         display: -webkit-box;
         display: -ms-flexbox;

app/src/assets/css/modules/_vega.scss

@@ -84,10 +84,13 @@
 }
 
 .datavoyager {
-    margin: 0rem 2.5rem;
+    margin: 1rem 2.5rem;
     &-title {
         font-weight: 500;
-        color: $primary-grey
+        color: $primary-grey;
+    }
+    ul {
+        padding-left: 2.5rem;
     }
     #voyager-embed {
         background: $primary-white;

app/src/components/accordion.vue

@@ -1,9 +1,10 @@
 <template>
 <div class="accordion">
   <div @click="toggleOpen">
-    <md-toolbar>
+    <md-toolbar :class="dense ? 'md-dense' :''">
       <div class="accordion-toolbar-row">
-        <h3 class="md-title">{{title}}</h3>
+        <h4 v-if="dense" class="md-subheader">{{title}}</h4>
+        <h3 v-else class="md-title">{{title}}</h3>
         <div class="accordion-icons">
           <md-icon v-show="!open">
             expand_more
@@ -32,6 +33,10 @@ export default Vue.component('accordion', {
     },
     title: {
       type: String
+    },
+    dense: {
+      type: Boolean,
+      default: () => false
     }
   },
   data () {

app/src/pages/explorer/chart/datavoyager/data-voyager-page.html

@@ -46,6 +46,52 @@
       <span class="datavoyager-title">Data Voyager</span>
       <span v-if="!isNewChart && chart && chart.title">: {{chart.title}}</span>
     </div>
+    <div class="datavoyager-content">
+      <accordion
+        :startOpen="true"
+        title="Instructions"
+        :dense="true"
+        class="datavoyager"
+      >
+          <div class="datavoyager">
+            <p>
+              Explore the data by dragging fields from the "<b>Data</b>" panel into 
+              slots in the "<b>Encoding</b>" panel.
+            </p>
+            <p>
+              If no fields are selected, Data Voyager generates 
+              <b>Univariate Summary</b> charts of the data.
+            </p>
+            <p>
+              Clicking on the "<b>Specify</b>" (<md-icon>list</md-icon>) button for 
+              an individual chart in the "<b>Related Views</b>" panel prompts Data 
+              Voyager to generate additional recommended charts based on the selection.
+            </p>
+            <ul>
+              <li>
+                <b>Wildcards</b>: Allow users to include fields without selecting a 
+                specific channel (encoding slot). 
+                Data Voyager will suggest appropriate encodings for that field.
+              </li>
+              <li>
+                <b>Filters</b>: 
+                Dropping a field in this slot provides filtering options on that field.
+              </li>
+            </ul>
+            <p>
+              For more details, see the 
+              <a href="https://data-voyager.gitbook.io/voyager/" target="_blank" rel="noopener noreferrer">
+                Voyager GitBook, 
+              </a> 
+              or watch this  
+              <a href="https://vimeo.com/199084718" target="_blank" rel="noopener noreferrer">
+                narrated walkthrough video
+              </a> 
+              from the original developers.
+            </p>
+          </div> 
+      </accordion>
+    </div>
     <div
       class="loading-dialog"
       style="margin: auto"
@@ -63,4 +109,20 @@
         :spec.sync="voyagerSpec"
       ></data-voyager>
     </div>
+
+    <div class="datavoyager">
+      <h4> 
+        <a href="https://idl.cs.washington.edu/papers/voyager2" target="_blank" rel="noopener noreferrer"> 
+        Voyager 2: Augmenting Visual Analysis with Partial View Specifications 
+        </a>
+      </h4>
+      <p>
+        Kanit Wongsuphasawat, Zening Qu, Dominik Moritz, Riley Chang, Felix Ouk, 
+        Anushka Anand, Jock Mackinlay, Bill Howe, Jeffrey Heer
+      </p>
+      <i>
+        ACM Human Factors in Computing Systems (CHI), 2017    
+      </i>
+    </div>
   </div>
+</div>

app/src/pages/explorer/chart/datavoyager/data-voyager-page.js

@@ -7,6 +7,7 @@ import { toChartUri } from '@/modules/vega-chart'
 import { querySparql, parseSparql } from '@/modules/sparql'
 import DataVoyager from '@/components/explorer/DataVoyager'
 import spinner from '@/components/Spinner'
+import accordion from '@/components/accordion.vue'
 
 export default {
   data () {
@@ -21,6 +22,7 @@ export default {
   },
   props: ['chartId'],
   components: {
+    accordion,
     DataVoyager,
     spinner
   },

app/src/pages/nanomine/howTo/howto.html

@@ -15,5 +15,11 @@
             </div>
             <p>This video tutorial is a short overview of the charts platform.</p>
         </div>
+        <div class="howto_item">
+            <div class="howto_item-header" @click="displayVideo('null', 'https://vimeo.com/199084718')">
+                <span class="material-icons">smart_display</span> <h1 title="Data Voyager" class="visualize_header-h1">Data Voyager</h1>
+            </div>
+            <p>This narrated video tutorial gives an overview of Voyager 2, the data exploration and automated chart creation tool.</p>
+        </div>
     </div>
 </div>