CS 6774


class: center, middle, inverse

# California Forest Fires
## 2000 - 2017


.footnote[ by [Umar Shaik](https://github.com/ufshaikc/cs6774)
]
---


<div class="container" style="width: 100%; height: 100vh; margin: 0px">
  <div class="row">
    <div class="col">
      <h1 id="title" >Agenda</h1>
      <h3>
              1. Input Dataset          <br/>
              2. Gantt Chart   <br/>
              3. Timeline Baloon Colored      <br/>
              4. Timeline Baloon Animated            <br/>
              5. Conclusion            <br/>
          </h3>
      </div>
      <div 
        class="col" 
        style="height:67vh; width: 200px; background-size: cover; background-image: url(https://www.northeastern.edu/graduate/blog/wp-content/uploads/2019/01/chart-data-desk-590022.jpg);"
          />
      </div>
    </div>
  </div>



---
<h1 id="title" >1. Input Dataset</h1>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Start Date</th>
      <th>End Date</th>
      <th>Intensity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>01-10-2017</td>
      <td>02-10-2017</td>
      <td>0.1</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>01-11-2017</td>
      <td>07-11-2017</td>
      <td>0.5</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>01-12-2017</td>
      <td>30-12-2017</td>
      <td>1</td>
    </tr>

  </tbody>
</table>

* Intensity is the acres of land burned, which is normalized on a scale of 0 to 1.
* Name - Categorical
* Start Date / End Date - Quantitative -> Sequential
* Intensity - Ordinal

---

# 2. Gantt Chart [*](./calfire-box.html) [#](https://www.w3schools.com/colors/colors_picker.asp)
What is the dependency of intensity on the duration of the event?

Why: {`Locate`, `Attributes -> Many -> Dependency` }

How: {` Arrange -> Separate`,  `Map - Ordered -> Color -> Saturation, Ordered -> Size -> length`}

Channels: `Hue` instead of `Saturation` for Intensity (Ordinal)

---

<!--<object width="400" height="200" type="text/html" data="https://www.w3schools.com/colors/colors_picker.asp" border="1" >-->
<!--</object>-->
<!-- ----->

# 3. Timeline Baloon Colored [*](./calfire-box.html)[#](https://www.w3schools.com/colors/colors_picker.asp)

What is the intensity dependency on the duration of the event?

Why: {`Locate`, `Attributes -> Many -> Dependency` }

How: {` Arrange -> Separate`, `Map - Ordered -> Color -> Saturation, Ordered -> Size -> length / Area`}

Channels: `Saturation` instead of `Hue` for Duration Name (Categorical)

---

<!--<object width="800" height="420" type="text/html" data="calfire-box.html" border="1" >-->
<!--</object>-->
<!-- ----->

# 4. Timeline Baloon Animated [*](./calfire-box.html)[#](https://www.w3schools.com/colors/colors_picker.asp)

At what point did the intensity actually increase?

Why: {`Locate`, `Attributes -> One -> Extremes` }

How: {` Arrange -> Separate`, `Map - Ordered -> Color -> Saturation, Ordered -> Size -> length / Area`}

Channel: `Hue` for Intensity (Animation)


<!--<object width="800" height="420" type="text/html" data="calfire-box.html" border="1" >-->
<!--</object>-->

---

# 5. Take Away Points

* Using `Hue` for ordinal and `Saturation` for categorical proved useful in our case.
* Eyes beat memory, easy to compare visuals by moving side-by-side.
* Animation's are good, if considered in small multiples instead of large scale.
* Timeline balloons are only good for smaller dataset.