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

The Clustergrammer-JS library can be used to generate an interactive visualization in your webpage. Simply include the Clustergrammer-JS script in your page and load the pre-calculated visualization-JSON to generate a visualization. Alternatively, 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).

Clustergrammer can be used to generate interactive visualizations for your own web application by: using the Clustergrammer-JS library on your site, or embedding a visualization provided by the Clustergrammer Web App.

The easiest way to generate a visualization of your own data on a webpage is to:

  1. Follow the Python Workflow Examples to cluster your matrix and generate the Visualization-JSON
  2. Then use the Example Pages as templates to build a site with your visualization

These examples require Clustergrammer’s JavaScript and Python libraries:

  1. the front-end Clustergrammer-JS JavaScript library generates the interactive visualization
  2. the back-end 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.