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