Back to Mason Demos

Mason Viewer Pre-Built Module: Generic JSON

The "generic JSON" module is meant to allow the flexible implementation of Mason without the need to know JavaScript. It supports a simplified input format as JSON that allows for custom coloring, tooltips, and URLs to visit if blocks are clicked on. To use the "generic JSON" module, one first needs to format their data as JSON, then either link to a file containing the JSON or include the JSON on the page as a JavaScript variable. (Note: this latter option does require very light use of JavaScript to implement.)

Example 1, data loaded from JSON file on server

The above can be achieved for any data files using the HTML below and substituting in the location of your data. Note: The JSON file must be on the same hostname as the HTML files for security reasons.
<div class="generic-json-mason-viewer"
style="width:700px;"
mason_data_json_file_uri="Generic_JSON_files/Generic_Mason_viewer_data.json"
></div>
The contents of the JSON file are:
{"sequenceLength":255,
 "rows":
  [
   {"label":"Row Label 1",
    "color":"#999999",
    "xcolor":"#990000",
	"blocks":
	[
	  {	"startPos":25,
		"endPos":37,
		"tooltip":"tooltip for this block",
		"link":"http://google.com"
	  }
	]
   },
   {"label":"Row Label 2",
    "color":"#337700",
    "xcolor":"#000088",
	"blocks":
	[
	  {	"startPos":55,
		"endPos":77,
		"tooltip":"tooltip for this block",
		"link":"http://google.com"
	  },
	  {	"startPos":65,
		"endPos":87,
		"tooltip":"tooltip for this block",
		"link":"http://google.com"
	  }
	]
   },
   {"label":"Row Label 3",
    "color":"#880000",
    "xcolor":"#008800",
	"blocks":
	[
	  {	"startPos":41,
		"endPos":77,
		"tooltip":"",
		"link":""
	  }
	]
   }
  ]
}

Example 2, data on the page in a Javascript object

The above can be achieved for any data files using the HTML below and substituting in the location of your data. Note: The sequence file must be on the same hostname as the HTML files for security reasons.
<div id="generic-json-mason-viewer-page-data"
style="width:700px;"
></div>
In the HTML page, have the data present as a JavaScript object:
<script>
var masonData =


			{"sequenceLength":255,
			 "rows":
			  [
			   {"label":"Row Label 1",
			    "color":"#999999",
			    "xcolor":"#990000",
				"blocks":
				[
				  {	"startPos":12,
					"endPos":24,
					"tooltip":"tooltip for this block",
					"link":"http://google.com"
				  }
				]
			   },
			   {"label":"Row Label 2",
			    "color":"#337700",
			    "xcolor":"#000088",
				"blocks":
				[
				  {	"startPos":55,
					"endPos":77,
					"tooltip":"tooltip for this block",
					"link":"http://google.com"
				  },
				  {	"startPos":65,
					"endPos":87,
					"tooltip":"tooltip for this block",
					"link":"http://google.com"
				  }
				]
			   },
			   {"label":"Row Label 3",
			    "color":"#880000",
			    "xcolor":"#008800",
				"blocks":
				[
				  {	"startPos":51,
					"endPos":77,
					"tooltip":"",
					"link":""
				  }
				]
			   }
			  ]
			};
</script>

HTML to import required JavaScript files. Download JavaScript files.

<script type="text/javascript" src="js/libraries/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/libraries/modernizr.v2.7.1__custom.39924_min.js"></script>
<script type="text/javascript" src="js/libraries/svg.min.js"></script>
<script type="text/javascript" src="js/libraries/wz_tooltip-min.js"></script>
<script type="text/javascript" src="js/mason_viewer/mason_viewer-min.js"></script>

<script type="text/javascript" src="js/generic_json__mason_viewer_related_code/generic_json_creator.js"></script>
<script type="text/javascript" src="js/generic_json__mason_viewer_related_code/generic_json_creator.js"></script>
<script type="text/javascript" src="js/generic_json__mason_viewer_related_code/generic_json_HTML_config_loader.js"></script>