multifaceted visualization

# multifaceted visualization

Kai Chang 
<a href="//bl.ocks.org/syntagmatic">bl.ocks.org/syntagmatic</a>

---

### Matrix or Punchcard Plots

Data points are rows and dimensions/properties are columns.
These visualizations are analogous to a spreadsheet or data table.

### Small Multiples

Display the same visualization multiple times. 
Either once for each dimension/category or varying along a dimension like time.

### Parallel Coordinates

Dimensions are arranged as vertical axes, datapoints as polylines across the visualization. 
These are not standard line graphs, unless the dimensions are slices of time.

### Visual Encodings and Animation

Such as Hans Rosling's animated bubbleplot. 
Use color, size, position, brightness, strokes, shapes and other visual encodings to layer in data attributes.

### Interaction

Allow the user to interactively filter or change dimensions of the visualization.

---

Camp Fire 
Nov 8, 2018 
NASA Landsat 8

---

## San Francisco Bay Area Air Quality

---

---

## Air Quality Calendars

Small multiples of daily air quality in five Chinese cities. 
Data collected by the US State Department. 
Based on Daniel Overstreet's <a href="//bl.ocks.org/dhoboy/c6d3072074b1a9f717cf66068f34d8b6">China Air Quality Calendars</a>

---

## Small Multiples

Also see <a href="https://bost.ocks.org/mike/drought/">Sanity-check Drought Map</a> by Mike Bostock

---

<blockquote>Cubism, by giving the inside and outside, 
 the top, bottom, back, and front and the rest, in two dimensions, drops the illusion of perspective in favor of instant sensory awareness of the whole</blockquote>
Marshall McLuhan

---

## Nutrient Parallel Coordinates
<a href="//bl.ocks.org/syntagmatic/raw/3150059/"><img src="nut-parcoords.gif"/>

<a href="//bl.ocks.org/syntagmatic/raw/3150059/">Nutrient Explorer</a>

<a href="https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953">Nutrient Parallel Coordinates IV</a>

---

## Metagenomics - Enviromental microbial biodiversity

---

---

---

---

---

---

---

---

---

---

.left-column[
## Satellite Ground Tracks
]
.right-column[
<a href="https://bl.ocks.org/syntagmatic/4446b31c6cd746eedaeb"><img src="space-stations.png" width=360/></a> 
<a href="https://bl.ocks.org/syntagmatic/6c149c08fc9cde682635"><img src="science-sats-2.gif" width=360/></a> 
<a href="//bl.ocks.org/syntagmatic/dd17d7b62fb4fbb56897"><img src="debris-fields.gif" width=360/></a>
]

---

<a href="https://bl.ocks.org/syntagmatic/1f48d7abcd8e4cb040bd9263cff10700"><img src="exoplanets.png" width=600/></a>
]

---

## WHO Immunization Report

<a href="https://github.com/stamen/who-immunization-2016#who-immunization-report">Open Source Visualizations</a>

Disclaimer: These screenshots were development prototypes

---

## 4 Dimensional Polytopes

**<a href="https://bl.ocks.org/syntagmatic/c7d6ea0132c956140cbb">Simplex, Tesseract and Orthoplex</a>**

<a href="//syntagmatic.github.io/hypersolid/examples/600trunc-simple.html">Truncated 600-cell</a>
]
.right-column[
<img src="hypersolid-1.png" width=530 style="margin-left: 30px"/>

<img src="hypersolid-2.png" width=190 />
<img src="hypersolid-3.png" width=190 />
<img src="hypersolid-4.png" width=190 />

These are the four-dimensional analogues of the tetrahedron, cube, octahedron, icosahedron and dodecahedron... plus the 24-cell.
]

---

## 4 Dimensional Polytopes

<a href="https://bl.ocks.org/syntagmatic/c7d6ea0132c956140cbb">Simplex, Tesseract and Orthoplex</a>

**<a href="https://bl.ocks.org/syntagmatic/a6a51f04e61ff21341f2">24-cell</a> <a href="//syntagmatic.github.io/hypersolid/examples/24cell.html">·</a>**

<a href="//syntagmatic.github.io/hypersolid/examples/600trunc-simple.html">Truncated 600-cell</a>
]
.right-column[

<img src="hypersolid-1.png" width=530 style="margin-left: 30px"/>

<img src="hypersolid-2.png" width=190 />

<img src="hypersolid-3.png" width=190 />
<img src="hypersolid-4.png" width=190 />

]

---

## 4 Dimensional Polytopes

<a href="https://bl.ocks.org/syntagmatic/c7d6ea0132c956140cbb">Simplex, Tesseract and Orthoplex</a>

**<a href="https://bl.ocks.org/syntagmatic/2535ea0b1800ff254f58">120-cell</a> <a href="//syntagmatic.github.io/hypersolid/examples/120cell.html">·</a>**

<a href="//syntagmatic.github.io/hypersolid/examples/600trunc-simple.html">Truncated 600-cell</a>
]
.right-column[

<img src="hypersolid-1.png" width=530 style="margin-left: 30px"/>
<img src="hypersolid-2.png" width=190 />

<img src="hypersolid-3.png" width=190 />

<img src="hypersolid-4.png" width=190 />

]

---

## 4 Dimensional Polytopes

<a href="https://bl.ocks.org/syntagmatic/c7d6ea0132c956140cbb">Simplex, Tesseract and Orthoplex</a>

**<a href="https://bl.ocks.org/syntagmatic/e6583e486f6df0c86b0f">600-cell</a> <a href="//syntagmatic.github.io/hypersolid/examples/600cell.html">·</a>**

<a href="//syntagmatic.github.io/hypersolid/examples/600trunc-simple.html">Truncated 600-cell</a>
]
.right-column[

<img src="hypersolid-1.png" width=530 style="margin-left: 30px"/>
<img src="hypersolid-2.png" width=190 />
<img src="hypersolid-3.png" width=190 />

<img src="hypersolid-4.png" width=190 />
]

---

## 4 Dimensional Polytopes

<a href="https://bl.ocks.org/syntagmatic/c7d6ea0132c956140cbb">Simplex, Tesseract and Orthoplex</a>

**<a href="//syntagmatic.github.io/hypersolid/examples/600trunc-simple.html">Truncated 600-cell</a>**
]
.right-column[

<img src="hypersolid-1.png" width=530 style="margin-left: 30px"/>
<img src="hypersolid-2.png" width=190 />
<img src="hypersolid-3.png" width=190 />
<img src="hypersolid-4.png" width=190 />

<img src="hypersolid-5.png" width=190 style="margin-left: 197px;" />
]

---

tack