07_Time/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Week 7 Visualizing Temporal Data. MIDS W209 Information Visualization Slides</title>
    <meta charset="utf-8">
    <meta name="author" content="John Alexis Guerra Gómez">
    <meta name="description" content="Week 7 Visualizing Temporal Data. 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">Visualizing <br> Temporal Data<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://johnguerra.co/lectures/MIDS_W209_Information_Visualization/07_Time/" target="_blank">https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/07_Time/</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 Learn</h2>
            <ul>
              <li class="fragment">Line charts</li>
              <li class="fragment">Area charts</li>
              <li class="fragment">Other representations</li>
              <li class="fragment">Radial idioms</li>
              <li class="fragment">Modern represtations</li>
              <li class="fragment">HCIL work on temporal</li>
              <li class="fragment">Tips</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>
            <h1>Visualizing Time</h1>
          </section>
          <section>
            <h2>Temporal Datasets</h2>
            <ul class="small">
              <li>One attribute has a timestamp (at any level)</li>
              <li class="fragment">Granularity ("year/month/day" vs. "year/month/day/hour")
                <ul>
                  <li class="fragment">Truncate</li>
                  <li class="fragment">Datepart</li>
                </ul>
              </li>
              <li class="fragment">Sometimes is cyclic</li>
              <li class="fragment">Seasonality</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="lineCharts">
          <section>
            <h1>Line Charts</h1>
          </section>
          <section id="lineChart">
            <h2>Idiom: Line Chart/Dot Plot</h2>
            <div class="flex">
              <div class="twothirds">
                <ul class="tiny">
                  <li class="fragment">One key, one value</li>
                  <li class="fragment"><strong>Data:</strong> two quantitative attributes</li>
                  <li class="fragment"><strong>Mark:</strong> points and line connection marks between them</li>
                  <li class="fragment"><strong>Channels:</strong>
                    <ul class="small">
                      <li>Aligned lengths to express quant value</li>
                      <li>Separated and ordered by key attribute into horizontal regions</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Task:</strong> find trend
                    <ul class="small">
                      <li class="fragment">Connection marks emphasize ordering of items along key axis by explicitly showing relationship between one item and the next</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Scalability:</strong> hundreds of key levels, hundreds of value levels</li>
                </ul>
              </div>
              <div class="third"><img class="fill vcentered" data-src="../shared_images/vad_book_alldiagrams/linechart_example.png" alt="Linechart example"></div>
            </div>
          </section>
          <section>
            <h2>Choosing Bar vs. Line Charts</h2>
            <div class="flex">
              <div class="half">
                <ul class="small">
                  <li class="fragment">Depends on type of key attribute</li>
                  <ul>
                    <li class="fragment">Bar charts if categorical</li>
                    <li class="fragment">Line charts if ordered</li>
                  </ul>
                  <li class="fragment">Do not use line charts for categorical key attributes</li>
                  <ul>
                    <li class="fragment">Violates expressiveness principle</li>
                    <li class="fragment">Implication of trend so strong that it overrides semantics!</li>
                    <ul>
                      <li class="fragment">“The more male a person is, the taller he/she is.”</li>
                    </ul>
                  </ul>
                </ul>
              </div>
              <div class="half">
                <figure><img class="fill" data-src="../shared_images/vad_book_alldiagrams/barchart_vs_linechart.png" alt="Barchart vs Linechart">
                  <figcaption class="reference">after [Bars and Lines: A Study of Graphic Communication. Zacks and Tversky. Memory and Cognition 27:6 (1999), 1073–1079.]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section class="full">
            <h3>Line Chart Aspect Ratio</h3>
            <div class="flex">
              <div class="third">
                <ul class="tiny">
                  <li class="fragment">1: banking to 45 (1980s)
                    <ul>
                      <li class="fragment">Cleveland perceptual argument: most accurate angle judgement at 45</li>
                    </ul>
                  </li>
                  <li class="fragment">2: multi-scale banking to 45 (2006)</li>
                  <li class="fragment">3: arc length-based aspect ratio (2011)</li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img class="fill" data-src="../shared_images/aspect_ratio1.png" alt="Dual Axis">
                  <figcaption class="reference"><a href="https://github.com/jennybc/r-graph-catalog/tree/master/figures/fig07-02_annual-report-aspect-ratio-2">https://github.com/jennybc/r-graph-catalog/tree/master/figures/fig07-02_annual-report-aspect-ratio-2</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h2>Idiom: Dual-Axis Line Charts</h2>
            <div class="flex">
              <div class="half">
                <ul class="small">
                  <li class="fragment">Controversial</li>
                  <li class="fragment">Acceptable if commensurate</li>
                  <li class="fragment">Beware, very easy to mislead!</li>
                </ul>
              </div>
              <div class="half">
                <figure><img class="fill" data-src="../shared_images/vad_book_alldiagrams/dual_axis.png" alt="Dual Axis">
                  <figcaption class="reference">Ben Jones @DataRemixed</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section class="full">
            <h2>Idiom: Indexed Line Charts</h2>
            <div class="flex">
              <div class="third">
                <ul class="tiny">
                  <li class="fragment"><strong>Data:</strong> two quantitative attributes
                    <ul>
                      <li>One key and one value</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Derived data:</strong> new quantitative value attribute
                    <ul>
                      <li>Index</li>
                      <li>Plot instead of original value</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Task:</strong> show change over time
                    <ul>
                      <li><strong>Principle:</strong> normalized, not absolute</li>
                    </ul>
                  </li>
                  <li class="fragment">Scalability same as standard line chart</li>
                </ul>
              </div>
              <div class="twothirds">
                <div class="demo vcentered" style="height:auto">
                  <div id="observablehq-c6d2aae7">
                    <div class="observablehq-chart"></div>
                    <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/@john-guerra/vega-lite-interactive-index-chart"><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, Library} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
                    import define from "https://api.observablehq.com/@john-guerra/vega-lite-interactive-index-chart.js?v=3";
                    const runtime = new Runtime(Object.assign(new Library, {width: 500}));
                    runtime.module(define, name => {
                      if (name === "chart") return Inspector.into("#observablehq-c6d2aae7 .observablehq-chart")();
                    });
                  
                  </script>
                  
                  
                </div>
              </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="areaCharts">
          <section>
            <h1>Area Charts</h1>
          </section>
          <section>
            <h2>Idiom: Streamgraph</h2>
            <div class="flex">
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">Generalized stacked graph
                    <ul class="small">
                      <li>Emphasizing horizontal continuity</li>
                      <li>Vs. vertical items</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Data:</strong>
                    <ul>
                      <li>One categorical key attribute (artist)</li>
                      <li>One ordered key attribute (time)</li>
                      <li>One quantitative value attribute (counts)</li>
                      <li>Derived data</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Mark:</strong> layers (areas)
                    <ul>
                      <li>Height encodes counts</li>
                    </ul>
                  </li>
                  <li class="fragment">One quantitative attribute (layer ordering)</li>
                  <li class="fragment"><strong>Scalability:</strong>
                    <ul>
                      <li>Hundreds of time keys</li>
                      <li>Dozens to hundreds of artist keys</li>
                      <ul>
                        <li>More than stacked bars, since most layers don’t extend across whole chart</li>
                      </ul>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="half">
                <figure><img class="fill" data-src="../shared_images/vad_book_alldiagrams/streamgraph.png" alt="Streamgraph">
                  <figcaption class="reference">[Stacked Graphs Geometry &amp; Aesthetics. Byron and Wattenberg. IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis 2008) 14(6): 1245–1252, (2008).]</figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3 class="demo">Streamgraph RIO2016</h3>
            <figure><img class="fill" data-src="../shared_images/streamGraphNYTimes.png" alt="Streamgraph RIO2016 NY times">
              <figcaption class="reference"><a target="_blank" href="http://www.nytimes.com/interactive/2016/08/08/sports/olympics/history-olympic-dominance-charts.html?_r=0">http://www.nytimes.com/interactive/2016/08/08/sports/olympics/history-olympic-dominance-charts.html?_r=0</a></figcaption>
            </figure>
          </section>
          <section>
            <h2>Stacked Area Charts</h2>
            <div class="flex">
              <div class="third">
                <ul>
                  <li class="fragment">Similar to streamgraphs</li>
                  <li class="fragment">Task: identify trends in total</li>
                  <li class="fragment">More accurate</li>
                  <li class="fragment">Less fancy (enjoy)</li>
                  <li class="fragment">Choose first category wisely</li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img src="../shared_images/stacked_area_chart.png" alt="Stacked Area Chart"><a class="reference" href="https://observablehq.com/@d3/stacked-area-chart">https://observablehq.com/@d3/stacked-area-chart</a></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="other">
          <section>
            <h1>Other Representations</h1>
          </section>
          <section id="gantt">
            <h2 class="demo">Gantt Charts</h2>
            <div class="flex">
              <div class="third">
                <ul class="tiny">
                  <li class="fragment"><strong>Data:</strong> two time attributes (start end)</li>
                  <li class="fragment"><strong>Tasks:</strong> summarize duration (features), compare events, identify intersections/dependencies</li>
                  <li class="fragment"><strong>Visual representation:</strong> line, express for time, separate/order/aligned for tasks, color hues</li>
                </ul>
              </div>
              <div class="twothirds">
                <figure><img data-src="../shared_images/vad_book_alldiagrams/gantChart.png" alt="Gant Chart">
                  <figcaption class="reference"><a class="tiny" href="https://observablehq.com/@john-guerra/mids-assignments-timeline">https://observablehq.com/@john-guerra/mids-assignments-timeline</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h2>Idiom: Slopegraphs</h2>
            <div class="flex">
              <div class="half">
                <ul class="tiny">
                  <li class="fragment">Two values</li>
                  <li class="fragment"><strong>Data</strong>:
                    <ul>
                      <li class="fragment">Two quantitative value attributes</li>
                      <li class="fragment">(One derived attribute: change magnitude)</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Mark</strong>: point and line
                    <ul>
                      <li class="fragment">Line connecting mark between points</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Channels</strong>:
                    <ul>
                      <li class="fragment">Two vertical points: express attribute value</li>
                      <li class="fragment">(Line width/size, color)</li>
                    </ul>
                  </li>
                  <li class="fragment"><strong>Task</strong>: emphasize changes in rank/value</li>
                  <li class="fragment"><strong>Scalability</strong>: hundreds of value levels</li>
                </ul>
              </div>
              <div class="half">
                <figure><img src="../shared_images/slopeChart.png" alt="Slope chart">
                  <figcaption class="reference"><a href="https://observablehq.com/@joakimdalen/sleep">https://observablehq.com/@joakimdalen/sleep</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section data-background-iframe="https://johnguerra.co/viz/eliminatoriaMundial/"></section>
          <section id="calendarView">
            <h2 class="demo">Idiom: Calendar View</h2>
            <div class="half small">
              <ul>
                <li class="fragment"><strong>Data</strong>: table (years), one timeline</li>
                <li class="fragment"><strong>Tasks</strong>: compare trends (by days of the week, month, year), locate outliers</li>
                <li class="fragment"><strong>Visual representation</strong>: shape, vertical/horizontal position, color hue</li>
                <li class="fragment"><strong>Considerations</strong>: natural view for humans, focus on common time aggregations</li>
              </ul>
            </div>
            <div class="half"><img data-src="../shared_images/vad_book_alldiagrams/calendar_view.png" alt="Calendar view"></div>
          </section>
          <section>
            <h2>Breaking Conventions</h2>
            <div class="flex">
              <div class="third">
                <ul class="small">
                  <li class="fragment">Presentation vs. exploration</li>
                  <li class="fragment">Engaging/evocative</li>
                  <li class="fragment">Inverted y-axis</li>
                  <li class="fragment">Blood drips down on Poe</li>
                </ul>
                <div class="reference">[Slide inspired by Ben Jones]</div>
              </div>
              <div class="twothirds">
                <figure><img src="../shared_images/edgarAlanPoe.png" alt="Edgar Allan Poe">
                  <figcaption class="reference"><a href="https://public.tableau.com/profile/ben.jones#!/vizhome/EdgarAllanPoeViz/EdgarAllanPoeViz">https://public.tableau.com/profile/ben.jones#!/vizhome/EdgarAllanPoeViz/EdgarAllanPoeViz</a></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="radial">
          <section>
            <h1>Radial Idioms</h1>
          </section>
          <section id="radialTimeline">
            <h2 class="demo">Idiom: Radial Timelines</h2>
            <div class="flex">
              <div class="half">
                <ul>
                  <li class="fragment"><strong>Data:</strong> table (years), one timeline</li>
                  <li class="fragment"><strong>Tasks:</strong> compare trends (by days of the week, month, year), locate outliers</li>
                  <li class="fragment"><strong>Visual representation:</strong> line, radial position, color hue (rainbow :( )</li>
                  <li class="fragment"><strong>Considerations:</strong> appeals to cyclic nature of time</li>
                </ul>
              </div>
              <div class="half"><a target="_blank" href="http://www.climate-lab-book.ac.uk/spirals/">
                  <figure><img data-src="../shared_images/vad_book_alldiagrams/spiral_may2016.gif" alt="radial_heatmapl"></figure>
                  <figcaption class="reference"><a target="_blank" href="http://www.climate-lab-book.ac.uk/spirals/"> http://www.climate-lab-book.ac.uk/spirals/</a></figcaption></a></div>
            </div>
          </section>
          <section>
            <h2 class="demo">Idiom: Radial Barchart</h2>
            <div class="demo">
              <div id="observablehq-b6dcf60d">
                <div class="observablehq-chart"></div>
                <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/@d3/radial-stacked-bar-chart-ii"><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/@d3/radial-stacked-bar-chart-ii.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "chart") return Inspector.into("#observablehq-b6dcf60d .observablehq-chart")();
                });
              </script>
              
              
            </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="modernRepresentations">
          <section>
            <h1>Modern Representations</h1>
          </section>
          <section id="horizonCharts">
            <h2 class="demo">Idiom: Horizon Charts</h2>
            <div class="flex">
              <div class="half small">
                <ul>
                  <li class="fragment"><strong>Data:</strong> table, many timelines</li>
                  <li class="fragment"><strong>Tasks:</strong> compare trends and similarities (with many), locate outliers</li>
                  <li class="fragment"><strong>Visual representation:</strong> line, vertical position, color luminosity (quant divergent)</li>
                  <li class="fragment"><strong>Considerations:</strong> uses much less space</li>
                </ul>
              </div>
              <div class="half"><img data-src="../shared_images/vad_book_alldiagrams/horizon.png" alt="Horizon charts"></div>
            </div>
          </section>
          <section>
            <div class="demo" style="width:100%">
              <div id="observablehq-6cd97a13">
                <div class="observablehq-viewof-scheme"></div>
                <div class="observablehq-viewof-overlap"></div>
                <div class="observablehq-chart"></div>
                <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/@d3/horizon-chart"><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/@d3/horizon-chart.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "viewof scheme") return Inspector.into("#observablehq-6cd97a13 .observablehq-viewof-scheme")();
                  if (name === "viewof overlap") return Inspector.into("#observablehq-6cd97a13 .observablehq-viewof-overlap")();
                  if (name === "chart") return Inspector.into("#observablehq-6cd97a13 .observablehq-chart")();
                });
              </script>
              
              
            </div>
          </section>
          <section id="joyPlot">
            <h3 class="demo">Joyplots</h3>
            <div class="demo" style="width:100%">
              <div id="observablehq-887cc127">
                <div class="observablehq-chart"></div>
                <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/@d3/ridgeline-plot"><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/@d3/ridgeline-plot.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "chart") return Inspector.into("#observablehq-887cc127 .observablehq-chart")();
                });
              </script>
              
              
            </div>
          </section>
          <section>
            <h2>Idiom: Connected Scatterplots</h2>
            <div class="flex">
              <div class="half">
                <ul class="small">
                  <li class="fragment">Scatterplot with line connection marks</li>
                  <ul>
                    <li class="fragment">Popular in journalism</li>
                    <li class="fragment">Horizontal and vertical axes: value attributes</li>
                    <li class="fragment">Line connection marks: temporal order</li>
                  </ul>
                  <li class="fragment">Empirical study</li>
                  <ul>
                    <li class="fragment">Engaging, but correlation unclear</li>
                  </ul>
                </ul>
              </div>
              <div class="half">
                <figure><img class="fill" data-src="../shared_images/vad_book_alldiagrams/connected_scatterplot.png" alt="Connected Scatterplot">
                  <figcaption class="reference"><a href="http://steveharoz.com/research/connected_scatterplot/">http://steveharoz.com/research/connected_scatterplot/</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h3>Idiom: Connected Scatterplots (cont.)</h3>
            <div class="flex">
              <div class="half">
                <ul class="small">
                  <li class="fragment">Alternative to dual-axis charts</li>
                  <ul>
                    <li class="fragment">Horizontal: time</li>
                    <li class="fragment">Vertical: two value attributes</li>
                  </ul>
                </ul>
              </div>
              <div class="half">
                <figure><img class="fill" data-src="../shared_images/vad_book_alldiagrams/connected_scatterplots_vs_dual_axis.png" alt="Connected Scatterplot vs Dual Axis">
                  <figcaption class="reference"><a href="http://steveharoz.com/research/connected_scatterplot/">http://steveharoz.com/research/connected_scatterplot/</a></figcaption>
                </figure>
              </div>
            </div>
          </section>
          <section>
            <h2 class="demo">Timelines Revisited</h2>
            <figure><img src="../shared_images/timelinesRevisited.png" alt="Timlines Revisited">
              <figcaption class="reference"><a href="https://timelinesrevisited.github.io/">Timelines Revisited: A Design Space and Considerations for Expressive Storytelling" By Matthew Brehmer, Bongshin Lee, Benjamin Bach, Nathalie Henry Riche, and Tamara Munzner</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="hcilTemporal">
          <section>
            <h2>HCIL Research</h2><a target="_blank" href="http://www.cs.umd.edu/hcil/temporalviz/">
              <figure><img style="width:300px" data-src="../shared_images/vad_book_alldiagrams/hcil_logo.jpg">
                <figcaption class="tiny" target="_blank" href="http://www.cs.umd.edu/hcil/temporalviz/">Summary of HCIL Projects in Temporal Visualizations</figcaption>
              </figure></a>
          </section>
          <section>
            <h2>Time Searcher</h2>
            <div><iframe width="853" height="480" data-src="https://www.youtube.com/embed/VWx1TMcrb74" frameborder="0" allowfullscreen></iframe></div><a class="reference" href="http://www.cs.umd.edu/hcil/timesearcher/">Visual Exploration of Time-Series Data</a>
          </section>
          <section data-background-size="contain" data-background="../shared_images/timeSearcher.gif"></section>
          <section data-markdown>
            <script type="text/template">
              ### Categorical Time events
              
              Event ID | Category | Timestamp | Attributes
              ---|----------|-----------|---------
              1 | Arrive | 2016/08/13 18:01:30 | On time
              1 | Clear | 2016/08/13 18:10:00 |
              1 | Finish | 2016/08/13 18:15:00 | Revised
              ...  | ... |  ... |
              2 | Arrive | 2016/08/13 19:01:30 | Late
              2 | Review | 2016/08/13 19:11:00 | Network issues
              2 | Clear | 2016/08/13 19:15:00 |
              2 | Finish | 2016/08/13 19:15:00 | Non-revised
              
              <!-- .element: class="small" -->
              
              
              
              
            </script>
          </section>
          <section>
            <h2 class="demo">Lifelines</h2>
            <figure><img class="demo" data-src="http://www.cs.umd.edu/hcil/lifelines/screenjan98.jpg">
              <figcaption class="reference"><a target="_blank" href="http://www.cs.umd.edu/hcil/lifelines/">LifeLines for Visualizing Patient Records</a></figcaption>
            </figure>
          </section>
          <section>
            <h2>Lifelines (cont.)</h2>
            <div><iframe width="853" height="480" data-src="https://www.youtube.com/embed/aeRklur2Zc4?start=54" frameborder="0" allowfullscreen></iframe></div><a class="reference" target="_blank" href="http://www.cs.umd.edu/hcil/lifelines/">LifeLines for Visualizing Patient Records</a>
          </section>
          <section>
            <h2 class="demo">Lifelines 2</h2><a target="_blank" href="http://www.cs.umd.edu/hcil/lifelines2/">
              <figure><img class="demo" data-src="http://www.cs.umd.edu/hcil/lifelines2/images/title.png"></figure>
              <figcaption class="reference"><a target="_blank" href="http://www.cs.umd.edu/hcil/lifelines2/">Lifelines2: Discovering Temporal Categorical Patterns Across Multiple Records</a></figcaption></a>
          </section>
          <section data-background-iframe="http://www.cs.umd.edu/hcil/lifelines2/videos/Lifelines2-(Contrast-Creatinine)-11-10-08_flash/full(1024x768)/index.htm"></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>EventFlow</h2><a target="_blank" href="http://hcil.umd.edu/eventflow/">
              <figure><img class="demo" data-src="http://www.cs.umd.edu/hcil/eventflow/img/EventFlow.png"></figure>
              <figcaption class="reference"><a target="_blank" href="http://hcil.umd.edu/eventflow/">EventFlow: Visual Analysis of Temporal Event Sequences and Advanced Strategies for Healthcare Discovery</a></figcaption></a>
          </section>
          <section>
            <h2 class="demo">EventFlow Demo</h2><span>
              <iframe width="853" height="480" data-src="https://www.youtube.com/embed/FHgcJDnW8q8" frameborder="0" allowfullscreen></iframe>
              </span>
          </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="commonTricks">
          <section>
            <h2>Common Derives/Tricks for Temporal Data</h2>
          </section>
          <section>
            <h2 class="demo">Align by Event</h2>
            <iframe class="blocks" data-src="http://old.tweetometro.co/robots_May25.html" frameborder="0"></iframe>
          </section>
          <section>
            <h2>Add/Remove Granularity</h2>
          </section>
          <section>
            <h2>Truncate dates</h2>
            <div class="demo">
              <div id="observablehq-46499eaa">
                <div class="observablehq-dateTruncateHeader"></div>
                <div class="observablehq-dateTruncateChart"></div>
                <div style="overflow: hidden;"><a style="display: block; float:right;" href="https://observablehq.com/@berkeleyvis/time-aggregation"><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/@berkeleyvis/time-aggregation.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "dateTruncateHeader") return Inspector.into("#observablehq-46499eaa .observablehq-dateTruncateHeader")();
                  if (name === "dateTruncateChart") return Inspector.into("#observablehq-46499eaa .observablehq-dateTruncateChart")();
                });
              </script>
              
            </div>
          </section>
          <section>
            <h2>Aggregate by date parts</h2>
            <div class="demo">
              <div id="observablehq-d717c549">
                <div class="observablehq-datePartHeader"></div>
                <div class="observablehq-timePartChart"></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/@berkeleyvis/time-aggregation.js?v=3";
                (new Runtime).module(define, name => {
                  if (name === "datePartHeader") return Inspector.into("#observablehq-d717c549 .observablehq-datePartHeader")();
                  if (name === "timePartChart") return Inspector.into("#observablehq-d717c549 .observablehq-timePartChart")();
                });
              </script>
              
            </div>
          </section>
          <section>
            <h2>Window Average/Median</h2>
            <figure class="demo"><img style="width:1000px" src="../shared_images/covidMovingAverage.png" alt="Covid Moving Average by state">
              <figcaption><a href="https://www.nytimes.com/interactive/2020/07/09/us/coronavirus-cases-reopening-trends.html">NY Times How Coronavirus Cases Have Risen Since States Reopened July 9th 2020</a></figcaption>
            </figure>
          </section>
          <section>
            <h2>Seasonality</h2>
            <iframe class="blocks" data-src="http://old.tweetometro.co/" frameborder="0"></iframe>
          </section>
          <section>
            <h2>Loose Scales</h2><a href="http://johnguerra.co/viz/influentials/chi2019/tweets.html">Interaction network in chi2019</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="d3Temporal">
          <section>
            <h1>Temporal with D3</h1>
          </section>
          <section id="multiLineChart">
            <h3 class="demo">Multi-Series Line Chart</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/3884955"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/3884955">Multi-Series Line Chart</a><a class="tiny" target="_blank" href="http://bl.ocks.org/mbostock/">by mbostock</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </section>
          <section>
            <h3 class="demo">Streamgraph</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/4060954"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/4060954">Streamgraph</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </section>
          <section data-background-size="contain" data-background="../shared_images/vad_book_alldiagrams/08_tables-spatial.011.png"></section>
          <section>
            <h3 class="demo">Linechart</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/3883245"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/3883245">Line Chart</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </section>
          <section>
            <h3 class="demo">Stacked Area Chart</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/3020685"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/3020685">Stacked Area Chart</a><a class="tiny" target="_blank" href="http://bl.ocks.org/mbostock/">by mbostock</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </section>
          <section>
            <h3 class="demo">Stacked Radial Area</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/3048740"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/3048740">Stacked Radial Area</a><a class="tiny" target="_blank" href="http://bl.ocks.org/mbostock/">by mbostock</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </section>
          <section>
            <h3 class="demo">Stacked Radial Area (cont.)</h3><a href="https://observablehq.com/@d3/radial-area-chart">Radial Area Chart</a>
          </section>
          <section>
            <h3 class="demo">Calendar View</h3>
            <iframe class="blocks" data-src="http://blockbuilder.org/mbostock/4063318"></iframe><a class="tiny" target="_blank" href="http://blockbuilder.org/mbostock/4063318">Calendar View</a><a class="tiny" target="_blank" href="http://bl.ocks.org/mbostock/">by mbostock</a>
            <!-- @john-guerra Note: content extends off-screen and image is not visible-->
          </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">Line charts</li>
              <li class="fragment">Area charts</li>
              <li class="fragment">Other representations</li>
              <li class="fragment">Radial idioms</li>
              <li class="fragment">Modern represtations</li>
              <li class="fragment">HCIL work on temporal</li>
              <li class="fragment">Tips</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.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>