Web-Development with Clustergrammer

Clustergrammer can be used by developers to add interactive heatmap visualizations to their web pages and web applications (see App Integration Examples).

Embedding Clustergrammer

The Clustergrammer web app can be used to produce visualizations that are embedded into another page using an IFrame; see below:

<iframe id="iframe_preview" src="https://amp.pharm.mssm.edu/clustergrammer/viz/5734a7399fee36034aeb787e/rc_two_cats.txt" frameborder="0"></iframe>

Users can obtain a permanent link to their visualization by manually uploading their data using the Upload section of Clustergrammer-Web’s homepage and copying the URL to the full-screen version of their visualization. Alternatively users can programmatically upload their data using the Clustergrammer-Web API and obtain their permanent links through the API.

Adding Clustergrammer to a Page

In addition to embedding a visualization hosted by the Clustergrammer Web App application developers add a Clustergrammer to directly their own page using the core libraries:

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

Clustergrammer-PY: The back-end 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 Python Workflow Examples for examples of how cluster your matrix and generate the Visualization-JSON

To make a page, simply include the Clustergrammer-JS script in your page and load the pre-calculated visualization-JSON to generate a visualization (use Clustergrammer-PY to generate this JSON).

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).

Jupyter Notebook Webpages

The Clustergrammer Jupyter 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 Case Studies and Examples are Jupyter notebooks.