class: center, middle, inverse

# Scientific Data and the Visualization Design Process

<a href="//bl.ocks.org/syntagmatic">Kai Chang</a><br/>
<a href="https://twitter.com/syntagmatic">@syntagmatic</a><br/>

---

class: center, inverse
<img src="stamen-sharing-explosion.gif" width="106%" style="margin-left: -3%"/>
_Facebook Flowers_ by Stamen Design

---

## Metagenomics Visualization

Banfield Lab at UC Berkeley

Studies ecologies of microorganisms, especially bacteria and archaea.

* Gut microbiome
* Focus on highly acidic environments: runoff from gold mining, energy production
* Genetic samples sequenced directly from environment, rather than cultivation

<img src="tree-of-life.jpg" width=35%/>

---

Personal inspiration

## Martin Krzywinski

* Works at the Genome Sciences Center, Canada
* Created Circos, a visualization toolkit for circular graphs

<img src="circos-plottypes.png" width=300/>

---

background-image: url(Krzywinski-1.jpg)

---

class: center
<img src="lizard.genome.jpg" width="108%" style="margin-left: -4%"/>
#### _Lizard Genome Assembly Annotations_ by Martin Krzywinski

---

background-color: #010713
background-image: url(deadlygenomes.jpg)

class: center, bottom
#### _Deadly Genomes_ by Martin Krzywinski

---

background-image: url(citation-networks.png)

class: center, bottom
#### _Citation Networks_ by Moritz Stefaner

---

background-image: url(emergence-of-neuroscience.jpg)

class: center, bottom
#### _The Emergence of Neuroscience_ by Moritz Stefaner

---

## Genome Summary

Displays the number of features/genes associated with an enzyme or metabolic pathway for a set of organisms in a matrix heatmap.

Our task: Improve the performance and design for large genome summaries.

![](metag-1.png)

---

background-image: url(ggkbase-create-summary-grid.gif)

---

background-image: url(metag-1.png)

---

background-image: url(metag-2.png)

---

background-image: url(metag-3.png)

---

background-image: url(ggkbase.png)

---

background-image: url(metag-10.png)

---

background-image: url(removing-parcoords-filter.gif)

class: center, bottom
#### Dynamic brushing/filtering with Parallel Coordinates

---

class: center, middle
<img src="removing-parcoords-filter.gif" height=400px>
#### Dimensions with Taxonomic Hierarchy

---

background-image: url(metag-4.png)

---

background-image: url(metag-5.png)

---

background-image: url(metag-6.png)

---

class: inverse, center
<img src="map-of-the-markets.png" width="114%" style="margin-left: -7%"/>

_Map of the Markets_

---

background-image: url(metag-7.png)

class: center, bottom
#### Treemap Colored by Species Winner %

---

background-image: url(metag-8.png)

class: center, bottom
#### Treemap Colored by Class Winner %

---

background-color: #000
background-image: url(metag-9.png)

---

background-image: url(metag-organisms.png)

---

background-image: url(thiocyanate-partition-hover.gif)

---

background-color: #000
background-image: url(metag-11.png)

---

background-color: #000
background-image: url(genome-summary-interactions.gif)

---

## Mike Bostock

* Creator of Polymaps, Protovis and D3.js
* Former graphics editor at NY Times

<img src="bostock.png" width="70%"/>

---

background-color: #fcfcfa
background-image: url(miserables-matrix.gif)

class: center, bottom
#### _Les Misérables Co-occurrence_ by Mike Bostock

---

background-image: url(force-directed.gif)

class: center, bottom
#### _Force-Directed Graph_ by Mike Bostock

---

background-image: url(pathways.jpg)

#### _Metabolic Pathways_

---
### Links

* [Watercolor Maps](//maps.stamen.com/watercolor/#9/35.4676/-97.5164)
* [Facebook Flowers](//stamen.com/work/facebook-flowers/)
* [Evolution of the Flowers](//content.stamen.com/facebook-flowers)
* [NYT Facebook IPO Sketches](//kpq.github.io/chartsnthings/2012/05/amanda-cox-and-countrymen-chart-the-facebook-i-p-o.html)
* [D3.js](//d3js.org/)
* [Mike Bostock](https://bost.ocks.org/mike/)
* [Mike's blocks](//bl.ocks.org/mbostock)
* [Kai's blocks](//bl.ocks.org/syntagmatic)

---

### Possible Discussion Topics

* D3.js the JavaScript visualization library
* Web visualization practitioners, collaboration as an open source community
* Open data, especially government sources like USDA, BLS and USGS
* Learning to code and create visualizations
* Stamen and NY Time's graphic design process
* Multidimensional visualization and parallel coordinates
* Visual perception and graphic design

Notes for current slide

Notes for next slide

Scientific Data and the Visualization Design Process

Kai Chang
@syntagmatic

1 / 35

Facebook Flowers by Stamen Design

2 / 35

Metagenomics Visualization

Banfield Lab at UC Berkeley

Studies ecologies of microorganisms, especially bacteria and archaea.

Gut microbiome
Focus on highly acidic environments: runoff from gold mining, energy production
Genetic samples sequenced directly from environment, rather than cultivation

3 / 35

Personal inspiration

Martin Krzywinski

Works at the Genome Sciences Center, Canada
Created Circos, a visualization toolkit for circular graphs

4 / 35

5 / 35

Lizard Genome Assembly Annotations by Martin Krzywinski

6 / 35

Deadly Genomes by Martin Krzywinski7 / 35

Citation Networks by Moritz Stefaner8 / 35

The Emergence of Neuroscience by Moritz Stefaner9 / 35

Genome Summary

Displays the number of features/genes associated with an enzyme or metabolic pathway for a set of organisms in a matrix heatmap.

Our task: Improve the performance and design for large genome summaries.

10 / 35

11 / 35

12 / 35

13 / 35

14 / 35

15 / 35

16 / 35

Dynamic brushing/filtering with Parallel Coordinates17 / 35

Dimensions with Taxonomic Hierarchy

18 / 35

19 / 35

20 / 35

21 / 35

Map of the Markets

22 / 35

Treemap Colored by Species Winner %23 / 35

Treemap Colored by Class Winner %24 / 35

25 / 35

26 / 35

27 / 35

28 / 35

29 / 35

Mike Bostock

Creator of Polymaps, Protovis and D3.js
Former graphics editor at NY Times

30 / 35

Les Misérables Co-occurrence by Mike Bostock31 / 35

Force-Directed Graph by Mike Bostock32 / 35

Metabolic Pathways33 / 35

Links

34 / 35

Possible Discussion TopicsD3.js the JavaScript visualization library
Web visualization practitioners, collaboration as an open source community
Open data, especially government sources like USDA, BLS and USGS
Learning to code and create visualizations
Stamen and NY Time's graphic design process
Multidimensional visualization and parallel coordinates
Visual perception and graphic design
35 / 35

Facebook Flowers by Stamen Design

2 / 35

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Esc	Back to slideshow