alexmasselot · August 29, 2015 13:57
diff --git a/index.html b/index.html
 <html>
    <head>
        <title>pViz basic interactive</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="http://research-pub.gene.com/pviz/examples/deps/pviz-core.css">
        <script src="http://research-pub.gene.com/pviz/examples/deps/pviz-bundle.min.js"></script>
    </head>
    <body class="container">
        <!-- min-width is for http://bl.ocks.org/ iframe (doc width sometimes 0 at init time)-->
        <div id="main" class="row" style="min-width:720px"></div>

        <div class="row">
            <h3>Comments</h3>
            We define here SeqEntry object with an explicit sequence (start of HER2) and a few features (one region and a dozen of secondary structure).
            This is not the usual way to populate the object but we can do it.
            <br/>
            Zoom by dragging mouse and out by double-clicking
        </div>
        <div class="row">
            <h4>Way more examples and demo apps with pViz <a href="http://research-pub.gene.com/pviz/examples/" target="_TOP_">here</a></h4>
        </div>

        <script class="example">
          //namespace handling pViz classes
          var pviz = this.pviz;

          //define the model, a sequence entry with an explicit sequence
          var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA';
          var seqEntry = new pviz.SeqEntry({
            sequence : seq
          });

          /*
           * thefined the view, in a backbone.js fashion
           * model: that's the model, who would have guessed
           * el: a selector to the target where to insert the view (size and so will be inherited)
           *
           * .render(): call the rendering
           *
           * NB: even though the features are not yet added to the model, the view will be recomputed at the end of any feature addition.
           * This is to take into account asynchroncity, when data comes from several remote sources
           */
          new pviz.SeqEntryAnnotInteractiveView({
            model : seqEntry,
            el : '#main'
          }).render();

          /* we can add featureswith properties
           * group: features will be grouped together on this property. they might no be displayed on the same line, but feature with different grous cannot be on the same line
           * type: within group, property can have different types
           * text: to be displayed or use wherever you want
           * start: initial position, starting at 0
           * end: last position of the feature (including), starting at 0
           *
           * NB: the explicit loading of features could be replaced by a JSON call. But for the sake of a standalone example, ajax does not work with file queries
           d3.tsv('example-features.tsv', function(err, data) {
             seqEntry.addFeatures(data);
           });
           */
          seqEntry.addFeatures([{
            category : 'ptms',
            type : 'mickey',
            start : 20,
            end : 20,
            count : 10
          }, {
            category : 'ptms',
            type : 'mickey',
            start : 22,
            end : 22,
            count : 3
          }, {
            category : 'ptms',
            type : 'mickey',
            start : 40,
            end : 40,
            count : 10,
            improbable : true //!! an option attribute
          }, {
            category : 'ptms',
            type : 'mickey',
            start : 50,
            end : 50,
            count : 2
          }, {
            category : 'regions',
            type : 'topological domain',
            text : 'extra cellular',
            start : 22,
            end : 650
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 24,
            end : 26
          }, {
            category : 'secondary structure',
            type : 'helix',
            start : 38,
            end : 49
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 53,
            end : 57
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 59,
            end : 63
          }, {
            category : 'secondary structure',
            type : 'helix',
            start : 71,
            end : 73
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 78,
            end : 81
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 83,
            end : 87
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 91,
            end : 94
          }, {
            category : 'secondary structure',
            type : 'turn',
            start : 108,
            end : 110
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 111,
            end : 116
          }, {
            category : 'secondary structure',
            type : 'turn',
            start : 129,
            end : 131
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 138,
            end : 140
          }, {
            category : 'secondary structure',
            type : 'beta_strand',
            start : 150,
            end : 155
          }]);

        </script>

    </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<html>
	<head>
	<title>pViz basic interactive</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="http://research-pub.gene.com/pviz/examples/deps/pviz-core.css">
	<script src="http://research-pub.gene.com/pviz/examples/deps/pviz-bundle.min.js"></script>
	</head>
	<body class="container">
	<!-- min-width is for http://bl.ocks.org/ iframe (doc width sometimes 0 at init time)-->
	<div id="main" class="row" style="min-width:720px"></div>

	<div class="row">
	<h3>Comments</h3>
	We define here SeqEntry object with an explicit sequence (start of HER2) and a few features (one region and a dozen of secondary structure).
	This is not the usual way to populate the object but we can do it.
	<br/>
	Zoom by dragging mouse and out by double-clicking
	</div>
	<div class="row">
	<h4>Way more examples and demo apps with pViz <a href="http://research-pub.gene.com/pviz/examples/" target="_TOP_">here</a></h4>
	</div>

	<script class="example">
	//namespace handling pViz classes
	var pviz = this.pviz;

	//define the model, a sequence entry with an explicit sequence
	var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA';
	var seqEntry = new pviz.SeqEntry({
	sequence : seq
	});

	/*
	* thefined the view, in a backbone.js fashion
	* model: that's the model, who would have guessed
	* el: a selector to the target where to insert the view (size and so will be inherited)
	*
	* .render(): call the rendering
	*
	* NB: even though the features are not yet added to the model, the view will be recomputed at the end of any feature addition.
	* This is to take into account asynchroncity, when data comes from several remote sources
	*/
	new pviz.SeqEntryAnnotInteractiveView({
	model : seqEntry,
	el : '#main'
	}).render();

	/* we can add featureswith properties
	* group: features will be grouped together on this property. they might no be displayed on the same line, but feature with different grous cannot be on the same line
	* type: within group, property can have different types
	* text: to be displayed or use wherever you want
	* start: initial position, starting at 0
	* end: last position of the feature (including), starting at 0
	*
	* NB: the explicit loading of features could be replaced by a JSON call. But for the sake of a standalone example, ajax does not work with file queries
	d3.tsv('example-features.tsv', function(err, data) {
	seqEntry.addFeatures(data);
	});
	*/
	seqEntry.addFeatures([{
	category : 'ptms',
	type : 'mickey',
	start : 20,
	end : 20,
	count : 10
	}, {
	category : 'ptms',
	type : 'mickey',
	start : 22,
	end : 22,
	count : 3
	}, {
	category : 'ptms',
	type : 'mickey',
	start : 40,
	end : 40,
	count : 10,
	improbable : true //!! an option attribute
	}, {
	category : 'ptms',
	type : 'mickey',
	start : 50,
	end : 50,
	count : 2
	}, {
	category : 'regions',
	type : 'topological domain',
	text : 'extra cellular',
	start : 22,
	end : 650
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 24,
	end : 26
	}, {
	category : 'secondary structure',
	type : 'helix',
	start : 38,
	end : 49
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 53,
	end : 57
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 59,
	end : 63
	}, {
	category : 'secondary structure',
	type : 'helix',
	start : 71,
	end : 73
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 78,
	end : 81
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 83,
	end : 87
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 91,
	end : 94
	}, {
	category : 'secondary structure',
	type : 'turn',
	start : 108,
	end : 110
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 111,
	end : 116
	}, {
	category : 'secondary structure',
	type : 'turn',
	start : 129,
	end : 131
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 138,
	end : 140
	}, {
	category : 'secondary structure',
	type : 'beta_strand',
	start : 150,
	end : 155
	}]);

	</script>

	</body>
	</html>