Skip to content

Commit

Permalink
improved getting started section
Browse files Browse the repository at this point in the history
  • Loading branch information
cornhundred committed Feb 16, 2017
1 parent 893a1d9 commit 8b0484e
Show file tree
Hide file tree
Showing 51 changed files with 123 additions and 298 deletions.
2 changes: 1 addition & 1 deletion docs/_build_html/.buildinfo
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Sphinx build info version 1
# This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
config: e22f7d2efb6cf8a09998f298823ed2eb
config: 6d951a9cf5925d085b5d376fd31212d6
tags: 645f666f9bcd5a90fca523b33c5a78b7
Binary file modified docs/_build_html/.doctrees/app_integration.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/case_studies.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/clustergrammer_js.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/clustergrammer_py.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/clustergrammer_web.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/clustergrammer_widget.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/environment.pickle
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/getting_started.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/index.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/interacting_with_viz.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/license.doctree
Binary file not shown.
Binary file modified docs/_build_html/.doctrees/matrix_format_io.doctree
Binary file not shown.
22 changes: 10 additions & 12 deletions docs/_build_html/_sources/getting_started.txt
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,25 @@ Interacting with Clustergrammer
===============================
Clustergrammer produces highly interactive visualizations that enable intuitive exploration of high-dimensional data including:

- zooming/panning
- row and column reordering (e.g. reorder based on sum)
- interactive dendrogram
- dimensionality reduction (e.g. filter rows based on variance)a
- interactive row/column categories
- cropping
- :ref:`zooming_and_panning`
- :ref:`row_col_reordering` (e.g. reorder based on sum)
- :ref:`interactive_dendrogram`
- :ref:`interactive_dim_reduction` (e.g. filter rows based on variance)a
- :ref:`interactive_categories`
- :ref:`cropping`

Press play or interact with the demo:
Press play or interact with the demo (see :ref:`interacting_with_viz` for more information):

.. raw:: html

<iframe id='iframe_preview' src="http://amp.pharm.mssm.edu/clustergrammer/demo/" frameBorder="0" style='height: 495px; width:730px; margin-bottom:15px;'></iframe>

For more information please see the :ref:`interacting_with_viz` section.

Clustergrammer also has biology-specific features including:

- mouseover gene (row) names to show the full name and description of a gene (through `Harmonizome`_)
- find biological information (e.g. up-stream transcription factors) specific to your gene list using enrichment analysis through `Enrichr`_
- mouseover gene names and description look-up (using `Harmonizome`_)
- enrichment analysis to find biological information (e.g. up-stream transcription factors) specific to your set of genes (using `Enrichr`_)

For more information on Clustergrammer's biology specific features please see the :ref:`biology_specific_features` section.
See :ref:`biology_specific_features` for more information.

.. _`Enrichr`: http://amp.pharm.mssm.edu/Enrichr/
.. _`Harmonizome`: http://amp.pharm.mssm.edu/Harmonizome/
8 changes: 5 additions & 3 deletions docs/_build_html/_sources/index.txt
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,17 @@ The easiest ways to use Clustergrammer to produce an interactive and shareable h
- upload a tab-separated matrix file using the Clustergrammer web app `homepage`_
- or use the :ref:`clustergrammer_widget` within a `Jupyter`_ notebook and share using `nbviewer`_

The :ref:`clustergrammer_web` is the quickest way for a user to generate an interactive and shareable visualization (see `example visualization`_). For more technical users that want to produce the visualization as part of a workflow, the :ref:`clustergrammer_widget` enables visualizations to be built within Jupyter notebooks and shared through Jupyter's `nbviewer`_ (see `example notebook`_). Web developers can use Clustergrammer's core libraries (:ref:`clustergrammer_js` and :ref:`clustergrammer_py`) or the :ref:`clustergrammer_web_api` to dynamically generate visualizations for their own web applications (see examples in :ref:`app_integration`).
The :ref:`clustergrammer_web` is the quickest way for a user to generate an interactive and shareable visualization (see `example visualization`_). For more technical users who want to produce the visualization as part of a workflow, the :ref:`clustergrammer_widget` enables visualizations to be built within Jupyter notebooks and shared through Jupyter's `nbviewer`_ (see `example notebook`_). Web developers can use Clustergrammer's core libraries (:ref:`clustergrammer_js` and :ref:`clustergrammer_py`) or the :ref:`clustergrammer_web_api` to dynamically generate visualizations for their own web applications (see examples in :ref:`app_integration`).

Please read the :doc:`getting_started` guide for more detailed information on using Clustergrammer.
Please read the :doc:`getting_started` guide for more information.

Use Cases
=========
Clustergrammer was built to visualize biological data but is applicable for visualizing high-dimensional data in general. Below are links to several example use cases (see :ref:`case_studies` for more information):

- `Cancer Cell Line Encyclopedia Gene Expression Data`_
- `Zika Virus RNA-seq Data Visualization`_
- `Single Cell RNA-seq Data Visualization`_
- `Iris flower dataset`_
- `MNIST Handwritten Digit Dataset`_

Expand Down Expand Up @@ -68,4 +69,5 @@ Contents:
.. _`Cancer Cell Line Encyclopedia Gene Expression Data`: http://amp.pharm.mssm.edu/clustergrammer/CCLE/
.. _`Zika Virus RNA-seq Data Visualization`: http://nbviewer.jupyter.org/github/maayanlab/Zika-RNAseq-Pipeline/blob/master/Zika.ipynb
.. _`Iris flower dataset`: http://nbviewer.jupyter.org/github/MaayanLab/iris_clustergrammer_visualization/blob/master/Iris%20Dataset.ipynb
.. _`MNIST Handwritten Digit Dataset`: https://maayanlab.github.io/MNIST_heatmaps/
.. _`MNIST Handwritten Digit Dataset`: https://maayanlab.github.io/MNIST_heatmaps/
.. _`Single Cell RNA-seq Data Visualization`: http://nbviewer.jupyter.org/github/MaayanLab/single_cell_RNAseq_Visualization/blob/master/Single%20Cell%20RNAseq%20Visualization%20Example.ipynb
26 changes: 14 additions & 12 deletions docs/_build_html/_sources/interacting_with_viz.txt
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,27 @@

Interacting with the Visualization
----------------------------------
Data visualizations benefit enormously from user interactions that allow users to explore and generate new views of their data. Clustergrammer produces highly interactive heatmaps that enable users to intuitively explore and perform complex transformations on their data. Clustergrammer visualizations are consistent across the :ref:`clustergrammer_web` and the :ref:`clustergrammer_widget` and are built using :ref:`clustergrammer_js`. This section will cover the types of interactions available to the user.
Data visualizations benefit enormously from user interactions that allow users to explore their data and interactively generate new views. Clustergrammer produces highly interactive heatmaps that enable users to intuitively explore and perform complex transformations on their data. Clustergrammer visualizations are consistent across the :ref:`clustergrammer_web` and the :ref:`clustergrammer_widget` and are built using the :ref:`clustergrammer_js` library. This section will cover the types of interactions that are available to the user.

Introduction to Clustergrams/Heatmaps
=====================================
Clustergrammer visualizes high-dimensional data as a hierarchically clustered matrix with colored tiles (red for positive numbers and blue for negative numbers) and row/column labels, commonly referred to as a heatmap or clustergram (this documentation uses heatmap and clustergram interchangeably, see `Eisen et al., 1998`_ for an early example using biological data). Clustergrams also typically have `dendrogram trees`_ to depict the hierarchy of row and column clusters produced by `hierarchical clustering`_.
Clustergrammer visualizes high-dimensional data as a hierarchically clustered matrix with colored tiles (red for positive numbers and blue for negative numbers) and row/column labels, commonly referred to as a heatmap or clustergram (this documentation uses the terms 'heatmap' and 'clustergram' interchangeably, see `Eisen et al., 1998`_ for an early example using biological data). Clustergrams also typically use `dendrogram trees`_ to depict the hierarchy of row and column clusters produced by `hierarchical clustering`_.

Heatmaps are a powerful visualizations that enable users to directly visualize high-dimensional data without the loss of information and interpretability associated with dimensionality reduction techniques (e.g. `t-SNE`_). For instance, columns can depict measurements (e.g. data-points) and rows can depict dimensions (e.g. measured variables). In this way, heatmaps can visualize thousands of data-points in thousands of dimensions. However, static heatmaps are of limited use for visualizing large datasets (e.g. matrix cells and labels become too small to read). Furthermore, static heatmaps prevent users from interactively exploring their data, e.g. reordering rows/columns.
Heatmaps are powerful visualizations that enable users to directly visualize high-dimensional data without the loss of information and interpretability associated with dimensionality reduction techniques (e.g. `t-SNE`_). For instance, columns can depict measurements (e.g. data-points) and rows can depict dimensions (e.g. measured variables). In this way, heatmaps can visualize thousands of data-points in thousands of dimensions (e.g. in thousand-dimensional space). However, static heatmaps are of limited use for visualizing large datasets (e.g. for large matrices, visualization elements and labels become too small to read). Furthermore, static heatmaps prevent users from interactively exploring their data, e.g. reordering rows/columns.

.. _zooming_and_panning:

Zooming and Panning
===================
Clustergrammer allows users to zoom and pan by scrolling and dragging. This is useful for working with large datasets (where labels are not readable without zooming) and for zooming into regions of interest of your data.
Clustergrammer allows users to zoom and pan into the heatmap by scrolling and dragging. This is useful for working with large datasets (where labels are not readable without zooming) and for zooming into regions of interest.

**Zooming Panning Behavior**
**Zooming and Panning Behavior**

Zooming occurs in two stages. First zooming/panning occurs in the direction that matrix cells have been more compressed (e.g. if there are more more rows than columns, then matrix cells will be compressed in the vertical direction and will be wide). Once zooming has decompressed matrix cells (e.g. matrix cells are now squares) then zooming/panning occurs in both directions. For instance, when visualizing a matrix with many more columns than rows zooming/panning will occur in the horizontal direction first until matrix cells have equal width and height, then zooming/panning will be allowed in the vertical and horizontal direction.
Zooming occurs in two stages. First zooming/panning occurs in the direction that matrix cells have been more compressed (e.g. if there are more more rows than columns, then matrix cells will be compressed in the vertical direction and the cells will be wide). Once zooming has decompressed matrix cells (e.g. matrix cells height and width are the same) then zooming/panning occurs in both directions. For instance, when visualizing a matrix with many more columns than rows zooming/panning will occur in the horizontal direction first until matrix cells have equal width and height, then zooming/panning will be allowed in the vertical and horizontal direction.

**Large Matrix Behavior**
**Large Matrix Zooming and Panning Behavior**

Clustergrammer is capable of visualizing matrices with ~500,000 to ~1,000,000 matrix cells, but is optimized to visualize matrices with more rows than columns. Clustergrammer uses row-downsampling to improve visualization performance with large matrices. If a user visualizes a matrix with a large number of rows (e.g. >1000-2000) such that each matrix cell is less than 1 pixel tall, then Clustergrammer will perform downsampling. When zoomed out, the user will see a downsampled version of their data. Zooming into the matrix will bring up successively less downsampled views until the original data is shown (e.g. when the original matrix cells are > 1 pixels tall). Clustergrammer will also not display row labels until their font size is above ~5 pixels and they are readable. Clustergrammer will also hide row/column labels while zooming into large matrices to improve performance.
Clustergrammer is capable of visualizing matrices with ~500,000 to ~750,000 matrix cells, but is optimized to visualize matrices with more rows than columns. Clustergrammer uses row-downsampling to improve visualization performance for large matrices. If a user visualizes a matrix with a large number of rows (e.g. >1000-2000) such that each matrix cell is less than 1 pixel tall, then Clustergrammer will perform row downsampling. When zoomed out, the user will see a downsampled (e.g. coarse grained) version of their data. Zooming into the matrix will bring up successively less downsampled views until the original data is shown (e.g. when the original matrix cells are > 1 pixels tall). Clustergrammer will also only display row labels when theeir font size is at a readable level (above ~5 pixels). Clustergrammer will also hide row/column labels while zooming into large matrices to improve performance.


Mouseover Interactions
Expand Down Expand Up @@ -74,8 +76,8 @@ For small matrices dimensionality reduction is animated to help the user visuali

.. _interactive_dendrogram:

Dendrogram
==========
Interactive Dendrogram
======================
Clustergrams typically have `dendrogram trees`_ (for both rows and columns) to depict the hierarchy of row and column clusters produced by `hierarchical clustering`_. The height of the branches in the dendrogram depict how different clusters are from each other. :ref:`clustergrammer_py` calculates hierarchical clustering using `SciPy`_'s hierarchy_ clustering functions (with the default linkage type set to average, see `calc_clust.py`_) and saves ten slices of the dendrogram taken evenly across the tree.

**Visualizing Dendrogram Clusters**
Expand All @@ -97,8 +99,8 @@ Each dendrogram cluster has a small triangular crop button above it that allows

.. _interactive_categories:

Categories
==========
Interactive Categories
======================
Prior knowledge about our system can be represented as row and column categories in a heatmap. For instance, our columns may represent cell lines and our categories may represent the tissues of these cell lines. Overlaying categories on our heatmap can help us understand the relationship between our prior knowledge and our data. For instance, we may find that columns with the same category (e.g. the same tissue) cluster near each other based on the underlying data (e.g. gene expression) and we can conclude that our prior knowledge agrees with clustering identified in a data-driven manner. Similarly we can explore how categories are distributed when the matrix is :ref:`reordered <row_col_reordering>`. We can also use categories to overlay numerical information (e.g. duration of drug treatment of a cell line) and ask similar questions. Please see :ref:`matrix_format_io` for more information on how to encode categories in your data.

**Interacting with Categories**
Expand Down
2 changes: 1 addition & 1 deletion docs/_build_html/_sources/matrix_format_io.txt
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.. _matrix_format_io:

Matrix Formats and Input/Output
------------------------------
-------------------------------
Clustergrammer takes as input either:

- a tab-separated matrix file
Expand Down
68 changes: 22 additions & 46 deletions docs/_build_html/_static/basic.css
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ div.sphinxsidebar #searchbox input[type="text"] {
width: 170px;
}

div.sphinxsidebar #searchbox input[type="submit"] {
width: 30px;
}

img {
border: 0;
max-width: 100%;
Expand Down Expand Up @@ -122,8 +126,6 @@ ul.keywordmatches li.goodmatch a {

table.contentstable {
width: 90%;
margin-left: auto;
margin-right: auto;
}

table.contentstable p.biglink {
Expand Down Expand Up @@ -151,14 +153,9 @@ table.indextable td {
vertical-align: top;
}

table.indextable ul {
table.indextable dl, table.indextable dd {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}

table.indextable > tbody > tr > td > ul {
padding-left: 0em;
}

table.indextable tr.pcap {
Expand Down Expand Up @@ -190,13 +187,6 @@ div.genindex-jumpbox {
padding: 0.4em;
}

/* -- domain module index --------------------------------------------------- */

table.modindextable td {
padding: 2px;
border-collapse: collapse;
}

/* -- general body styles --------------------------------------------------- */

div.body p, div.body dd, div.body li, div.body blockquote {
Expand Down Expand Up @@ -231,6 +221,10 @@ div.body td {
text-align: left;
}

.field-list ul {
padding-left: 1em;
}

.first {
margin-top: 0 !important;
}
Expand Down Expand Up @@ -347,6 +341,10 @@ table.docutils td, table.docutils th {
border-bottom: 1px solid #aaa;
}

table.field-list td, table.field-list th {
border: 0 !important;
}

table.footnote td, table.footnote th {
border: 0 !important;
}
Expand Down Expand Up @@ -383,20 +381,6 @@ div.figure p.caption span.caption-number {
div.figure p.caption span.caption-text {
}

/* -- field list styles ----------------------------------------------------- */

table.field-list td, table.field-list th {
border: 0 !important;
}

.field-list ul {
margin: 0;
padding-left: 1em;
}

.field-list p {
margin: 0;
}

/* -- other body styles ----------------------------------------------------- */

Expand Down Expand Up @@ -447,6 +431,15 @@ dl.glossary dt {
font-size: 1.1em;
}

.field-list ul {
margin: 0;
padding-left: 1em;
}

.field-list p {
margin: 0;
}

.optional {
font-size: 1.3em;
}
Expand Down Expand Up @@ -505,13 +498,6 @@ pre {
overflow-y: hidden; /* fixes display issues on Chrome browsers */
}

span.pre {
-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}

td.linenos pre {
padding: 5px 0px;
border: 0;
Expand Down Expand Up @@ -603,16 +589,6 @@ span.eqno {
float: right;
}

span.eqno a.headerlink {
position: relative;
left: 0px;
z-index: 1;
}

div.math:hover a.headerlink {
visibility: visible;
}

/* -- printout stylesheet --------------------------------------------------- */

@media print {
Expand Down
Binary file modified docs/_build_html/_static/comment-bright.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/comment-close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/comment.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/down-pressed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/down.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/file.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions docs/_build_html/_static/jquery.js

Large diffs are not rendered by default.

Binary file modified docs/_build_html/_static/minus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_build_html/_static/plus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8b0484e

Please sign in to comment.