Skip to content

Commit

Permalink
improved building_webpage
Browse files Browse the repository at this point in the history
  • Loading branch information
cornhundred committed May 5, 2017
1 parent d93fe5c commit 8cab40d
Show file tree
Hide file tree
Showing 17 changed files with 37 additions and 37 deletions.
Binary file modified docs/_build_html/.doctrees/building_webpage.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/matrix_format_io.doctree
Binary file not shown.
19 changes: 9 additions & 10 deletions docs/_build_html/_sources/building_webpage.txt
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,23 @@ Users can obtain a permanent link to their visualization by manually uploading t

Adding Clustergrammer to a Page
===============================
The :ref:`clustergrammer_js` library can be used to generate an interactive visualization in your webpage. Simply include the :ref:`clustergrammer_js` script in your page and load the pre-calculated :ref:`visualization-JSON <visualization_json>` to generate a visualization. Alternatively, :ref:`clustergrammer_js` can also be included as a node module (see `Clustergrammer-Widget source code`_ for an example with Webpack), or can be used with `RequireJS`_ (see `Clustergrammer RequireJS example`_).
In addition to embedding a visualization hosted by the :ref:`clustergrammer_web` application developers add a Clustergrammer to directly their own page using the core libraries:

**Clustergrammer-JS**: The front-end :ref:`clustergrammer_js` JavaScript library generates the interactive visualization and can be installed via npm: ``npm install Clustergrammer``. See the :ref:`example_pages` for templates to build a site with your visualization

Clustergrammer can be used to generate interactive visualizations for your own web application by: using the :ref:`clustergrammer_js` library on your site, or embedding a visualization provided by the :ref:`clustergrammer_web`.
**Clustergrammer-PY**: The back-end :ref:`clustergrammer_py` Python library clusters a matrix of data and makes the JSON for the front end and can be installed using pip: ``pip install --upgrade clustergrammer``. See the :ref:`clustergrammer_py_workflow` for examples of how cluster your matrix and generate the :ref:`visualization_json`

To make a page, simply include the :ref:`clustergrammer_js` script in your page and load the pre-calculated :ref:`visualization-JSON <visualization_json>` to generate a visualization (use :ref:`clustergrammer_py` to generate this JSON).

The easiest way to generate a visualization of your own data on a webpage is to:
:ref:`clustergrammer_js` can also be included as a node module (see `Clustergrammer-Widget source code`_ for an example with Webpack), or can be used with `RequireJS`_ (see `Clustergrammer RequireJS example`_).

#. Follow the :ref:`clustergrammer_py_workflow` to cluster your matrix and generate the :ref:`visualization_json`
#. Then use the :ref:`example_pages` as templates to build a site with your visualization

These examples require Clustergrammer's JavaScript and Python libraries:
Jupyter Notebook Webpages
=========================

#. the front-end :ref:`clustergrammer_js` JavaScript library generates the interactive visualization
#. the back-end :ref:`clustergrammer_py` Python library clusters a matrix of data and makes the JSON for the front end

The following libraries can be installed using: npm (``npm install Clustergrammer``) and pip (``pip install --upgrade clustergrammer``), respectively.
The :ref:`clustergrammer_widget` can also be used in combination with `nbviewer`_ to share static Jupyter notebook webpages with embedded interactive Clustergrammer visualizations. This is one of the easiest ways to generate a webpage with Clustergrammer visualizations and several of the :ref:`case_studies` are Jupyter notebooks.

.. _`nbviewer`: http://nbviewer.jupyter.org/
.. _`homepage`: http://amp.pharm.mssm.edu/clustergrammer
.. _`Clustergrammer-Widget source code`: https://github.com/MaayanLab/clustergrammer-widget
.. _`RequireJS`: http://requirejs.org/
Expand Down
3 changes: 2 additions & 1 deletion docs/_build_html/_sources/matrix_format_io.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Clustergrammer takes as input either:
- a tab-separated matrix file
- a Pandas DataFrame (using :ref:`clustergrammer_py`)

The tab-separated matrix file can take several formats shown below, which can include row/column categories and name/category titles. In all cases, row and column names must be unique (if input names are not unique then unique integers will be apended to names). Users are encouraged to arrange their matrix with data-points as columns and dimensions as rows, which enables users to take advantage of Clustergrammer's :ref:`interactive_dim_reduction`.
The tab-separated matrix file can take several formats shown below, which can include row/column categories and name/category titles. In all cases, row and column names must be unique (if input names are not unique then unique integers will be appended to names). Users are encouraged to arrange their matrix with data-points as columns and dimensions as rows, which enables users to take advantage of Clustergrammer's :ref:`interactive_dim_reduction`.

The front-end :ref:`clustergrammer_js` library can visualize matrices up to ~500,000 to ~1,000,000 cells in size and is also optimized to visualize matrices with more rows than columns -- this has been done to accommodate datasets with many dimensions (rows) and few measurements (columns) that are common in biology. However very large matrices may take a long time to cluster using the :ref:`clustergrammer_py` library.

Expand Down Expand Up @@ -56,6 +56,7 @@ Row and column categories can be of type: *string* or *value*. If categories are

*Value*-based categories can be useful for adding data to your visualization (e.g. drug-dosage value) that you would like to compare to your other dimensions, but that should not influence your clustering. Both *value* and *string* categories can also be used to reorder your matrix by double-clicking their labels (see :ref:`interactive_categories`).


Matrix File Examples
====================
Several example tab-separated matrix files can be found in `example matrix files`_.
Expand Down
23 changes: 10 additions & 13 deletions docs/_build_html/building_webpage.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
<li class="toctree-l1 current"><a class="current reference internal" href="#">Web-Development with Clustergrammer</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#embedding-clustergrammer">Embedding Clustergrammer</a></li>
<li class="toctree-l2"><a class="reference internal" href="#adding-clustergrammer-to-a-page">Adding Clustergrammer to a Page</a></li>
<li class="toctree-l2"><a class="reference internal" href="#jupyter-notebook-webpages">Jupyter Notebook Webpages</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="clustergrammer_js.html">Clustergrammer-JS</a></li>
Expand Down Expand Up @@ -158,19 +159,15 @@ <h2>Embedding Clustergrammer<a class="headerlink" href="#embedding-clustergramme
</div>
<div class="section" id="adding-clustergrammer-to-a-page">
<h2>Adding Clustergrammer to a Page<a class="headerlink" href="#adding-clustergrammer-to-a-page" title="Permalink to this headline"></a></h2>
<p>The <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> library can be used to generate an interactive visualization in your webpage. Simply include the <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> script in your page and load the pre-calculated <a class="reference internal" href="clustergrammer_js.html#visualization-json"><span class="std std-ref">visualization-JSON</span></a> to generate a visualization. Alternatively, <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> can also be included as a node module (see <a class="reference external" href="https://github.com/MaayanLab/clustergrammer-widget">Clustergrammer-Widget source code</a> for an example with Webpack), or can be used with <a class="reference external" href="http://requirejs.org/">RequireJS</a> (see <a class="reference external" href="https://github.com/MaayanLab/clustergrammer_requirejs">Clustergrammer RequireJS example</a>).</p>
<p>Clustergrammer can be used to generate interactive visualizations for your own web application by: using the <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> library on your site, or embedding a visualization provided by the <a class="reference internal" href="clustergrammer_web.html#clustergrammer-web"><span class="std std-ref">Clustergrammer Web App</span></a>.</p>
<p>The easiest way to generate a visualization of your own data on a webpage is to:</p>
<ol class="arabic simple">
<li>Follow the <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py-workflow"><span class="std std-ref">Python Workflow Examples</span></a> to cluster your matrix and generate the <a class="reference internal" href="clustergrammer_js.html#visualization-json"><span class="std std-ref">Visualization-JSON</span></a></li>
<li>Then use the <a class="reference internal" href="clustergrammer_js.html#example-pages"><span class="std std-ref">Example Pages</span></a> as templates to build a site with your visualization</li>
</ol>
<p>These examples require Clustergrammer&#8217;s JavaScript and Python libraries:</p>
<ol class="arabic simple">
<li>the front-end <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> JavaScript library generates the interactive visualization</li>
<li>the back-end <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py"><span class="std std-ref">Clustergrammer-PY</span></a> Python library clusters a matrix of data and makes the JSON for the front end</li>
</ol>
<p>The following libraries can be installed using: npm (<code class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">Clustergrammer</span></code>) and pip (<code class="docutils literal"><span class="pre">pip</span> <span class="pre">install</span> <span class="pre">--upgrade</span> <span class="pre">clustergrammer</span></code>), respectively.</p>
<p>In addition to embedding a visualization hosted by the <a class="reference internal" href="clustergrammer_web.html#clustergrammer-web"><span class="std std-ref">Clustergrammer Web App</span></a> application developers add a Clustergrammer to directly their own page using the core libraries:</p>
<p><strong>Clustergrammer-JS</strong>: The front-end <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> JavaScript library generates the interactive visualization and can be installed via npm: <code class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span> <span class="pre">Clustergrammer</span></code>. See the <a class="reference internal" href="clustergrammer_js.html#example-pages"><span class="std std-ref">Example Pages</span></a> for templates to build a site with your visualization</p>
<p><strong>Clustergrammer-PY</strong>: The back-end <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py"><span class="std std-ref">Clustergrammer-PY</span></a> Python library clusters a matrix of data and makes the JSON for the front end and can be installed using pip: <code class="docutils literal"><span class="pre">pip</span> <span class="pre">install</span> <span class="pre">--upgrade</span> <span class="pre">clustergrammer</span></code>. See the <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py-workflow"><span class="std std-ref">Python Workflow Examples</span></a> for examples of how cluster your matrix and generate the <a class="reference internal" href="clustergrammer_js.html#visualization-json"><span class="std std-ref">Visualization-JSON</span></a></p>
<p>To make a page, simply include the <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> script in your page and load the pre-calculated <a class="reference internal" href="clustergrammer_js.html#visualization-json"><span class="std std-ref">visualization-JSON</span></a> to generate a visualization (use <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py"><span class="std std-ref">Clustergrammer-PY</span></a> to generate this JSON).</p>
<p><a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> can also be included as a node module (see <a class="reference external" href="https://github.com/MaayanLab/clustergrammer-widget">Clustergrammer-Widget source code</a> for an example with Webpack), or can be used with <a class="reference external" href="http://requirejs.org/">RequireJS</a> (see <a class="reference external" href="https://github.com/MaayanLab/clustergrammer_requirejs">Clustergrammer RequireJS example</a>).</p>
</div>
<div class="section" id="jupyter-notebook-webpages">
<h2>Jupyter Notebook Webpages<a class="headerlink" href="#jupyter-notebook-webpages" title="Permalink to this headline"></a></h2>
<p>The <a class="reference internal" href="clustergrammer_widget.html#clustergrammer-widget"><span class="std std-ref">Clustergrammer Jupyter Widget</span></a> can also be used in combination with <a class="reference external" href="http://nbviewer.jupyter.org/">nbviewer</a> to share static Jupyter notebook webpages with embedded interactive Clustergrammer visualizations. This is one of the easiest ways to generate a webpage with Clustergrammer visualizations and several of the <a class="reference internal" href="case_studies.html#case-studies"><span class="std std-ref">Case Studies and Examples</span></a> are Jupyter notebooks.</p>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions docs/_build_html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ <h2>Contents:<a class="headerlink" href="#contents" title="Permalink to this hea
<li class="toctree-l1"><a class="reference internal" href="building_webpage.html">Web-Development with Clustergrammer</a><ul>
<li class="toctree-l2"><a class="reference internal" href="building_webpage.html#embedding-clustergrammer">Embedding Clustergrammer</a></li>
<li class="toctree-l2"><a class="reference internal" href="building_webpage.html#adding-clustergrammer-to-a-page">Adding Clustergrammer to a Page</a></li>
<li class="toctree-l2"><a class="reference internal" href="building_webpage.html#jupyter-notebook-webpages">Jupyter Notebook Webpages</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="clustergrammer_js.html">Clustergrammer-JS</a><ul>
Expand Down
2 changes: 1 addition & 1 deletion docs/_build_html/matrix_format_io.html
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
<li>a tab-separated matrix file</li>
<li>a Pandas DataFrame (using <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py"><span class="std std-ref">Clustergrammer-PY</span></a>)</li>
</ul>
<p>The tab-separated matrix file can take several formats shown below, which can include row/column categories and name/category titles. In all cases, row and column names must be unique (if input names are not unique then unique integers will be apended to names). Users are encouraged to arrange their matrix with data-points as columns and dimensions as rows, which enables users to take advantage of Clustergrammer&#8217;s <a class="reference internal" href="interacting_with_viz.html#interactive-dim-reduction"><span class="std std-ref">Interactive Dimensionality Reduction</span></a>.</p>
<p>The tab-separated matrix file can take several formats shown below, which can include row/column categories and name/category titles. In all cases, row and column names must be unique (if input names are not unique then unique integers will be appended to names). Users are encouraged to arrange their matrix with data-points as columns and dimensions as rows, which enables users to take advantage of Clustergrammer&#8217;s <a class="reference internal" href="interacting_with_viz.html#interactive-dim-reduction"><span class="std std-ref">Interactive Dimensionality Reduction</span></a>.</p>
<p>The front-end <a class="reference internal" href="clustergrammer_js.html#clustergrammer-js"><span class="std std-ref">Clustergrammer-JS</span></a> library can visualize matrices up to ~500,000 to ~1,000,000 cells in size and is also optimized to visualize matrices with more rows than columns &#8211; this has been done to accommodate datasets with many dimensions (rows) and few measurements (columns) that are common in biology. However very large matrices may take a long time to cluster using the <a class="reference internal" href="clustergrammer_py.html#clustergrammer-py"><span class="std std-ref">Clustergrammer-PY</span></a> library.</p>
<div class="section" id="simple-matrix-format">
<h2>Simple Matrix Format<a class="headerlink" href="#simple-matrix-format" title="Permalink to this headline"></a></h2>
Expand Down
2 changes: 1 addition & 1 deletion docs/_build_html/searchindex.js

Large diffs are not rendered by default.

Binary file modified docs/build/doctrees/biology_specific_features.doctree
Binary file not shown.
Binary file modified docs/build/doctrees/building_webpage.doctree
Binary file not shown.
Binary file modified docs/build/doctrees/case_studies.doctree
Binary file not shown.
Binary file modified docs/build/doctrees/environment.pickle
Binary file not shown.
Binary file modified docs/build/doctrees/matrix_format_io.doctree
Binary file not shown.
19 changes: 9 additions & 10 deletions docs/building_webpage.rst
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,23 @@ Users can obtain a permanent link to their visualization by manually uploading t

Adding Clustergrammer to a Page
===============================
The :ref:`clustergrammer_js` library can be used to generate an interactive visualization in your webpage. Simply include the :ref:`clustergrammer_js` script in your page and load the pre-calculated :ref:`visualization-JSON <visualization_json>` to generate a visualization. Alternatively, :ref:`clustergrammer_js` can also be included as a node module (see `Clustergrammer-Widget source code`_ for an example with Webpack), or can be used with `RequireJS`_ (see `Clustergrammer RequireJS example`_).
In addition to embedding a visualization hosted by the :ref:`clustergrammer_web` application developers add a Clustergrammer to directly their own page using the core libraries:

**Clustergrammer-JS**: The front-end :ref:`clustergrammer_js` JavaScript library generates the interactive visualization and can be installed via npm: ``npm install Clustergrammer``. See the :ref:`example_pages` for templates to build a site with your visualization

Clustergrammer can be used to generate interactive visualizations for your own web application by: using the :ref:`clustergrammer_js` library on your site, or embedding a visualization provided by the :ref:`clustergrammer_web`.
**Clustergrammer-PY**: The back-end :ref:`clustergrammer_py` Python library clusters a matrix of data and makes the JSON for the front end and can be installed using pip: ``pip install --upgrade clustergrammer``. See the :ref:`clustergrammer_py_workflow` for examples of how cluster your matrix and generate the :ref:`visualization_json`

To make a page, simply include the :ref:`clustergrammer_js` script in your page and load the pre-calculated :ref:`visualization-JSON <visualization_json>` to generate a visualization (use :ref:`clustergrammer_py` to generate this JSON).

The easiest way to generate a visualization of your own data on a webpage is to:
:ref:`clustergrammer_js` can also be included as a node module (see `Clustergrammer-Widget source code`_ for an example with Webpack), or can be used with `RequireJS`_ (see `Clustergrammer RequireJS example`_).

#. Follow the :ref:`clustergrammer_py_workflow` to cluster your matrix and generate the :ref:`visualization_json`
#. Then use the :ref:`example_pages` as templates to build a site with your visualization

These examples require Clustergrammer's JavaScript and Python libraries:
Jupyter Notebook Webpages
=========================

#. the front-end :ref:`clustergrammer_js` JavaScript library generates the interactive visualization
#. the back-end :ref:`clustergrammer_py` Python library clusters a matrix of data and makes the JSON for the front end

The following libraries can be installed using: npm (``npm install Clustergrammer``) and pip (``pip install --upgrade clustergrammer``), respectively.
The :ref:`clustergrammer_widget` can also be used in combination with `nbviewer`_ to share static Jupyter notebook webpages with embedded interactive Clustergrammer visualizations. This is one of the easiest ways to generate a webpage with Clustergrammer visualizations and several of the :ref:`case_studies` are Jupyter notebooks.

.. _`nbviewer`: http://nbviewer.jupyter.org/
.. _`homepage`: http://amp.pharm.mssm.edu/clustergrammer
.. _`Clustergrammer-Widget source code`: https://github.com/MaayanLab/clustergrammer-widget
.. _`RequireJS`: http://requirejs.org/
Expand Down

0 comments on commit 8cab40d

Please sign in to comment.