d3 & Hierarchical Datasets

# Hierarchical Datasets
### When?  What?  How?

---
.context[hierarchical data]
# Our Goal?

By the end of this session,<br>
you should have a<br>
solid understanding,<br>
and a comfort with,<br>
hierarchical datasets.

--
### We will learn:

--
1. *When* do they matter?

--
2. *What* are they?

--
3. *How* do we work with them?<br>

--
... & some d3 visuals
<br> <br>
--
(Today we focus on the data. We'll apply it to visuals, but that'll be light.)

---
class: center, middle

## When do they matter?

---
.context[hierarchical data]
# When do they matter?

<br> <br>
Smart data structures and dumb code works a lot better<br>
than the other way around.<br>
.author[—Eric S. Raymond (The Cathedral and the Bazaar)]
<br> <br>
--

Bad programmers worry about the code.<br>
Good programmers worry about data structures and their relationships.<br>
.author[—Linus Torvalds]
<br> <br>

--
“Data! Data! Data!" he cried impatiently.<br>
"I can't make bricks without clay.”<br>
.author[—Sherlock Holmes]
<br> <br>
<br> <br>
--
.center[**They matter now....**]

---
name: natural-hierarchies
.context[when it matters]

# Natural hierarchies

Some data is naturally hierarchical:

---
template: natural-hierarchies
* Country ⇢ State ⇢ City ⇢ Street ⇢ House

``` json
{
  "continent": "North America",
  "countries": [
    { "country": "Canada" },
    { "country": "Mexico" },
    { "country": "United States",
      "states": [
        { "state": "California" },
        { "state": "Indiana",
          "cities": [
            { "city": "Fishers" },
            { "city": "Carmel" },
            { "city": "Indianapolis" }
          ]
        }
      ]
    }
  ]
}
```
---
template: natural-hierarchies
.context[when it matters]

* Country ⇢ State ⇢ City ⇢ Street ⇢ House
* CEO ⇢ EVP ⇢ SVP ⇢ VP ⇢ DIR ⇢ MGR

--
* Folder ⇢ Subfolder ⇢ File

--
* Dictionary ⇢ Letter ⇢ Word ⇢ Part-of-speech ⇢ Definitions ⇢ Examples
<br> <br>
<br> <br>
.right[<img height="250" src="../images/hierarchyDefinition.jpeg"/>]

---
.context[when it matters]

# Natural hierarchies

--
<table height="100%">
    <tr><td><span class="exercise"><i>Other examples of naturally occurring hierarchies?</i></span></td></tr>
    <tr><td><span class="exercise"> 
        <br> <br>
</span></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
</table>

---
.context[when it matters]

# Natural hierarchies

<table height="100%">
    <tr><td><span class="exercise"><i>Other examples of naturally occurring hierarchies?</i></span></td></tr>
    <tr><td><span class="exercise"><i>Paper & Pencil exercise:</i> Draw a picture of a dataset that you want to work with that is hierarchical.</span></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
</table>

<table>
    <tr>
        <td><iframe width="400" height="250" frameborder="0" src="../d3/tree.html"></iframe></td>
        <td><iframe width="400" height="250" frameborder="0" src="../d3/treemap.html"></iframe></td>
    </tr>
    <tr>
        <td><div style="text-align: center;">
            <iframe style="display: block;" width="400" height="250" frameborder="0" src="../d3/sunburst.html"></iframe></div></td>
        <td><iframe width="400" height="250" frameborder="0" src="../d3/pack.html"></iframe></td>
    </tr>
</table>

---

## What are they?

---
.context[what are they]

# Model your data with Legos

_How do we make this “real” for participants?  Label blocks? Or use colors for data types?_

---
.context[what are they]

# Hierarchy vs. Tabular

<table class="display dataTable no-footer">
  <thead>
    <tr role="row"><th>Hierarchical</th><th>Tabular</th></tr>
  </thead>
<tr role="row" class="odd">
    <td>Relationships are intrinsic</td><td class=" dt-right">Relationships formed at run-time</td>
</tr>
    <tr role="row" class="even"><td>smaller data</td>
    <td class=" dt-right">larger data</td></tr>
    </tr>
        <tr role="row" class="even"><td>a couple of layers of one-to-many relationships</td>
    <td class=" dt-right">many-to-many relationships</td></tr>
    <tr role="row" class="even"><td>gateway to sunbursts, trees, treemaps, circle packs, and who knows what else</td>
    <td class=" dt-right"></td></tr>
</table>

---
.context[what are they]

# Hierarchical data = JSON Arrays + JSON Objects

## JSON Array
`[ "Listen", "Learn", "Grow" ]`
    1. an ordered list of values, seperated by commas
    2. it can store strings, numbers, booleans, objects, other arrays, or a combination
    3. surrounded by [ and ] (square brackets)
<br> <br>

--
## JSON Object
`{ "name": "John", "age": 30, "motto": [ "Listen", "Learn", "Grow" ] }`
    1. a list of key/value pairs
        * each pair is seperated a comma
        * keys and values are separated by a colon
    2. each key is a string; each value is a strings, numbers, booleans, objects, other arrays
    3. surrounded by { and } (curly braces)

---
.context[what are they]

---

## How do we work with them?

---

# Read the docs ([d3-hierarchy](https://github.com/d3/d3-hierarchy "d3 hierarchy api documentation"))

We're moving from concept to code.

`stratify`

---

## Some d3 visuals

---
.context[examples]

# Zip through some examples
* Simple Treemap
* Same script, but more data
* Same script, create original hierarchy from tabular
* Same script, create more data hierarchy from tabular

---
.contextLL[slides created with remark.js]

# Thanks!