These are slides from a talk I gave at the Data + Creativity Meetup in Oklahoma City. Thanks to Dave King and Exapive for hosting me.
Slide deck built with remark.
<!DOCTYPE html>
<html>
<head>
<title>Data Visualization and the Community</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Futura';
font-weight: normal;
}
h1, h2, h3, h4 {
font-family: 'Futura';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono, Monaco, Menlo, monospace'; }
.inverse {
background-color: #1c1e19;
color: #f4f3f2;
text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2 {
color: #f4f3f2;
}
.inverse a, a:visited {
color: #f99157;
text-decoration: none;
}
</style>
</head>
<body>
<textarea id="source">
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.
---
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
</textarea>
<script src="remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>