Embed Your Visualization

Last updated: 2 years ago (view history), Time to read: 2 mins

Description

In this part of the tutorial, one will learn how to embed a html file based on the code block developed to make a visualization.

warning

The code editor uses JSON and ProteinPaint uses javascript, you will need to use their code example templates. We are working on a new embed feature soon.

Create a html file

You will need a text editor to create a .html file for embedding

  1. Open notepad or a text editor.
  2. Copy your code block you generated for your visualization.

  3. Replace the runproteinpaint() command below with your code block.

    • This should be everything between the script <>.
  4. Save the file with the .html suffix.
  5. Drag and drop the .html file into the browser, open the saved .html file by double-clicking, or save within a website.

For further details you can go here. Block Code Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <link rel="stylesheet" href="">
      <script src="https://proteinpaint.stjude.org/bin/proteinpaint.js"></script>
   </head>
   <body>
      <div id="holder"></div>
      <script type="text/javascript">
         runproteinpaint({
         host: "https://proteinpaint.stjude.org",
         holder: document.getElementById('a'),
         parseurl: true,
         nobox: 1,
         noheader: 1,
         genome: "hg38",
         gene: "BCL11A",
         nativetracks: "RefGene",
         tracks: [{
         type: "vcf",
         name: "Clinvar",
          url: "https://westus.dl.azure.dnanex.us/F/DSYM/V1QVfjpp9PBg6q7v9FYxQXJYbXbz7JvJ528v5bvg/SJACT004_D.WholeGenome.g.vcf.gz",
         indexUrl: "https://westus.dl.azure.dnanex.us/F/DSYM/068pg2qJ196zv105vYqFV0P9bvj2f3Z9XJF88KJp/SJACT004_D.WholeGenome.g.vcf.gz.tbi"
         }]
         });
      </script>
   </body>
</html>
%