11_Faceting/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Week 11 Faceting. MIDS W209 Information Visualization Slides</title>
    <meta charset="utf-8">
    <meta name="author" content="John Alexis Guerra Gómez">
    <meta name="description" content="Week 11 Faceting. MIDS W209 Information Visualization Slides">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Raleway|PT+Sans+Narrow">
    <link rel="stylesheet" href="https://use.typekit.net/yjc0afr.css">
    <link rel="stylesheet" href="../plugin/highlight/monokai.css" id="highlight-theme">
    <link href="../css/reveal.css" rel="stylesheet">
    <link href="../css/theme/white.css" rel="stylesheet" id="theme">
    <link href="../css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1 class="title">Faceting<br><small>MIDS W209: Information Visualization</small></h1>
          <div class="r-stretch"></div>
          <div class="tiny"><a href="https://johnguerra.co/" target="_blank"><strong> John Alexis Guerra Gómez</strong></a><span> |  john.guerra[at]gmail.com</span><a href="https://twitter.com/duto_guerra"> |  @duto_guerra</a><br><a href="https://andyreagan.com/" target="_blank"><strong> Andy Reagan</strong></a><span> |  andy[at]andyreagan.com |</span><a href="https://twitter.com/andyreagan">@andyreagan</a><br><a href="https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/11_Faceting/" target="_blank">https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/11_Faceting/</a></div>
          <div class="logo"><a href="https://datascience.berkeley.edu/"><img class="logo" data-src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></a></div>
          <div class="tiny">Partially based on<a href="https://www.cs.ubc.ca/~tmm/talks.html#minicourse14"> slides from Tamara Munzner</a></div>
        </section>
        <section id="outline">
          <section>
            <h2>What We Are Going to L earn</h2>
            <ul class="small">
              <li class="fragment">Faceting
                <ul>
                  <li class="fragment">Juxtapose</li>
                  <li class="fragment">Partition</li>
                  <li class="fragment">Superimpose</li>
                </ul>
              </li>
              <li class="fragment">Shared data</li>
              <li class="fragment">Shared encoding</li>
              <li class="fragment">Shared navigation</li>
              <li class="fragment">Dashboarding in a box</li>
              <li class="fragment">Architecture for visualization</li>
            </ul>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="intro">
          <section>
            <h2>Facet Across Multiple Views</h2>
          </section>
          <section>
            <h2>Facet</h2><img style="width:250px" data-src="../shared_images/vad_book_alldiagrams/pr11_facet-01.png" alt="Juxtapose, Partition, Superimpose">
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="juxtapose">
          <section>
            <h1>Juxtapose</h1>
          </section>
          <section class="full">
            <h3>Juxtapose and Coordinate Views</h3><img class="fill" data-src="../shared_images/vad_book_alldiagrams/pr11_facet-juxtapose-coordinate-views.png" alt="Share Encoding: Same/Different; Share Data: All/Subset/None; Share Navigation">
          </section>
          <section class="full">
            <h3>Coordinate Views: <br> Design Choice Interaction</h3><img class="fill" data-src="../shared_images/vad_book_alldiagrams/pr11_facet-design-choice-interactions.png" alt="Design Choice Interaction">
          </section>
          <section>
            <h2>Juxtapose</h2>
            <ul>
              <li class="fragment">Design choices
                <ul>
                  <li class="fragment">View count
                    <ul>
                      <li>Few vs. many</li>
                    </ul>
                  </li>
                  <li class="fragment">View visibility</li>
                  <li class="fragment">View arrangment
                    <ul>
                      <li class="fragment">User-managed vs. system-aligned</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="fragment">Why juxtapose views?
                <ul>
                  <li class="fragment">Benefits: eyes vs. memory
                    <ul>
                      <li class="fragment">Lower cognitive load to move eyes between two views than remembering previous state with single changing view</li>
                    </ul>
                  </li>
                  <li class="fragment">Costs: display area, two views side-by-side each have only half the area of one view</li>
                </ul>
              </li>
            </ul>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="shareEncoding">
          <section>
            <h1>Share Encoding</h1>
          </section>
          <section>
            <h3>Idiom: Overivew-Detail Views</h3>
            <div class="flex">
              <div class="half">
                <div class="small left-align">System: Google Maps</div>
                <ul>
                  <li class="fragment">Encoding: same</li>
                  <li class="fragment">Data: subset shared</li>
                  <li class="fragment">Navigation: shared
                    <ul>
                      <li class="fragment">Bi-directional linking</li>
                    </ul>
                  </li>
                  <li class="fragment">Differences:
                    <ul>
                      <li class="fragment">Viewpoint</li>
                      <li class="fragment">(Size)</li>
                    </ul>
                  </li>
                  <li class="fragment">Special case: bird's-eye map</li>
                </ul>
              </div>
              <div class="half">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-google-map.png" alt="Overview map from Google maps">
                  <figcaption class="reference tiny">[A Review of Overview+Detail, Zooming, and Focus+Context Interfaces. Cockburn, Karlson, and Bederson. ACM Computing Surveys 41:1 (2008), 1–31.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h2>Idiom: Small Multiples</h2>
            <div class="flex">
              <div class="third">
                <div class="left-align">System: cerebral</div>
                <ul>
                  <li class="fragment">Encoding: same</li>
                  <li class="fragment">Data: none shared</li>
                  <ul>
                    <li class="fragment">Different attributes for node colors</li>
                    <li class="fragment">(Same network layout)</li>
                  </ul>
                  <li class="fragment">Navigation: shared</li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-small-multiples.png" alt="Small multiples">
                  <figcaption class="reference">[Cerebral: Visualizing Multiple Experimental Conditions on a Graph with Biological Context. Barsky, Munzner, Gardy, and Kincaid. IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis 2008) 14:6 (2008), 1253–1260.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3 class="demo">Focus/Context</h3>
            <p class="small">Same encoding/subset of data/linked navigation</p>
            <div>
              <div id="observablehq-7c887b88">
                <div class="observablehq-chart"></div>
                <div class="observablehq-viewof-focus"></div>
                <div style="display:none" class="observablehq-update"></div>
                <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/d/066542b3dff540c8"><object type="image/svg+xml" style="pointer-events: none;" width=180 height=22 data="https://static.observableusercontent.com/files/c3fab254a006f1a3a1f9f63aba8ab1460db4752529036b9962950bde0ec195bab823daa6b278b1c3401e545b3bd640ddfdcad805cf9859af218cb2b9fed4ddf0"></object></a></div>
              </div>
              <script type="module">
                import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
                import define from "https://api.observablehq.com/d/066542b3dff540c8.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "chart") return Inspector.into("#observablehq-7c887b88 .observablehq-chart")();
                  if (name === "viewof focus") return Inspector.into("#observablehq-7c887b88 .observablehq-viewof-focus")();
                  if (name === "update") return Inspector.into("#observablehq-7c887b88 .observablehq-update")();
                });
              </script>
              
            </div>
          </section>
          <section>
            <h3 class="demo">Small Multiples (Cubism)</h3>
            <p class="small">Same encoding/different data/linked navigation</p>
            <iframe class="blocks" data-src="http://square.github.io/cubism/demo/"></iframe><a class="tiny" target="_blank" href="http://square.github.io/cubism/demo/">http://square.github.io/cubism/demo/</a>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="shareData">
          <section>
            <h1>Share Data</h1>
          </section>
          <section>
            <h2>Idiom: Linked Highlighting</h2>
            <div class="flex">
              <div class="half">
                <div class="left-align">System: EDV</div>
                <ul>
                  <li class="fragment">See how regions contiguous in one view are distributed within another</li>
                  <ul>
                    <li class="fragment">Powerful and pervasive interaction idiom</li>
                  </ul>
                  <li class="fragment">Encoding: different
                    <li class="fragment">Multiform</li>
                  </li>
                  <li class="fragment">Data: all shared</li>
                  <li class="fragment">AKA: brushing and linking</li>
                </ul>
              </div>
              <div class="half">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-linked-highlighting.png" alt="Visual Exploration of Large Structured Datasets">
                  <figcaption class="reference">[Visual Exploration of Large Structured Datasets. Wills. Proc. New Techniques and Trends in Statistics (NTTS), pp. 237–246. IOS Press, 1995.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3 class="demo">Linked Filtering (Crossfilter)</h3>
            <iframe class="blocks" data-src="https://crossfilter.github.io/crossfilter/"></iframe><a class="tiny" target="_blank" href="https://crossfilter.github.io/crossfilter/">https://crossfilter.github.io/crossfilter/</a>
          </section>
          <section class="full">
            <h3 class="demo">Multiform Overview/Details</h3>
            <p class="small">Tweetometro: Different encoding/subset of data/linked navigation</p>
            <figure>
              <figcaption class="reference"><a target="_blank" href="http://old.tweetometro.co/">http://old.tweetometro.co/</a></figcaption>
              <video data-src="../shared_images/tweetometro.mp4" autoplay="true" loop="true" showcontrols="false"></video>
            </figure>
          </section>
          <section>
            <h3 class="demo">Multiform Overview (Treeversity)</h3>
            <p class="small">Different encoding/all data/linked navigation</p>
            <figure>
              <video src="../shared_images/TreeVersity_Navigation.mp4" autoplay loop controls></video>
              <figcaption class="reference"><a target="_blank" href="https://treeversity.cattlab.umd.edu">https://treeversity.cattlab.umd.edu</a></figcaption>
            </figure>
          </section>
          <section>
            <h2>System: Improvise</h2>
            <div class="flex">
              <div class="third">
                <ul>
                  <li class="fragment">Investigate power of multiple views</li>
                  <ul>
                    <li class="fragment">Pushing limits on view count, interaction complexity</li>
                    <li class="fragment">How many is okay?</li>
                    <ul>
                      <li class="fragment">Open research question</li>
                    </ul>
                    <li class="fragment">Reorderable lists
                      <li class="fragment">Easy lookup</li>
                      <li class="fragment">Useful when linked to other encodings</li>
                    </li>
                  </ul>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-improvise.png" alt="Building Highly-Coordinated Visualizations In Improvise">
                  <figcaption class="reference">[Building Highly-Coordinated Visualizations In Improvise. Weaver. Proc. IEEE Symp. Information Visualization (InfoVis), pp. 159–166, 2004.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3 class="demo">Improvise</h3>
            <iframe class="blocks" data-src="http://www.cs.ou.edu/~weaver/improvise/"></iframe><a class="tiny" target="_blank" href="http://www.cs.ou.edu/~weaver/improvise/">http://www.cs.ou.edu/~weaver/improvise/</a>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="shareNavigation">
          <section>
            <h1>Share Navigation</h1>
          </section>
          <section data-background-iframe="https://johnguerra.co/viz/resultadosSegundaVuelta2018/index_old.html"></section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="partition">
          <section>
            <h1>Partition</h1>
          </section>
          <section>
            <h2>Partition Into Views</h2>
            <div class="flex">
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">How to divide data between views
                    <ul>
                      <li class="fragment">Split into regions by attributes</li>
                      <li class="fragment">Encodes association between items using spatial proximity</li>
                      <li class="fragment">Order of splits has major implications for what patterns are visible</li>
                    </ul>
                  </li>
                  <li class="fragment">No strict dividing line
                    <ul>
                      <li class="fragment">View: big/detailed
                        <ul>
                          <li class="fragment">Contiguous region in which visually encoded data is shown on the display</li>
                        </ul>
                      </li>
                      <li class="fragment">Glyph: small/iconic
                        <ul>
                          <li class="fragment">Object with internal structure that arises from multiple marks</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="half"><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-partition-sidebyside.png" alt="partition into side-by-side views"><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-small-partitionviews.png" alt="partition views"></div>
            </div>
          </section>
          <section class="full">
            <h3>Partitioning: List Alignment</h3>
            <div class="flex">
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">Single bar chart with grouped bars</li>
                  <ul>
                    <li class="fragment">Split by state into regions</li>
                    <ul>
                      <li class="fragment">Complex glyph within each region showing all ages</li>
                    </ul>
                    <li class="fragment">Compare: easy within state, hard across ages</li>
                  </ul>
                </ul><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-partition-listalignment1.png" alt="single bar chart with grouped bars">
              </div>
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">Small-multiple bar charts</li>
                  <ul>
                    <li class="fragment">Split by age into regions</li>
                    <ul>
                      <li class="fragment">One chart per region</li>
                    </ul>
                    <li class="fragment">Compare: easy within age, harder across states</li>
                  </ul>
                </ul><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-partition-listalignment2.png" alt="small-multiple bar charts">
              </div>
            </div>
          </section>
          <section>
            <h3>Partitioning: Recursive Subdivision, Part I</h3>
            <div class="flex">
              <div class="third small">
                <div class="left-align">System: HIVE</div><br>
                <ul>
                  <li class="fragment">Split by neighborhood</li>
                  <li class="fragment">Then by type</li>
                  <li class="fragment">Then time
                    <ul>
                      <li class="fragment">Years as rows</li>
                      <li class="fragment">Months as columns</li>
                    </ul>
                  </li>
                  <li class="fragment">Color by price</li><br>
                  <li class="fragment">Neighborhood patterns
                    <ul>
                      <li class="fragment">Where it’s expensive</li>
                      <li class="fragment">Where you pay much more for detached type</li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-recursive-subdivision.png" alt="recursive subdivision">
                  <figcaption class="reference">[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood.  IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3>Partitioning: Recursive Subdivision, Part II</h3>
            <div class="flex">
              <div class="third small">
                <div class="left-align">System: HIVE</div><br>
                <ul>
                  <li class="fragment">Switch order of splits
                    <ul>
                      <li class="fragment">Type then neighborhood</li>
                    </ul>
                  </li>
                  <li class="fragment">Switch color
                    <ul>
                      <li class="fragment">By price variation</li>
                    </ul>
                  </li>
                  <li class="fragment">Type patterns
                    <ul>
                      <li class="fragment">Within specific type, which neighborhoods inconsistent</li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-recursive-subdivision2.png" alt="recursive subdivision">
                  <figcaption class="reference">[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood.  IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3>Partitioning: Recursive Subdivision, Part III</h3>
            <div class="flex">
              <div class="third small">
                <div class="left-align">System: HIVE</div><br>
                <ul>
                  <li class="fragment">Different encoding for second-level regions</li>
                  <ul>
                    <li class="fragment">Choropleth maps</li>
                  </ul>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-recursive-subdivision3.png" alt="recursive subdivision">
                  <figcaption class="reference">[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood.  IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3>Partitioning: Recursive Subdivision, Part IV</h3>
            <div class="flex">
              <div class="third small">
                <div class="left-align">System: HIVE</div><br>
                <ul>
                  <li class="fragment">Size regions by sale counts</li>
                  <ul>
                    <li class="fragment">Not uniformly</li>
                  </ul>
                  <li class="fragment">Result: treemap</li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-recursive-subdivision4.png" alt="recursive subdivision">
                  <figcaption class="reference">figcaption.reference [Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood.  IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="superImpose">
          <section>
            <h1>Superimpose</h1>
          </section>
          <section>
            <h2>Superimpose Layers</h2>
            <div class="flex">
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">Layer: set of objects spread out over region</li>
                  <ul>
                    <li class="fragment">Each set is a visually distinguishable group</li>
                    <li class="fragment">Extent: whole view</li>
                  </ul>
                  <li class="fragment">Design choices
                    <li class="fragment">How many layers, how to distinguish?</li>
                    <ul>
                      <li class="fragment">Encode with different, nonoverlapping channels</li>
                      <li class="fragment">Two layers achieveable, three with careful design</li>
                    </ul>
                    <li class="fragment">Small static set, or dynamic from many possible?</li>
                  </li>
                </ul>
              </div>
              <div class="half"><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-superimpose-layers.png" alt="superimpose layers"></div>
            </div>
          </section>
          <section>
            <h3>Static Visual Layering</h3>
            <div class="flex">
              <div class="twothirds">
                <ul>
                  <li class="fragment">Foreground layer: roads</li>
                  <ul>
                    <li class="fragment">Hue, size distinguishing main from minor</li>
                    <li class="fragment">High luminance contrast from background</li>
                  </ul>
                  <li class="fragment">Background layer: regions
                    <li class="fragment">Desaturated colors for water, parks, land areas</li>
                    <figure></figure>
                    <li class="fragment">User can selectively focus attention</li>
                  </li>
                  <li class="fragment">“Get it right in black and white”
                    <li class="fragment">Check luminance contrast with greyscale view</li>
                    <figcaption class="reference">[Get it right in black and white. Stone. 2010. http://www.stonesc.com/wordpress/2010/03/get-it-right-in-black-and-white]</figcaption>
                  </li>
                </ul>
              </div>
              <div class="third"><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-visual-layering1.png" alt="layered map in color"><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-visual-layering2.png" alt="layered map in grayscale"></div>
            </div>
          </section>
          <section>
            <h2>Suprimposing Limits</h2>
            <div class="flex">
              <div class="twothirds small">
                <ul>
                  <li class="fragment">Few layers, but many lines</li>
                  <ul>
                    <li class="fragment">Up to a few dozen</li>
                    <li class="fragment">But not hundreds</li>
                  </ul>
                  <li class="fragment">Superimpose vs. juxtapose: empirical study
                    <li class="fragment">Superimposed for local, multiple for global</li>
                    <li class="fragment">Tasks</li>
                    <ul>
                      <li class="fragment">Local: maximum,  global: slope, discrimination</li>
                    </ul>
                    <li class="fragment">Same screen space for all multiples vs single superimposed</li>
                  </li>
                </ul><img class="fragment" data-src="../shared_images/vad_book_alldiagrams/pr11_facet-superimpose-limits.png" alt="Graphical perception of multiple time series">
              </div>
              <div class="third"><img data-src="../shared_images/vad_book_alldiagrams/pr11_superimposing-layering2.png" alt="cpu utilization over time"></div>
            </div>
          </section>
          <section class="full">
            <h3 class="demo">Dynamic Visual Layering</h3>
            <ul class="tiny">
              <li class="fragment">Interactive based on selection</li>
              <li class="fragment">One-hop neighbour highlighting demos: click vs. hover (lightweight)</li>
            </ul>
            <div class="flex">
              <div class="half">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-dynamic-visual-layering1.png" alt="dynamic visual layering">
                  <figcaption class="reference"><a href="http://mariandoerk.de/edgemaps/demo/">http://mariandoerk.de/edgemaps/demo/</a></figcaption>
                </figure>
              </div>
              <div class="half">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/pr11_facet-dynamic-visual-layering2.png" alt="dynami visual layering">
                  <figcaption class="reference"><a href="http://mbostock.github.io/d3/talk/20111116/airports.html">http://mbostock.github.io/d3/talk/20111116/airports.html</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h2>Dynamic Layering</h2><a href="https://johnguerra.co/viz/influentials/story/?hashtag=ieeevis2019">Twitter influencers for #ieeevis2019</a>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="dashboarding">
          <section>
            <h2>Dashboarding in a Box</h2>
          </section>
          <section>
            <h3>Tools of the Trade</h3>
            <ul>
              <li class="fragment">Python Dash (from Plotly folks)</li>
              <li class="fragment">R Shiny</li>
              <li class="fragment">Metabase?</li>
              <li class="fragment">Flask + Altair</li>
              <li class="fragment">Flask + d3</li>
            </ul>
          </section>
          <section>
            <h3>Taking Apart Dash</h3>
            <pre class="python" style="font-size: 18px;"><code>import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://gist.githubusercontent.com/.../gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)</code><!-- a(href="https://dash.plotly.com/layout") https://dash.plotly.com/layout --></pre>
          </section>
          <section>
            <h3>Taking Apart Dash (cont.)</h3><img data-src="../shared_images/dash-screenshot.png">
          </section>
          <section>
            <h3>Under the Hood: Tt's Flask</h3><img data-src="../shared_images/dash-flask.png">
          </section>
          <section>
            <h3>Follow a Request</h3><img data-src="../shared_images/dash-request.png">
          </section>
          <section>
            <h3>The Code We Used</h3>
            <pre class="python" style="font-size: 18px;"><code>import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://gist.githubusercontent.com/.../gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
</code></pre>
          </section>
          <section>
            <h3>So We'll Render a Template Like This</h3>
            <pre class="html" style="font-size: 18px;"><code>html
head
  {{ for headers in app.headers }}
  {{ header }}
  {{ endfor }}
  <link rel="stylesheet" href="/assets/base.css?m=1596812599.0">
/head
body
  {{ for div in app.layout }}
  {{ div.render_elements() }}
  {{ endfor }}
/body
/html</code></pre>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="architecture">
          <section>
            <h2>Architecture for Visualization</h2>
          </section>
          <section>
            <h3>Concepts We Know and Love</h3>
            <ul>
              <li class="fragment">Frontend</li>
              <li class="fragment">Backend</li>
              <li class="fragment">What's missing here?</li>
              <ul>
                <li class="fragment">Processing engine</li>
                <li class="fragment">CDNs</li>
                <li class="fragment">Static storage</li>
              </ul>
            </ul>
          </section>
          <section>
            <h3>Building Blocks on the Web</h3>
            <ul>
              <li class="fragment">Frontend client:
                <ul>
                  <li class="fragment">JavaScript libraries, run in real time</li>
                  <li class="fragment">Access everything through browser-implemented APIs</li>
                </ul>
              </li>
              <li class="fragment">Server:
                <ul>
                  <li class="fragment">Database</li>
                  <li class="fragment">Files (database is a layer over files)</li>
                  <li class="fragment">Web app (running Python/R/Node/etc.)</li>
                  <li class="fragment">Other pieces of a web stack: Apache/Nginx/Gunicorn/UWSGI/etc.</li>
                  <li class="fragment">Non-web-facing processing automation/schedulers (Airflow/Jenkins/cron)</li>
                </ul>
              </li>
            </ul>
          </section>
          <section>
            <h3>Example: Visualization System Relying on Twitter Data</h3><img data-src="../shared_images/Twitter-Service-Architecture-Diagram.png">
          </section>
          <section>
            <h3>MassMutual's Client Marketing System</h3><img data-src="../shared_images/Marketing-Logical-Arch---Page-1.png">
          </section>
          <section>
            <h3>MassMutual's Advisor-Facing Mobile App</h3><img data-src="../shared_images/AdvisorMobile-High-Level-0.png">
          </section>
          <section>
            <h3>MassMutual's Prediction API</h3><img data-src="../shared_images/Prediction-API-v2-Architecture-2019-05-07.png">
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="visualizationMantra">
          <section>
            <h2>Applying the <br> Visualization Mantra</h2>
          </section>
          <section data-background-size="contain" data-background="../shared_images/timeSearcher.gif"></section>
          <section>
            <h2>Similian</h2><a target="_blank" href="http://www.cs.umd.edu/hcil/similan">
              <figure><img class="demo" data-src="http://www.cs.umd.edu/hcil/similan/img/simi20091011/overview.png">
                <figcaption class="reference"><a target="_blank" href="http://www.cs.umd.edu/hcil/similan">Similan: Finding Similar Records from Temporal Categorical Data</a></figcaption>
              </figure></a>
          </section>
          <section data-background-iframe="http://www.cs.umd.edu/hcil/similan/video/demo/index.html"></section>
          <section>
            <h2>LifeFlow</h2><a target="_blank" href="http://www.cs.umd.edu/hcil/lifeflow/">
              <figure><img class="demo" data-src="http://www.cs.umd.edu/hcil/lifeflow/img/LifeFlow3.png"></figure>
              <figcaption class="reference"><a target="_blank" href="http://www.cs.umd.edu/hcil/lifeflow/">LifeFlow: Understanding Millions of Event Sequences in a Million Pixels</a></figcaption></a>
          </section>
          <section>
            <h2 class="demo">LifeFlow How-To</h2><span>
              <iframe width="853" height="480" data-src="https://www.youtube.com/embed/QxceG6_RM8w" frameborder="0" allowfullscreen></iframe>
              </span>
          </section>
          <section>
            <h2 class="demo">LifeFlow Demo</h2><span>
              <iframe width="853" height="480" data-src="https://www.youtube.com/embed/nXrmJS6Vk9A" frameborder="0" allowfullscreen></iframe>
              </span>
          </section>
          <section>
            <h2>TreeVersity</h2>
            <figure>
              <video src="../shared_images/TreeVersity_Navigation.mp4" autoplay loop controls></video>
              <figcaption class="reference"><a target="_blank" href="https://treeversity.cattlab.umd.edu">https://treeversity.cattlab.umd.edu</a></figcaption>
            </figure>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="visualizationMantra">
          <section>
            <h1>How to Scroll</h1>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
        <section id="review">
          <section>
            <h2>What we Learned</h2>
            <ul class="small">
              <li class="fragment">Faceting
                <ul>
                  <li class="fragment">Juxtapose</li>
                  <li class="fragment">Partition</li>
                  <li class="fragment">Superimpose</li>
                </ul>
              </li>
              <li class="fragment">Shared data</li>
              <li class="fragment">Shared encoding</li>
              <li class="fragment">Shared navigation</li>
              <li class="fragment">Dashboarding in a box</li>
              <li class="fragment">Architecture for visualization</li>
            </ul>
          </section>
          <section>
            <div><img src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></div>
          </section>
        </section>
      </div>
    </div>
    <script src="../js/reveal.js"></script>
    <script src="../plugin/zoom/zoom.js"></script>
    <script src="../plugin/notes/notes.js"></script>
    <script src="../plugin/search/search.js"></script>
    <script src="../plugin/markdown/markdown.js"></script>
    <script src="../plugin/highlight/highlight.js"></script>
    <script>
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        hash: true,
        //- transition: "convex",
      
        //- width: "100%",
        //- height: "720px",
      
        plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
      });
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.data-src=g;m.parentNode.insertBefore(a,m)
      })(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
      
      ga("create", "UA-72531610-1", "auto");
      ga("send", "pageview");
    </script>
  </body>
</html>