Visualizing RDF: Hands-On examples using Exhibit

Eric Neumann, eric@clinicalsemantics.com

Exhibit: Components

Defining how to render RDF in a browser

Data Merging, as RDF-XML or JSON links
Views, for seeing collections of data
Lenses, specific views into items
Facets, selecting sets of items based on properties
RDF extraction, in multiple formats

Exhibit: The Magic Code

All the heavy lifting is done by this referenced javascript code...

<script src="http://static.simile.mit.edu/exhibit/api-2.1.0/exhibit-api.js"></script>	
<script src="http://static.simile.mit.edu/exhibit/extensions-2.1.0/chart/chart-extension.js"></script>

Now open GE_Demo.html in your browser AND in your text editor

Exhibit: Data Input

Add link to data into the header space using... (be sure you have files GE_data.json and genes.json)

<link href="GE_data.json" type="application/json" rel="exhibit/data" />

JSON Format

{
    "items" :      [
        {
            "treatment" :   "IL-4+Flexin_Hi",
            "cond2" :       "Flexin_Hi",
            "gene" :        "GeneR",
            "cond1" :       "IL-4",
            "series" :      "GeneR_IL-4+Flexin_Hi",
            "pattern" :     "Up_Reg",
            "type" :        "Measurement",
            "label" :       "72",
            "change_time" : 15,
            "fold_change" : 7.84
        },
        { 
	...	
        "properties" : {
            "fold_change" : {
                "valueType" : "number"
            },...

Exhibit: Language

Exhibit is all about using basic HTML and DOM components to define the views and lenses

Using HTML's <div> and <span> to act as data display templates
Anything in a <div> or <span> attribution beginning with ex: tells Exhibit's code to handle it specially
Use ex:role to define the view component (Tabular, ScatterPlot, Tileview, Pivot, TimePlot)
Within that you specify the parts of the RDF to show using ex:columns= or ex:x= followed by a string of descriptors (predicates)

	<div ex:role="exhibit-view"
	    ex:viewClass="Exhibit.TabularView"
	    ex:label="Measurements Table"
	    ex:columns=".label, .gene"
	    ex:columnLabels="Msmt, Gene"
	    ex:columnFormats="list, list"
		ex:sortColumn="1"
	    ex:possibleOrders=".gene"
	    ex:sortAscending="true">
	</div>

Exhibit: Tabular View

More data can be displayed by expanding on the columns...

ex:columns=".label, .gene, .treatment, .pattern, .fold_change, .change_time"
ex:columnLabels="Msmt, Gene, Treatment, Pattern, Fold-Change (log), Change Time"
ex:columnFormats="list, list, list, list, list, list"

Exhibit: ScatterPlot View

A ScatterPlot View can be added in a similar way

<div ex:role="exhibit-view"
	ex:label="Expression"
	ex:viewClass="Exhibit.ScatterPlotView"
	ex:x=".change_time"
	ex:y=".fold_change"
	ex:xLabel="change time"
	ex:yLabel="fold change"
	ex:colorKey=".treatment"
	ex:cell="value">
</div>

Exhibit: Facets

Facets lets us view specific subsets of the data...

By simple properties
By numeric ranges
By controlled vocabulary

<div ex:role="facet" ex:expression=".treatment" ex:facetLabel="Treatment" ></div>

<div ex:role="facet" ex:expression=".pattern" ex:facetLabel="Pattern" ></div>
<div ex:role="facet" ex:facetClass="NumericRange" ex:expression=".fold_change" 
   ex:facetLabel="fold change" ex:interval="1"></div>
<div ex:role="facet" ex:expression=".change_time" ex:facetLabel="change time" 
   style="width:300px" ex:height="12em"></div>

Exhibit: Stylers

Custom javascript can be added to create stylers for rows...

var regStyler = function(item, database, tr) {
	var plan = database.getObject(item, "pattern");
	var color = "lightgray";
	switch (plan) {
		case "No_Change":  	color = "#DDD"; break; 
		case "Up_Reg":    	color = "#F88"; break;
		case "Down_Reg":  	color = "#8F8"; break; 
	}
	tr.style.background = color;
};

Also add this within the Tabular View div element to tell it you wish to use this styler...

ex:rowStyler="regStyler"

Exhibit: Adding more data

More RDF data can be added to expand the Exhibit viewer simple by includng another link line..

<link href="genes.json" type="application/json" rel="exhibit/data" />

Now you'll need to define these mixed collections

<div ex:role="collection" id="Measurement-id" ex:itemTypes="Measurement"></div>
<div ex:role="collection" id="Gene-id" ex:itemTypes="Gene"></div>

The data forms a graph inside the Exhibit browser when identifiers match

Also be sure and add the following within both views...

ex:collectionID="Measurement-id"

Exhibit: Adding more views for new data

Let's add another view for the Gene data, and state that explicitly

<div ex:role="exhibit-view"
	ex:label="Gene Comparisons"
	ex:collectionID="Gene-id"
	ex:viewClass="Exhibit.TileView">
</div>

Now add a facet for it

<div ex:role="facet" ex:collectionID="Gene-id" ex:expression=".go_bio_process" 
	ex:facetLabel="GO BiologicalProcess"  style="width:300px" ></div>

Note: the expression is relative to the Gene entity

Exhibit: Lenses

The TileView for the Gene was rather boring, so let's specify our own lens...

<div ex:role="lens" ex:itemTypes="Gene">
	<div style="font-size:1.4em; font:bold" ex:content=".label"></div>
	<div>GO: <b><span ex:content=".go_bio_process"></span></b></div>
	<div>Treatment: <b><span ex:content="foreach(!gene, 
	   concat(.treatment,': ',.pattern))" 
	   ex:formats="list {separator:' / '; last-separator:' / '; pair-separator:' / '}">
	   </span></b></div>
	<div ex:if-exists=".entrez">Entrez-Gene: <a style="color:blue"
		ex:href-subcontent="http://www.ncbi.nlm.nih.gov/sites/entrez?Db=gene&Cmd=ShowDetailView&TermToSearch={{.entrez}}&ordinalpos=1&itool=EntrezSystem2.PEntrez.Gene.Gene_ResultsPanel.Gene_RVDocSum">
		<span ex:content=".entrez"></span></a></div><BR>
</div>

It's loaded with features, so let's go through each one

Specifically note: ex:content, ex:subcontent, and ex:href-subcontent

Also note the foreach operator

Exhibit: Making views handle mixed data

We can also extend the original Measurement Tabular view to show data from within Gene entities

<div ex:role="exhibit-view"
	ex:viewClass="Exhibit.TabularView"
	ex:collectionID="Measurement-id"
	ex:label="Measurements Table"
	ex:columns=".label, .gene, .gene.go_bio_process, .treatment, .pattern, .fold_change, .change_time"
	ex:columnLabels="Msmt, Gene, GO, Treatment, Pattern, Fold-Change (log), Change Time"
	ex:columnFormats="list, list, list, list, list, list, list"
	ex:sortColumn="1"
	ex:possibleOrders=".gene"
	ex:sortAscending="true"
	ex:rowStyler="regStyler">
</div>

Exhibit

More at http://simile.mit.edu/exhibit

Questions?