A bunch of changes like

1) Freemarker versions of Co-PI visualizations. CoInvestigator.ftl, CoPIPersonLevel.ftl, person_level_fm-copi.js. 2) Styling changes to Temporal graph. 3) Adding co_author, co_pi and temporal graph icons. 4) ftls related to sparklines. (CoAuthorship and CoPI) 5) Styling changes to CoAuthor/CoPI visualizations -- page.css, coauthor_style.css, coinvestigator_style.css
2011-01-03 22:47:34 +00:00 · 2011-01-03 22:47:34 +00:00 · c74821f302
commit c74821f302
parent 8dc99312c7
34 changed files with 1358 additions and 479 deletions
--- a/productMods/css/visualization/personlevel/coauthor_style.css
+++ b/productMods/css/visualization/personlevel/coauthor_style.css
@ -26,7 +26,9 @@
 	margin-top: 50px;
 	width: 25%;	
 	background-color: #f7f9f9;
-	height: 80%;
+/*	height: 80%; */
+	padding-left: 10px;
+	padding-bottom: 30px;
 }

 #dataPanel div {
@ -49,7 +51,7 @@

 /* container override from liquid.css */
 .container {
- width: inherit; 
+ 	width: inherit; 
 }

 #incomplete-data{
@ -57,9 +59,26 @@
 	margin : auto;
 	line-height: 150%;
 	color: #595b5b;
+	margin-left: 0px;
 }

 .fileDownloadPlaceHolder{
-	
-	margin-left: 20px;
+	padding-top: 20px;
+	height: 20px;
+}
+
+#profileTitle{
+	
+	padding: 10px;
+	padding-left: 5%;
+	background-color: #2A2A2A;
+	color: white;
+	width: 50%;
+	margin-left: -10px;
+	margin-top: -10px;
+}
+
+#table_heading{
+/*	margin-bottom:20px; */
+	width: 80%;	
 }
--- a/productMods/css/visualization/personlevel/coinvestigator_style.css
+++ b/productMods/css/visualization/personlevel/coinvestigator_style.css
@ -0,0 +1,103 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+spacer{
+	font-size:0; line-height:0; clear:both;}
+
+
+/* ----------------- body start --------------------------- */
+#body{
+	max-width:900px;
+	min-width:800px; 
+	margin:0 auto; 
+	position:relative;
+	background: white;
+}
+#bodyPannel{
+	background: #FFFFFF;	
+/*	width:765px;
+	float:left;*/
+	/*padding-top: 0;
+	padding-right: 28px;
+	padding-bottom: 0;*/
+	padding-left: 16px;
+	height: 840px;
+}
+
+#dataPanel {
+	margin-top: 50px;
+	width: 25%;	
+	background-color: #f7f9f9;
+/*	height: 80%; */
+	padding-left: 10px;
+	padding-bottom: 30px;
+}
+
+#dataPanel div {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 11px;
+}
+#dataPanel .italicize {
+	font-style: italic;
+}
+#dataPanel .bold {
+	font-weight: bold;
+	color:#13968c;
+	font-size: 14px;
+}
+#dataPanel .investigator_stats .numbers {
+	text-align: right;
+	width: 40px;
+	float:left;
+}
+
+/* container override from liquid.css */
+.container {
+ 	width: inherit; 
+}
+
+#incomplete-data{
+	width: 75%;
+	margin : auto;
+	line-height: 150%;
+	color: #595b5b;
+	margin-left: 0px;	
+}
+
+.fileDownloadPlaceHolder{
+	padding-top: 20px;
+	height: 20px;
+}
+
+#profileTitle{
+	
+	padding: 10px;
+	padding-left: 5%;
+	background-color: #2A2A2A;
+	color: white;
+	width: 50%;
+	margin-left: -10px;
+	margin-top: -10px;
+}
+
+#table_heading{
+/*	margin-bottom:20px; */
+	width: 80%;	
+}
+
+.investigator_name {
+	color: #13968c;
+	font-weight: bold;
+}
+
+.neutral_investigator_name {
+	color: black;
+	font-weight: bold;
+}
+
+.investigator_moniker {
+	color: #9C9C9C;
+}
+
+#coinvestigations_table th {
+	vertical-align: top;
+}
--- a/productMods/css/visualization/personlevel/page.css
+++ b/productMods/css/visualization/personlevel/page.css
@ -8,23 +8,52 @@ a.no_href_styles {
 	border: 0;
 }

-.vis_stats {
+/*.vis_stats {*/
 	/*width: 760px;*/
-	margin: 0;
+/*	margin: 0;
 	padding-left:10px;
 	padding-top:10px;
 	background: #fff;
+	margin-left: 35%;
+	clear: right;
+}
+*/
+/*.vis-tables {*/
+/*	width: 33%; */
+/*	padding: 10px;
+	margin: 10px;
+	background-color: #FFF;
+	border: 1px solid #ddebf1;
+	float:left;
+	font-size: 0.8em;
+}
+*/
+
+.vis_stats {
+	/*width: 760px;*/
+/*	margin: 0;
+	margin-left: 35%; 
+	padding-left:10px;*/
+	padding-top:10px;
+	background: #fff;
+	clear: right;
+	width:67%;
+	margin-left:33%;
 }

 .vis-tables {
-	width: 33%;
-	padding: 5px;
-	margin: 5px;
+/*	width: 33%; */
+	padding: 10px;
+	margin: 10px;
 	background-color: #FFF;
 	border: 1px solid #ddebf1;
-	float: left;
+	float:left;
+	font-size: 0.8em;
+	width: 44%;
+	margin-left: 0px;
 }

+
 p.datatable {
 	font-size: 12px;
 	display: block;
@ -83,7 +112,7 @@ p.datatable {
 }

 .neutral_author_name {
-	color: black;
+	color: #13968c;
 	font-weight: bold;
 }

@ -96,13 +125,23 @@ p.datatable {
 	padding-top: 10px;
 	margin-bottom: 0.3em;
 	float:left;
+	margin-right: 10px;
 }

 .toggle_visualization{
-	padding-top: 10px;
+
+/*		
 	margin-bottom: 0.3em;
+	clear:left;
 	float:right;
 	width: 150px;	
+*/	
+	text-align: left;
+	margin-left: 84%;
+	margin-top: -8%;
+	max-width: 250px;
+	width: 22%;
+	height: 50px;
 }

 .sub_headings a {
@ -145,3 +184,50 @@ table.sparkline_wrapper_table td, th {
 #coauthorships_table th {
 	vertical-align: top;
 }
+
+.sparkline_range{
+	font-size: 0.9em;
+	font-weight: bold;
+}
+
+.vis-tables table td{
+	padding-right: 10px;
+	width: 50%;
+}
+
+.vis-tables table caption{
+	width: 100%;
+	padding-bottom: 10px;
+	font-weight: bold;
+	font-size: 16px;
+	text-align: left;
+}
+
+.vis-tables table{
+	width: 100%;
+}
+
+.vis-tables table thead{
+	text-align: left;
+}
+
+.vis-tables table thead tr th { 
+	background-color:#eaeaea; 
+	font-size:14px; 
+	padding:5px; 
+	vertical-align:top; 
+	text-align:left;  
+}
+
+.vis-tables table tbody { 
+	font-size:12px;  
+}
+
+.vis-tables table tbody td { 
+	text-align:left; 
+	padding:5px;  
+}
+
+moniker{
+	margin-top: 0px;
+}
--- a/productMods/images/visualization/co_author_icon.png
+++ b/productMods/images/visualization/co_author_icon.png
--- a/productMods/images/visualization/co_investigator_icon.png
+++ b/productMods/images/visualization/co_investigator_icon.png
--- a/productMods/images/visualization/temporal_vis_icon.jpg
+++ b/productMods/images/visualization/temporal_vis_icon.jpg
--- a/productMods/images/visualization/temporal_vis_placeholder.jpg
+++ b/productMods/images/visualization/temporal_vis_placeholder.jpg
--- a/productMods/js/visualization/entityComparison/constants.js
+++ b/productMods/js/visualization/entityComparison/constants.js
@ -69,6 +69,9 @@ var FlotOptions = {
 			tickSize : 1,
 			tickDecimals : 0,
 			min : 0
+		},
+		grid : {
+			borderColor : "#D9D9D9"
 		}
 };

--- a/productMods/js/visualization/entityComparison/util.js
+++ b/productMods/js/visualization/entityComparison/util.js
@ -15,6 +15,8 @@ function init(graphContainer) {
 	// TODO: make use of the id on the select field instead of a generic one.
 	$("#comparisonParameter").text("Total Number of " + $("select.comparisonValues option:selected").val());
 	$('#yaxislabel').html("Number of " + optionSelected).mbFlipText(false);
+	$('#comparisonHeader').html(optionSelected).css('font-weight', 'bold');
+	
 	
 	var defaultFlotOptions = {
 			xaxis : {
@ -27,7 +29,11 @@ function init(graphContainer) {
 				tickDecimals : 0,
 				min : 0,
 				max: 5
+			},
+			grid: {
+				borderColor : "#D9D9D9"
 			}
+			
 	};

 	/*
@ -538,7 +544,8 @@ function generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement){
 	//append a div and modify its css
    divBar.css("background-color", colorToAssign);
    divBar.css("width", normalizedWidth);
-    divLabel.children("a#entityURL").html(checkboxValue + "    ");
+    divLabel.children("a#entityURL").html(checkboxValue + "    ").css("color", "#333");
+//    divLabel.children("a#entityURL").css("color", "#333").css("text-decoration", none);
    divLabel.children("a#entityURL").autoEllipsis();
    createVIVOProfileImage(divLabel.children("a#vivoURL"));
    divLabel.children("a").css("font-size", "0.8em");
@ -551,8 +558,8 @@ function createVIVOProfileImage(url){
 	
 	var vivoImage = $(url);
 	
-	vivoImage.html("VIVO");
-	vivoImage.css("background-color","#212D34" );
+	vivoImage.html("profile");
+	vivoImage.css("background-color","#727272" );
 	vivoImage.css("color", "white");
 	vivoImage.css("padding", "2px");
 }
@ -695,6 +702,7 @@ function prepareTableForDataTablePagination(jsonData){
 	table.attr('cellspacing', '0');
 	table.attr('border', '0');
 	table.attr('id', 'datatable');
+	table.css('font-size', '0.9em');
 	
 	var thead = $('<thead>');
 	var tr = $('<tr>');
@ -730,7 +738,9 @@ function prepareTableForDataTablePagination(jsonData){
 		checkboxTD.html('<input type="checkbox" class="if_clicked_on_school" value="' + index + '"'+'/>');
 		
 		var labelTD =  $('<td>');
+		labelTD.css("width", "100px");
 		labelTD.html(index);
+//		labelTD.autoEllipsis();
 		
 		var publicationCountTD =  $('<td>');
 		publicationCountTD.html(calcSumOfComparisonParameter(val));
@ -754,11 +764,11 @@ function prepareTableForDataTablePagination(jsonData){
 	tableDiv.append(table);
 	
 	$('#datatable').dataTable({
-		"sDom": '<"searchbar"f><"paginatedtabs"p><"datatablewrapper"t><"showentries"l>',
+		"sDom": '<"searchbar"f><"paginatedtabs"p><"datatablewrapper"t>',
 		"aaSorting" : [[2, "desc"]],
 		"iDisplayLength": 10,
 		"sPaginationType": "full_numbers",
-		"aLengthMenu" : [5,10,15],
+	//	"aLengthMenu" : [5,10,15],
 		"fnDrawCallback": function() {
 	    $('tr>td:nth-child(1)>input').bind('click', function () { $(this).parent().parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
 	    $('tr>td:nth-child(1)>input').bind('click', function () { if(!$(this).is(':checked')) { $(this).parent().parent().children().each(function(){$(this).removeClass('datatablerowhighlight');});} });
@ -776,7 +786,7 @@ function prepareTableForDataTablePagination(jsonData){
 function bindPaginatedTabsToEvents(){

 	$('#datatable_paginate>span').bind('click', function(){
-		console.log($(this));
+		//console.log($(this));
 		checkIfColorLimitIsReached();
 //		bindInnerPaginatedTabsToEvents();
 //		$.each($('#datatable_paginate>span>span'), function(index, val){
@ -820,6 +830,7 @@ function removeStopWords(val){
 function setEntityLevel(){
 	$('#entitylevelheading').text(' - ' + toCamelCase(entityLevel) + ' Level').css('font-style', 'italic');
 	$('#entityleveltext').text('  ' + entityLevel.toLowerCase() + 's ').css('font-style', 'italic');
+	$('#entityHeader').text(toCamelCase(entityLevel)).css('font-weight', 'bold');
 }

 function getEntityVisMode(jsonData){
@ -899,142 +910,3 @@ function setTickSizeOfAxes(){
    setLineWidthAndTickSize(yearRange, FlotOptions);     
 	setTickSizeOfYAxis(calcMaxWithinComparisonParameter(checkedLabelToEntityRecord), FlotOptions);
 }
-//function sortByEntityLabelDesc(value1, value2){
-//
-//var result;
-//
-//if(value1 > value2){
-//	result = -1;
-//}else if(value1 < value2){
-//	result = 1;
-// }else {
-//	 result = 0;
-// }
-//return result;
-//}
-//
-//function sortByEntityLabelAsc(value1, value2){
-//
-//var result;
-//
-//if (value1 > value2) {
-//	result = 1;
-//} else if(value1 < value2) {
-//	result = -1;
-// } else {
-//	 result = 0;
-// }
-//return result;
-//}
-
-//function renderPaginatedDiv(){
-//
-////$("#entityTitleSortBy").trigger('click', "azdesc");          
-//paginationDiv.pagination(setOfLabels.length, paginationOptions);
-//}
-
-//
-//jQuery.fn.liveUpdate = function(list){
-//
-//  list = jQuery(list);
-//
-//  if ( list.length ) {
-//    var rows = list.children('li');	    
-//    var cache = rows.map(function(){
-//    	//  console.log($(this).children('a').text().toLowerCase());
-//        return $(this).children('a').text().toLowerCase();
-//      });
-//    
-//    //console.log("rows: ", rows , " cache: ", cache);
-//     
-//    this.keyup(filter).keyup().parents('form').submit(function(){
-//        return false;
-//      });
-//  }
-//   
-//  return this;
-//   
-//  function filter(){
-//	  
-//    var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
-//    //console.log("this: ",this, " term: " +term);
-//    
-//    if ( !term ) {
-//      rows.show();
-//    } else {
-//      rows.hide();
-//      cache.each(function(i){
-//    	 var score = this.score(term);
-//    	 if (score > 0) { 
-//        	scores.push([score, i]); 
-//         }
-//      });
-//
-//      jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
-//        jQuery(rows[ this[1] ]).show();
-//	      //console.log("showing : ", ($(rows[this[1]]).children('a').text()));
-//      });
-//    }
-//  }
-//};
-//function sortByParameterDesc(value1, value2){
-//var entity1 = labelToEntityRecord[value1];
-//var entity2 = labelToEntityRecord[value2];
-//
-//var sum1 = calcSumOfComparisonParameter(entity1);
-//var sum2 = calcSumOfComparisonParameter(entity2);
-//
-//return (sum2 - sum1);
-//}
-//
-//function sortByParameterAsc(value1, value2){
-//var entity1 = labelToEntityRecord[value1];
-//var entity2 = labelToEntityRecord[value2];
-//
-//var sum1 = calcSumOfComparisonParameter(entity1);
-//var sum2 = calcSumOfComparisonParameter(entity2);
-//
-//return (sum1 - sum2);
-//}
-//
-//function createCheckBoxesInsidePaginatedDiv(pageIndex){
-//
-//var highestIndexInPage = Math.min((pageIndex + 1) * paginationOptions.items_per_page, setOfLabels.length);                
-//var newContent = ' ';
-//
-///*
-// * Iterate through the list of school setOfLabels and build an HTML string
-// * Also check if some of the checkboxes are previously checked? If they are checked,
-// * then they should be on this time too!
-// */
-//for (var i = pageIndex * paginationOptions.items_per_page; i < highestIndexInPage; i++) {
-//    var checkedFlag = ' ', j = 0, fontWeight = ' ';
-//    $.each(renderedObjects, function(){
-//        if (renderedObjects[j].label == setOfLabels[i]) {
-//            checkedFlag = "checked";
-//        	fontWeight = " style='font-weight:bold;' ";
-//        }
-//        j++;                        
-//    });
-//    newContent += '<li><input type = "checkbox" class="if_clicked_on_school" value="' + setOfLabels[i] + '"' + checkedFlag + ' ' + '><a href="" ' + fontWeight + ' >' + setOfLabels[i] + '<\/a><\/li>';        
-//}
-//               
-//// replace old content with new content
-//$('#searchresult').html(newContent);
-//populateMapOfCheckedEntities();
-//
-//}
-//function populateMapOfCheckedEntities(){
-////console.log('populating checked entities');
-//
-////var checkedEntities = $("input[type=checkbox].if_clicked_on_school");
-////$.each(checkedEntities, function(index, val){
-////	labelToCheckedEntities[$(val).attr("value")] = val;
-////	console.log('checked ', $(val).attr("value"));
-////});
-//
-//$.each(labelToCheckedEntities, function(index, val){
-////	labelToCheckedEntities[$(val).attr("value")] = val;
-//	//console.log('checked ', $(val).attr("value"));
-//});
-//}
--- a/productMods/js/visualization/personlevel/person_level-fm-copi.js
+++ b/productMods/js/visualization/personlevel/person_level-fm-copi.js
@ -0,0 +1,449 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+function getWellFormedURLs(given_uri, type) {
+	
+	if (!given_uri || given_uri == "") {
+		return;
+	}
+
+	// general best practice is to put javascript code inside document.ready
+	// but in this case when i do that the function does not get called
+	// properly.
+	// so removing it for now.
+
+	// $(document).ready(function() {
+
+	var finalURL;
+
+	if (type == "coauthorship") {
+		finalURL = $.ajax({
+			url: contextPath + "/visualizationAjax",
+			data: ({vis: "utilities", vis_mode: "PERSON_LEVEL_URL", uri: given_uri}),
+			dataType: "text",
+			async: false,
+			success:function(data){
+		}
+		}).responseText;
+
+		return finalURL;
+		
+	} else 	if (type == "coinvestigation") {
+
+		finalURL = $.ajax({
+			url: contextPath + "/visualizationAjax",
+			data: ({vis: "utilities", vis_mode: "COPI_URL", uri: given_uri}),
+			dataType: "text",
+			async: false,
+			success:function(data){
+		}
+		}).responseText;
+
+		return finalURL;		
+		
+	}else if (type == "profile") {
+
+		finalURL = $.ajax({
+			url: contextPath + "/visualizationAjax",
+			data: ({vis: "utilities", vis_mode: "PROFILE_URL", uri: given_uri}),
+			dataType: "text",
+			async: false,
+			success:function(data){
+		}
+		}).responseText;
+
+		return finalURL;
+
+	} else if (type == "image") {
+
+		finalURL = $.ajax({
+			url: contextPath + "/visualizationAjax",
+			data: ({vis: "utilities", vis_mode: "IMAGE_URL", uri: given_uri}),
+			dataType: "text",
+			async: false,
+			success:function(data){
+		}
+		}).responseText;
+
+		return finalURL;
+
+	} else if (type == "profile_info") {
+
+		var profileInfoJSON = $.ajax({
+			url: contextPath + "/visualizationAjax",
+			data: ({vis: "utilities", vis_mode: "PROFILE_INFO", uri: given_uri}),
+			dataType: "json",
+			async: false,
+			success:function(data){
+		}
+		}).responseText;
+
+		return profileInfoJSON;
+
+	}		
+
+}
+
+$.fn.image = function(src, successFunc, failureFunc){
+	return this.each(function(){ 
+		var profileImage = new Image();
+		profileImage.onerror = failureFunc;
+		profileImage.onload = successFunc;
+		profileImage.src = src;
+
+		return profileImage;
+	});
+};	
+	
+
+function setProfileImage(imageContainerID, mainImageURL) {
+	
+	if (imageContainerID == "") {
+		return;
+	}
+	
+	if (!mainImageURL || mainImageURL == "") {
+		$("#" + imageContainerID).empty();
+		return;
+	}
+	
+	var rawPath = getWellFormedURLs(mainImageURL, "image");
+
+	var imageLink =  contextPath + rawPath;
+
+	var imageContainer = $("#" + imageContainerID);
+	imageContainer.image(imageLink, 
+			function(){
+		imageContainer.empty().append(this); 
+	},
+	function(){
+		// For performing any action on failure to
+		// find the image.
+		imageContainer.empty();
+	}
+	);
+	
+}
+
+function setProfileMoniker(monikerContainerID, moniker, doEllipsis) {
+
+	if (monikerContainerID == "") {
+		return;
+	}
+	
+	if (!moniker) {
+		$("#" + monikerContainerID).empty();
+		return;
+	}
+
+	var finalDisplayMoniker;
+	
+	if (moniker.length > 30 && doEllipsis) {
+		
+		finalDisplayMoniker = moniker.substr(0,30) + "...";
+		
+	} else {
+		
+		finalDisplayMoniker = moniker;
+		
+	}
+	
+	$("#" + monikerContainerID).empty().text(finalDisplayMoniker);
+	$("#" + monikerContainerID).attr('title', moniker);
+
+}
+
+
+function setProfileName(nameContainerID, name, doNameEllipsis) {
+	
+	if (nameContainerID == "") {
+		return;
+	}
+	
+	if (!name) {
+		$("#" + nameContainerID).empty();
+		return;
+	}
+
+	var finalDisplayName;
+	
+	if (name.length > 30 && doNameEllipsis) {
+		
+		finalDisplayName = name.substr(0,30) + "...";
+		
+	} else {
+		
+		finalDisplayName = name;
+		
+	}
+	
+	$("#" + nameContainerID).empty().text(finalDisplayName);
+	$("#" + nameContainerID).attr('title', name);
+
+}
+
+function processProfileInformation(nameContainerID,
+		monikerContainerID,
+		imageContainerID,
+		profileInfoJSON,
+		doMonikerEllipsis,
+		doNameEllipsis) {
+
+	var name, mainImageURL, moniker;
+	
+	if (jQuery.isEmptyObject(profileInfoJSON)) {
+		return;
+	}
+
+	$.each(profileInfoJSON, function(key, set){
+
+		if (key.search(/mainImage/i) > -1) {
+
+			mainImageURL = set[0];
+
+		} else if (key.search(/moniker/i) > -1) {
+
+			moniker = set[0];
+
+		} else if (key.search(/label/i) > -1) {
+
+			name = set[0];
+
+		}
+
+	});
+
+	setProfileName(nameContainerID, name, doNameEllipsis);
+	setProfileMoniker(monikerContainerID, moniker, doMonikerEllipsis);
+	setProfileImage(imageContainerID, mainImageURL);
+
+}
+
+
+function visLoaded(nodes){
+	
+	var jsonedNodes = jQuery.parseJSON(nodes);
+	var tableID = "";
+	var tableContainer = "";
+	
+	tableID = "coinvestigations_table";
+	tableContainer = "coinve_table_container";
+	
+	$(document).ready(function() { 
+		 createTable("coinvestigations_table" , "coinve_table_container" , jsonedNodes.slice(1));
+	});
+
+}
+
+
+function createTable(tableID, tableContainer, tableData) {
+	
+	var number_of_works = "";
+	var tableCaption = "";
+	var tableColumnTitle1 = "";
+	var tableColumnTitle2 = "";
+	
+
+	tableCaption = "Co-investigators ";
+	tableColumnTitle1 = "Investigator";
+	tableColumnTitle2 = "Grants with <br />";	
+		
+	var table = $('<table>');
+	table.attr('id', tableID);
+	
+	table.append($('<caption>').html(tableCaption + "<a href=\"" + egoCoInvestigatorsListDataFileURL + "\">(.CSV File)</a>"));  
+	
+	var header = $('<thead>');
+	
+	var row = $('<tr>'); 
+
+	var investigatorTH = $('<th>');
+	investigatorTH.html(tableColumnTitle1);
+	row.append(investigatorTH);
+	
+	row.append($('<th>').html(tableColumnTitle2 + "" + $('#ego_label').text()));  
+
+	header.append(row);
+	
+	table.append(header);
+
+	$.each(tableData, function(i, item){ 
+		
+		number_of_works = item.number_of_investigated_grants;
+
+		var row = $('<tr>'); 
+
+		row.append($('<td>').html(item.label));
+		row.append($('<td>').html(number_of_works));
+
+		table.append(row);
+
+	});	
+
+	table.prependTo('#' + tableContainer);
+	$('#' + tableContainer + " #loadingData").remove();
+	
+}
+
+//renderStatsOnNodeClicked, CoRelations, noOfCoRelations
+//function nodeClickedJS(json){
+function renderStatsOnNodeClicked(json){
+	
+	//console.log(json);
+	var obj = jQuery.parseJSON(json);
+	
+	var works = "";
+	var persons = "";
+	var relation = "";
+	var earliest_work = "";
+	var latest_work = "";
+	var number_of_works = "";
+	
+	works = "Grant(s)";
+	persons = "Co-investigator(s)";
+	relation = "coinvestigation";
+	earliest_work = obj.earliest_grant;
+	latest_work = obj.latest_grant;
+	number_of_works = obj.number_of_investigated_grants;
+	
+	
+
+
+	$("#dataPanel").attr("style","visibility:visible");
+	$("#works").empty().append(number_of_works);
+
+	/*
+	 * Here obj.url points to the uri of that individual
+	 */
+	if(obj.url){
+		
+		if (obj.url == egoURI) {
+			
+			$("#investigatorName").addClass('investigator_name').removeClass('neutral_investigator_name');
+			$('#num_works > .investigator_stats_text').text(works);
+			$('#num_investigators > .investigator_stats_text').text(persons);
+			
+		} else {
+
+			$("#investigatorName").addClass('neutral_investigator_name').removeClass('investigator_name');
+			$('#num_works > .investigator_stats_text').text('Joint ' + works);
+			$('#num_investigators > .investigator_stats_text').text('Joint ' + persons);
+			
+		}
+		
+		$("#profileUrl").attr("href", getWellFormedURLs(obj.url, "profile"));
+		$("#coInvestigationVisUrl").attr("href", getWellFormedURLs(obj.url, relation));
+		processProfileInformation("investigatorName", 
+				"profileMoniker",
+				"profileImage",
+				jQuery.parseJSON(getWellFormedURLs(obj.url, "profile_info")),
+				true,
+				true);
+		
+		
+
+	} else{
+		$("#profileUrl").attr("href","#");
+		$("#coInvestigationVisUrl").attr("href","#");
+	}
+
+	$("#coInvestigators").empty().append(obj.noOfCorelations);	
+	
+	$("#firstGrant").empty().append(earliest_work);
+	(earliest_work)?$("#fGrant").attr("style","visibility:visible"):$("#fGrant").attr("style","visibility:hidden");
+	$("#lastGrant").empty().append(latest_work);
+	(latest_work)?$("#lGrant").attr("style","visibility:visible"):$("#lGrant").attr("style","visibility:hidden");
+
+	// obj.url:the url parameter for node
+
+}
+
+/*
+* Inside both of these functions, '&' are replaced with '%26' because we are externally
+* passing two parameters to the flash code using flashvars (see renderCoInvestigationVisualization())
+* and they are delimited using '&' too.
+*/
+
+function getEncodedCoAuthorURL(){
+	
+	var queryString = "uri="+ egoURI + "&vis=coauthorship";
+//	console.log('domainParam is '+ domainParam);
+//	console.log('CoAuthorURL is ' + domainParam + '?' + queryString.replace(/&/g, '%26'));
+	return domainParam + '?' + queryString.replace(/&/g, '%26');	
+}
+
+function getEncodedCoPIURL(){
+	
+	var queryString = "uri="+ egoURI+ "&vis=coprincipalinvestigator";
+//	console.log('CoPIURL is ' + domainParam + '?' + queryString.replace(/&/g, '%26') );	
+	return domainParam + '?' + queryString.replace(/&/g, '%26');
+}
+
+function renderCoInvestigationVisualization() {
+	
+	var visualization = "";
+	var encodedURL = "";
+	
+	visualization = "CoPI";
+	encodedURL = getEncodedCoPIURL();		
+	
+//	console.log('visualization is ' + visualization + ' and encodedURL is '+ encodedURL);
+	// Version check for the Flash Player that has the ability to start Player
+	// Product Install (6.0r65)
+	var hasProductInstall = DetectFlashVer(6, 0, 65);
+
+	// Version check based upon the values defined in globals
+	var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
+
+	if ( hasProductInstall && !hasRequestedVersion ) {
+		// DO NOT MODIFY THE FOLLOWING FOUR LINES
+		// Location visited after installation is complete if installation is
+		// required
+		var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
+		var MMredirectURL = window.location;
+		document.title = document.title.slice(0, 47) + " - Flash Player Installation";
+		var MMdoctitle = document.title;
+
+		AC_FL_RunContent(
+				"src", "playerProductInstall",
+				"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
+				"width", "800",
+				"height", "840",
+				"align", "middle",
+				"id", "EgoCentric",
+				"quality", "high",
+				"bgcolor", "#ffffff",
+				"name", "EgoCentric",
+				"allowScriptAccess","sameDomain",
+				"type", "application/x-shockwave-flash",
+				"pluginspage", "http://www.adobe.com/go/getflashplayer"
+		);
+	} else if (hasRequestedVersion) {
+		// if we've detected an acceptable version
+		// embed the Flash Content SWF when all tests are passed
+		//coAuthorUrl=/vivo1/visualization?vis=coauthorship%26render_mode=data%26uri=http%3A%2F%2Fvivo.iu.edu%2Findividual%2FBrnerKaty&labelField=label&coPIUrl=/vivo1/visualization?vis=coprincipalinvestigator%26render_mode=data%26uri=http%3A%2F%2Fvivo.iu.edu%2Findividual%2FBrnerKaty&labelField=label
+		AC_FL_RunContent(
+				"src", swfLink,
+//				"flashVars", 'coAuthorUrl='+ encodeURL(egoCoAuthorshipDataFeederURL) + '&coPIUrl=' + encodeURL(egoCoPIDataFeederURL) ,			
+//				"flashVars", 'coAuthorUrl='+ getEncodedCoAuthorURL() + '&coPIUrl=' + getEncodedCoPIURL() ,
+//				"flashVars", 'graphmlUrl=' + getEncodedCoAuthorURL() + '&labelField=label&visType=CoAuthor',
+				"flashVars", 'graphmlUrl=' + encodedURL + '&labelField=label&visType='+visualization,
+				"width", "600",
+				"height", "850",
+				"align", "top",
+				"id", "EgoCentric",
+				"quality", "high",
+				"bgcolor", "#ffffff",
+				"name", "EgoCentric",
+				"allowScriptAccess","sameDomain",
+				"type", "application/x-shockwave-flash",
+				"pluginspage", "http://www.adobe.com/go/getflashplayer"
+		);
+	} else {  // flash is too old or we can't detect the plugin
+		var alternateContent = '<br /><h3 style="color: red;">'
+			+ 'This content requires the Adobe Flash Player. '
+			+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a></h3>';
+		document.write(alternateContent);  // insert non-flash content
+		
+	}
+
+}
--- a/productMods/js/visualization/sparkline.js
+++ b/productMods/js/visualization/sparkline.js
@ -3,9 +3,10 @@
 /* Javascript for sparkline visualization on person profile page */

 var visualization = {
-	render: function(url) {
-		var containerId = 'vis_container',
-		    container = $('#' + containerId);
+	renderCoAuthor: function(url) {
+	
+		var containerIdCoAuthor = 'vis_container_coauthor',
+		containerCoAuthor = $('#' + containerIdCoAuthor);
 			
        //container.empty().html('<img src="${loadingImageLink}" />');
       
@ -15,17 +16,21 @@ var visualization = {
 				'render_mode': 'dynamic',
 				'vis': 'person_pub_count',
 				'vis_mode': 'short',
-				'container': containerId
+				'container': containerIdCoAuthor
 			},
            dataType: 'html',
            success:function(data){
-                container.html(data);
+				containerCoAuthor.html(data);
+				containerCoAuthor.children("#pub_count_short_sparkline_vis").append(coAuthorIcon);
+				/*	containerCoAuthor.find("<img>").css("float", "left"); */
            }
        });		
 	}
 };

 $(document).ready(function() {
+	
 	visualizationUrl = visualizationUrl.replace("/visualization", "/visualizationAjax");
-    visualization.render(visualizationUrl);
+	
+    visualization.renderCoAuthor(visualizationUrl);
 });
--- a/productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl
+++ b/productMods/templates/freemarker/body/partials/individual/individual-sparklineVisualization.ftl
@ -4,15 +4,30 @@

 <#if individual.visualizationUrl??>

+<#assign coAuthorIcon = '${urls.images}/visualization/co_author_icon.png'>
+<#assign coInvestigatorIcon = '${urls.images}/visualization/co_investigator_icon.png'>
+<#assign standardVisualizationURLRoot ="/visualizationfm">
 <#assign googleJSAPI = 'http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
-
-    <div id="vis_container">&nbsp;</div>
+<#assign CoInvestigatorURL = '${urls.base}${standardVisualizationURLRoot}?vis=person_level&uri=${individual.uri}&vis_mode=copi'>
+	
+    <div id="vis_container_coauthor">&nbsp;</div>
    
+    <div id="vis_container_coinvestigator" style="clear:left;width: 100%;">
+    	<div style="width: 30%;float:left;margin-top: 5%;margin-right: 10px;"><img src="${coInvestigatorIcon}"/></div>
+    	<div><h3>Co-Investigator Network <br/><a class="view-all-style" href="${CoInvestigatorURL}">View <span class= "pictos-arrow-10">4</span></a></h3></div>
+    </div>
+    
+
    ${stylesheets.addFromTheme("/visualization/visualization.css")}
 	${scripts.add(googleJSAPI)}
    ${scripts.add("/js/visualization/sparkline.js")}
    
    <script type="text/javascript">
        var visualizationUrl = '${individual.visualizationUrl}';
+        
+        var coAuthorIcon = $("<img>");
+        coAuthorIcon.attr("src", '${coAuthorIcon}');
+        
    </script>
+  
 </#if>
--- a/productMods/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl
+++ b/productMods/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl
@ -12,7 +12,7 @@
    <#assign sparklineContainerID = visContainerID + "_spark"> 
 </#if>

-<div class="staticPageBackground">
+<div class="staticPageBackground" style="width: 50%; float: right;">
    <div id="${visContainerID}">
        <script type="text/javascript">
        
@ -51,8 +51,8 @@
                <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
                var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
                sparkline.draw(sparklineDataView, {
-                        width: 65,
-                        height: 30,
+                        width: 150,
+                        height: 60,
                        showAxisLines: false,
                        showValueLabels: false,
                        labelPosition: 'none'
@ -68,11 +68,9 @@
                        renderedShortSparks += data.getValue(value, 1);
                    });
         
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> co-author(s) <br/></span>");
            
-                    var sparksText = ' co-author(s) within the last 10 years <span class="incomplete-data-holder" title="This information'
-                                    + ' is based solely on publications which have been loaded into the VIVO system. This may only be a small' 
-                                    + ' sample of the person\'s total work.">incomplete list</span>';
+                    var sparksText = '  within the last 10 years';
            
                 <#else>
            
@ -81,9 +79,9 @@
                     * any year associated with it. Hence.
                     * */
                    var renderedSparks = ${sparklineVO.renderedSparks};      
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearPublications}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearPublications})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> co-author(s) <br/></span>");
            
-                    var sparksText = ' co-author(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
+                    var sparksText = '  from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
                                        + ' to ${sparklineVO.latestRenderedPublicationYear?c}</span> ' 
                                        + ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
                                        
@ -128,24 +126,26 @@
                    var row = $('<tr>');
                    sparklineImgTD = $('<td>');
                    sparklineImgTD.attr('id', '${sparklineContainerID}_img');
-                    sparklineImgTD.attr('width', '65');
-                    sparklineImgTD.attr('align', 'right');
+                    sparklineImgTD.attr('width', '150');
                    sparklineImgTD.attr('class', 'sparkline_style');
            
                    row.append(sparklineImgTD);
-            
+            		var row2 = $('<tr>');
                    var sparklineNumberTD = $('<td>');
-                    sparklineNumberTD.attr('width', '30');
-                    sparklineNumberTD.attr('align', 'right');
                    sparklineNumberTD.attr('class', 'sparkline_number');
-                    row.append(sparklineNumberTD);
+					sparklineNumberTD.css('text-align', 'left');
+                    row2.append(sparklineNumberTD);
+                    var row3 = $('<tr>');
+                    
                    var sparklineTextTD = $('<td>');
-                    sparklineTextTD.attr('width', '450');
                    sparklineTextTD.attr('class', 'sparkline_text');
-                    row.append(sparklineTextTD);
+					sparklineTextTD.css('text-align', 'left');
+                    row3.append(sparklineTextTD);
                    table.append(row);
+                    table.append(row2);
+                    table.append(row3);
                    table.prependTo('#${sparklineContainerID}');
-            
+         
                }
            
                drawCoauthorsSparklineVisualization(sparklineImgTD);
--- a/productMods/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl
+++ b/productMods/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl
@ -12,7 +12,7 @@
    <#assign sparklineContainerID = visContainerID + "_spark"> 
 </#if>

-<div class="staticPageBackground">
+<div class="staticPageBackground" style="width: 50%; float: right;">
    <div id="${visContainerID}">
        <script type="text/javascript">
        
@ -21,7 +21,7 @@
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Year');
                data.addColumn('number', 'Unique co-investigators');
-                data.addRows(${sparklineVO.numOfYearsToBeRendered});
+                data.addRows(${sparklineVO.yearToEntityCountDataTable?size});
        
                <#list sparklineVO.yearToEntityCountDataTable as yearToUniqueCoinvestigatorsDataElement>                        
                    data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoinvestigatorsDataElement.year}');
@ -50,8 +50,8 @@
                <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
                var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
                sparkline.draw(sparklineDataView, {
-                        width: 65,
-                        height: 30,
+                        width: 150,
+                        height: 60,
                        showAxisLines: false,
                        showValueLabels: false,
                        labelPosition: 'none'
@ -67,11 +67,9 @@
                        renderedShortSparks += data.getValue(value, 1);
                    });      
                    
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearGrants}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearGrants})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> co-investigator(s) <br/></span>");
            
-                    var sparksText = ' co-investigator(s) within the last 10 years <span class="incomplete-data-holder" title="This information'
-                                    + ' is based solely on grants which have been loaded into the VIVO system. This may only be a small' 
-                                    + ' sample of the person\'s total work.">incomplete list</span>';
+                    var sparksText = '  within the last 10 years';
            
                 <#else>
                       
@ -80,14 +78,14 @@
                     * any year associated with it. Hence.
                     * */
                    var renderedSparks = ${sparklineVO.renderedSparks};      
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearGrants}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearGrants})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> co-investigator(s) <br/></span>");
            
-                    var sparksText = ' co-investigator(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
+                    var sparksText = '  from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
                                        + ' to ${sparklineVO.latestRenderedGrantYear?c}</span> ' 
                                        + ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
                 </#if>

-                 $('#${sparklineContainerID} td.sparkline_text').html(sparksText);    
+                 $('#${sparklineContainerID} td.sparkline_text').html(sparksText).css("font-weight", "bold");    
                 
           }
    
@ -127,31 +125,35 @@
                    var row = $('<tr>');
                    sparklineImgTD = $('<td>');
                    sparklineImgTD.attr('id', '${sparklineContainerID}_img');
-                    sparklineImgTD.attr('width', '65');
-                    sparklineImgTD.attr('align', 'right');
+                    sparklineImgTD.attr('width', '150');
                    sparklineImgTD.attr('class', 'sparkline_style');
            
                    row.append(sparklineImgTD);
-            
+            		var row2 = $('<tr>');
                    var sparklineNumberTD = $('<td>');
-                    sparklineNumberTD.attr('width', '30');
-                    sparklineNumberTD.attr('align', 'right');
                    sparklineNumberTD.attr('class', 'sparkline_number');
-                    row.append(sparklineNumberTD);
+					sparklineNumberTD.css('text-align', 'left');
+                    row2.append(sparklineNumberTD);
+                    var row3 = $('<tr>');
+                    
                    var sparklineTextTD = $('<td>');
-                    sparklineTextTD.attr('width', '450');
                    sparklineTextTD.attr('class', 'sparkline_text');
-                    row.append(sparklineTextTD);
+					sparklineTextTD.css('text-align', 'left');
+                    row3.append(sparklineTextTD);
                    table.append(row);
+                    table.append(row2);
+                    table.append(row3);
                    table.prependTo('#${sparklineContainerID}');
-            
+       
                }
                
                drawCoInvestigatorsSparklineVisualization(sparklineImgTD);
            });
        </script> 
        
-    </div><!-- Sparkline Viz -->
+    </div>
+    
+    <!-- Sparkline Viz -->

    <#if sparklineVO.shortVisMode>
        <#--<span class="vis_link">-->
@ -160,37 +162,22 @@
    <#else>
        <!-- For Full Sparkline - Print the Table of CoInvestigator Counts per Year -->
        <p>
-            <table id='sparkline_data_table'>
-                <caption>
-                    Unique Co-Investigators per year <a href="${sparklineVO.downloadDataLink}">(.CSV File)</a>
-                </caption>
-                <thead>
-                    <tr>
-                        <th>
-                            Year
-                        </th>
-                        <th>
-                            Count
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
+            <#if displayTable?? && displayTable>
        
-                <#list sparklineVO.yearToActivityCount?keys as year>
-                    <tr>
-                        <td>
-                            ${year}
-                        </td>
-                        <td>
-                            ${sparklineVO.yearToActivityCount[year]}
-                        </td>
-                    </tr>
-                </#list>
-            
-                </tbody>
-            </table>
-            Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
-            <br />
+		        <p>	
+					<#assign tableID = "sparkline_data_table" />
+					<#assign tableCaption = "Unique Co-Investigators per year " />
+					<#assign tableActivityColumnName = "Count" />
+					<#assign tableContent = sparklineVO.yearToActivityCount />
+					<#assign fileDownloadLink = sparklineVO.downloadDataLink />
+					
+					<#include "yearToActivityCountTable.ftl">
+		
+		            Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
+		            <br />
+		        </p>
+        
+	        </#if>	
        </p>
    </#if>
 </div>                       
--- a/productMods/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl
+++ b/productMods/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl
@ -12,7 +12,7 @@
    <#assign sparklineContainerID = visContainerID + "_spark"> 
 </#if>

-<div class="staticPageBackground">
+<div class="staticPageBackground" style="width: 50%; float: left;">
    <div id="${visContainerID}">
        <script type="text/javascript">
    
@ -21,7 +21,7 @@
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Year');
                data.addColumn('number', 'Grants');
-                data.addRows(${sparklineVO.numOfYearsToBeRendered});
+                data.addRows(${sparklineVO.yearToEntityCountDataTable?size});
        
                <#list sparklineVO.yearToEntityCountDataTable as yearToGrantCountDataElement>                        
                    data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, '${yearToGrantCountDataElement.year}');
@ -41,8 +41,6 @@
                        column: 0,
                        minValue: '${sparklineVO.earliestRenderedGrantYear?c}',
                        maxValue: '${sparklineVO.latestRenderedGrantYear?c}'
-                        /*minValue: '2001',
-                        maxValue: '2011'*/
                }]));

                <#else>
@ -52,8 +50,8 @@
                <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
                var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
                sparkline.draw(sparklineDataView, {
-                        width: 65,
-                        height: 30,
+                        width: 150,
+                        height: 60,
                        showAxisLines: false,
                        showValueLabels: false,
                        labelPosition: 'none'
@ -69,11 +67,9 @@
                        renderedShortSparks += data.getValue(value, 1);
                    });
                    
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearGrants}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearGrants})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> grant(s) <br/></span>");
            
-                    var sparksText = ' grant(s) within the last 10 years <span class="incomplete-data-holder" title="This information'
-                                    + ' is based solely on grants which have been loaded into the VIVO system. This may only be a small' 
-                                    + ' sample of the person\'s total work.">incomplete list</span>';
+                    var sparksText = '  within the last 10 years';
            
                 <#else>
                 
@ -82,11 +78,12 @@
                     * any year associated with it. Hence.
                     * */
                    var renderedSparks = ${sparklineVO.renderedSparks};      
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearGrants}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearGrants})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> grant(s) <br/></span>");
            
-                    var sparksText = ' grant(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
+                    var sparksText = '  from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
                                        + ' to ${sparklineVO.latestRenderedGrantYear?c}</span> ' 
                                        + ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
+
                 </#if>
         
                 $('#${sparklineContainerID} td.sparkline_text').html(sparksText);
@ -128,24 +125,25 @@
                    var row = $('<tr>');
                    sparklineImgTD = $('<td>');
                    sparklineImgTD.attr('id', '${sparklineContainerID}_img');
-                    sparklineImgTD.attr('width', '65');
-                    sparklineImgTD.attr('align', 'right');
+                    sparklineImgTD.attr('width', '150');
                    sparklineImgTD.attr('class', 'sparkline_style');
            
                    row.append(sparklineImgTD);
-            
+            		var row2 = $('<tr>');
                    var sparklineNumberTD = $('<td>');
-                    sparklineNumberTD.attr('width', '30');
-                    sparklineNumberTD.attr('align', 'right');
                    sparklineNumberTD.attr('class', 'sparkline_number');
-                    row.append(sparklineNumberTD);
+					sparklineNumberTD.css('text-align', 'left');
+                    row2.append(sparklineNumberTD);
+                    var row3 = $('<tr>');
+                    
                    var sparklineTextTD = $('<td>');
-                    sparklineTextTD.attr('width', '450');
                    sparklineTextTD.attr('class', 'sparkline_text');
-                    row.append(sparklineTextTD);
+					sparklineTextTD.css('text-align', 'left');
+                    row3.append(sparklineTextTD);
                    table.append(row);
+                    table.append(row2);
+                    table.append(row3);
                    table.prependTo('#${sparklineContainerID}');
-            
                }
                
                drawGrantCountVisualization(sparklineImgTD);
@ -160,39 +158,25 @@
        <#--</span>-->
    <#else>
        <!-- For Full Sparkline - Print the Table of Grant Counts per Year -->
-        <p>
-            <table id='sparkline_data_table'>
-                <caption>
-                    Grants per year <a href="${sparklineVO.downloadDataLink}">(.CSV File)</a>
-                </caption>
-                <thead>
-                    <tr>
-                        <th>
-                            Year
-                        </th>
-                        <th>
-                            Grants
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
+        <#if displayTable?? && displayTable>
        
-                <#list sparklineVO.yearToActivityCount?keys as year>
-                    <tr>
-                        <td>
-                            ${year}
-                        </td>
-                        <td>
-                            ${sparklineVO.yearToActivityCount[year]}
-                        </td>
-                    </tr>
-                </#list>
-            
-                </tbody>
-            </table>
-            Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
-            <br />
-        </p>
+	        <p>	
+				<#assign tableID = "sparkline_data_table" />
+				<#assign tableCaption = "Grants per year " />
+				<#assign tableActivityColumnName = "Grants" />
+				<#assign tableContent = sparklineVO.yearToActivityCount />
+				<#assign fileDownloadLink = sparklineVO.downloadDataLink />
+				
+				<#include "yearToActivityCountTable.ftl">
+	
+	            Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
+	            <br />
+	        </p>
+        
+        
+        </#if>
+        
+
    </#if>
 </div>    
                    
--- a/productMods/templates/freemarker/visualization/personlevel/coAuthorPersonLevel.ftl
+++ b/productMods/templates/freemarker/visualization/personlevel/coAuthorPersonLevel.ftl
@ -17,6 +17,8 @@
 <#assign googleVisualizationAPI = 'http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
 <#assign coAuthorPersonLevelJavaScript = '${urls.base}/js/visualization/personlevel/person_level-fm.js'>

+<#assign coInvestigatorIcon = '${urls.images}/visualization/co_investigator_icon.png'>
+

 <script type="text/javascript" src="${adobeFlashDetector}"></script>
 <script type="text/javascript" src="${googleVisualizationAPI}"></script>
@ -40,7 +42,7 @@ var egoCoAuthorshipDataFeederURL = "${egoCoAuthorshipDataFeederURL}";
 var egoCoAuthorsListDataFileURL = "${egoCoAuthorsListDataFileURL}";
 var contextPath = "${urls.base}";

-var domainParam = "http://vivo-vis-test.slis.indiana.edu/vivo1/visualizationData";
+var domainParam = "http://vivo-vis-bkoniden.slis.indiana.edu/vivo1/visualizationData";

 // -->
 </script>
@ -64,7 +66,7 @@ var domainParam = "http://vivo-vis-test.slis.indiana.edu/vivo1/visualizationData

 $(document).ready(function(){

-	<#if (numOfCoAuthorShips > 0) >
+	<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
 		$("#coauth_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
 	</#if>
 		    	
@ -88,25 +90,26 @@ $(document).ready(function(){
 	<div id="ego_profile">
 			
 		<#-- Label -->
-			<h2 style="width:20%"><a href="${egoVivoProfileURL}"><span id="ego_label" class="author_name"></span></a></h2>
+			<h2 style="width:20%"><span id="ego_label" class="author_name"></span></h2>
 	
 		<#-- Moniker-->
 			<em id="ego_moniker" class="moniker"></em>
-		
+
 		<div class = "toggle_visualization">
-			<h2>Co-Investigator Network</h2>
-			<a style = "margin-top:0px;" class="view-all-style" href='${coprincipalinvestigatorURL}'>View</a>
-			<span class="pictos-arrow-10">4</span>
-		</div>
+			<div style="float:left;margin-top: 5%;margin-right: 10px; height:100%;"><img src="${coInvestigatorIcon}"/></div>
+    		<div><h3>Co-Investigator Network <br/><a class="view-all-style" href="${coprincipalinvestigatorURL}">View <span class= "pictos-arrow-10">4</span></a></h3></div>
+		</div>		
+		
+		<div style=" width: 20%; margin-top:25px;"><span class="pictos-arrow-14">4</span><a href="${egoVivoProfileURL}" style="color:#171717;text-decoration:none;">Back to Profile</a></div>	
 	
 		<div style="clear:both;"></div>
 	
-			<#if (numOfAuthors > 0) >
+			<#if (numOfAuthors?? && numOfAuthors > 0) >
 			
-				<h2 class="sub_headings">Co-Author Network </h2>
+				<div  class="sub_headings"><h2>Co-Author Network </h2></div>
 				
 				<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) || (numOfAuthors?? && numOfAuthors > 0) > 
-					   	<a class = "fileDownloadPlaceHolder" href="${egoCoAuthorshipNetworkDataFileURL}">(GraphML File)</a>
+					   	<div class = "fileDownloadPlaceHolder"><a href="${egoCoAuthorshipNetworkDataFileURL}">(GraphML File)</a></div>
 				<#else>

 				        <#if numOfAuthors?? && numOfAuthors <= 0 >
@ -144,7 +147,7 @@ $(document).ready(function(){
 				<h4 id ="profileTitle"> <b>Profile</b></h4>	
 				<div id="profileImage" class="thumbnail"></div>
 			
-				<div class="bold"><strong><span id="authorName" class="neutral_author_name">&nbsp;</span></strong></div>
+				<div><h2><span id="authorName" class="neutral_author_name">&nbsp;</span></h2></div>
 				
 				<div class="italicize"><span id="profileMoniker" class="author_moniker"></span></div>
 				<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coAuthorshipVisUrl">Co-author network</a></div> 
@ -165,7 +168,7 @@ $(document).ready(function(){
 	</#if>
 	
 	<#-- Sparkline -->
-	<div style="width: 60%; height: 100px; float:right;">
+	<div style="width: 67%; height: 175px; margin-left: 33%;">
 		
 		<#assign displayTable = false />
 		
@ -176,11 +179,11 @@ $(document).ready(function(){
 		<#include "coAuthorshipSparklineContent.ftl">
 	</div>	
 	
-	<#if (numOfAuthors > 0) >
+	<#if (numOfAuthors?? && numOfAuthors > 0) >

 		<div class="vis_stats">
 		
-		<h3 class="sub_headings" id="table_heading">Tables</h3>
+		<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
 		
 			<div class="vis-tables">
 				
@ -198,7 +201,7 @@ $(document).ready(function(){
 				
 			</div>
 			
-			<#if (numOfCoAuthorShips > 0) >
+			<#if (numOfCoAuthorShips?? && numOfCoAuthorShips > 0) >
 		
 				<div class="vis-tables">
 					<p id="coauth_table_container" class="datatable"></p>
--- a/productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl
+++ b/productMods/templates/freemarker/visualization/personlevel/coPIPersonLevel.ftl
@ -1 +1,217 @@
-<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#assign standardVisualizationURLRoot ="/visualizationfm">
+<#assign ajaxVisualizationURLRoot ="/visualizationAjax">
+<#assign dataVisualizationURLRoot ="/visualizationData">
+
+<#assign egoURI ="${egoURIParam?url}">
+<#assign egoCoInvestigationDataFeederURL = '${urls.base}${dataVisualizationURLRoot}?vis=coprincipalinvestigator&uri=${egoURI}&vis_mode=copi_network_stream&labelField=label'>
+
+<#assign coauthorshipURL = '${urls.base}${standardVisualizationURLRoot}?vis=person_level&uri=${egoURI}&vis_mode=coauthor'>
+
+<#assign egoCoInvestigatorsListDataFileURL = '${urls.base}${dataVisualizationURLRoot}?vis=coprincipalinvestigator&uri=${egoURI}&vis_mode=copis'>
+<#assign egoCoInvestigationNetworkDataFileURL = '${urls.base}${dataVisualizationURLRoot}?vis=coprincipalinvestigator&uri=${egoURI}&vis_mode=copi_network_download'>
+
+<#assign coAuthorIcon = '${urls.images}/visualization/co_author_icon.png'>
+
+<#assign swfLink = '${urls.images}/visualization/coauthorship/EgoCentric.swf'>
+<#assign adobeFlashDetector = '${urls.base}/js/visualization/coauthorship/AC_OETags.js'>
+<#assign googleVisualizationAPI = 'http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
+<#assign coInvestigatorPersonLevelJavaScript = '${urls.base}/js/visualization/personlevel/person_level-fm-copi.js'>
+
+<script type="text/javascript" src="${adobeFlashDetector}"></script>
+<script type="text/javascript" src="${googleVisualizationAPI}"></script>
+
+<script language="JavaScript" type="text/javascript">
+<!--
+// -----------------------------------------------------------------------------
+// Globals
+// Major version of Flash required
+var requiredMajorVersion = 10;
+// Minor version of Flash required
+var requiredMinorVersion = 0;
+// Minor version of Flash required
+var requiredRevision = 0;
+// -----------------------------------------------------------------------------
+
+var swfLink = "${swfLink}";
+var egoURI = "${egoURI}";
+var egoCoInvestigationDataFeederURL = "${egoCoInvestigationDataFeederURL}";
+var egoCoInvestigatorsListDataFileURL = "${egoCoInvestigatorsListDataFileURL}";
+var contextPath = "${urls.base}";
+
+var domainParam = "http://vivo-vis-bkoniden.slis.indiana.edu/vivo1/visualizationData";
+
+// -->
+</script>
+
+<script type="text/javascript" src="${coInvestigatorPersonLevelJavaScript}"></script>
+
+<#assign coInvestigatorStyle = "${urls.base}/css/visualization/personlevel/coinvestigator_style.css" />
+<#assign pageStyle = "${urls.base}/css/visualization/personlevel/page.css" />
+<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
+
+<link href="${coInvestigatorStyle}" rel="stylesheet" type="text/css" />
+<link href="${pageStyle}" rel="stylesheet" type="text/css" />
+<link rel="stylesheet" type="text/css" href="${vizStyle}" />
+
+<#assign loadingImageLink = "${urls.images}/visualization/ajax-loader.gif">
+
+<#assign egoVivoProfileURL = "/individual?uri=${egoURI}" />
+
+<script language="JavaScript" type="text/javascript">
+
+$(document).ready(function(){
+		
+	<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
+		$("#coinve_table_container").empty().html('<img id="loadingData" width="auto" src="${loadingImageLink}" />');
+	</#if>
+		    	
+	    
+	processProfileInformation("ego_label", 
+							  "ego_moniker",
+							  "ego_profile_image",
+							  jQuery.parseJSON(getWellFormedURLs("${egoURIParam}", "profile_info")));
+	
+	<#if (numOfCoInvestigations?? && numOfCoInvestigations <= 0) || (numOfInvestigators?? && numOfInvestigators <= 0) >  
+			if ($('#ego_label').text().length > 0) {
+				setProfileName('no_coinvestigations_person', $('#ego_label').text());
+			}
+	</#if>
+					
+});
+</script>
+
+
+<div id="body">
+	<div id="ego_profile">
+			
+		<#-- Label -->
+			<h2 style="width:20%"><span id="ego_label" class="investigator_name"></span></h2>
+	
+		<#-- Moniker-->
+			<em id="ego_moniker" class="moniker"></em>
+		
+		<div class = "toggle_visualization">
+			<div style="float:left;margin-top: 5%;margin-right: 10px; height:100%;"><img src="${coAuthorIcon}"/></div>
+    		<div><h3>Co-Author Network <br/><a class="view-all-style" href="${coauthorshipURL}">View <span class= "pictos-arrow-10">4</span></a></h3></div>
+		</div>
+		
+		<div style=" width: 20%; margin-top:25px;"><span class="pictos-arrow-14">4</span><a href="${egoVivoProfileURL}" style="color:#171717;text-decoration:none;">Back to Profile</a></div>	
+		
+	
+		<div style="clear:both;"></div>
+	
+			<#if (numOfInvestigators?? && numOfInvestigators > 0) >
+			
+				<div class="sub_headings"><h2 >Co-Investigator Network </h2></div>
+				
+				<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) > 
+					   	<div class = "fileDownloadPlaceHolder"><a href="${egoCoInvestigationNetworkDataFileURL}">(GraphML File)</a></div>
+				<#else>
+
+				        <#if numOfInvestigators?? && numOfInvestigators <= 0 >
+				        	<#assign investigatorsText = "multi-investigator" />
+				        </#if>
+				        
+			        	<span id="no_coinvestigations">Currently there are no ${investigatorsText!} grants for 
+					    	<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a> 
+					    	in the VIVO database.
+				    	</span>				        
+				</#if>
+			
+			<#else>
+			
+				<span id="no_coinvestigations">Currently there are no grants for 
+					<a href="${egoVivoProfileURL}"><span id="no_coinvestigations_person" class="investigator_name">this investigator</span></a> in the 
+					VIVO database.
+				</span>
+			
+			</#if>
+			
+	</div>		
+
+
+
+	<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) || (numOfInvestigators?? && numOfInvestigators > 0) >
+	
+		<div id="bodyPannel">
+			<div id="visPanel" style="float: right; width: 600px;">
+				<script language="JavaScript" type="text/javascript">
+					<!--
+					renderCoInvestigationVisualization();
+					//-->
+				</script>
+			</div>
+			<div id="dataPanel">
+				<h4 id ="profileTitle"> <b>Profile</b></h4>	
+				<div id="profileImage" class="thumbnail"></div>
+			
+				<div><h2><span id="investigatorName" class="neutral_investigator_name">&nbsp;</span></h2></div>
+				
+				<div class="italicize"><span id="profileMoniker" class="investigator_moniker"></span></div>
+				<div><a href="#" id="profileUrl">VIVO profile</a> | <a href="#" id="coInvestigationVisUrl">Co-investigator network</a></div> 
+				<br />
+				<div class="investigator_stats" id="num_works"><span class="numbers" style="width: 40px;" id="works"></span>&nbsp;&nbsp;
+				<span class="investigator_stats_text">Grant(s)</span></div>
+				<div class="investigator_stats" id="num_investigators"><span class="numbers" style="width: 40px;" id="coInvestigators"></span>
+				&nbsp;&nbsp;<span class="investigator_stats_text">Co-investigator(s)</span></div>
+				
+				<div class="investigator_stats" id="fGrant" style="visibility:hidden">
+					<span class="numbers" style="width:40px;" id="firstGrant"></span>&nbsp;&nbsp;<span>First Grant</span></div>
+				<div class="investigator_stats" id="lGrant" style="visibility:hidden"><span class="numbers" style="width:40px;" id="lastGrant"></span>
+				&nbsp;&nbsp;<span>Last Grant</span></div>
+				<div id="incomplete-data">Note: This information is based solely on grants which have been loaded into the VIVO system. 
+				This may only be a small sample of the person's total work. </div>
+			</div>
+		</div>
+	</#if>
+
+
+	<#-- Sparkline -->
+	<div style="width: 67%; height: 175px; margin-left: 33%;">
+		<#assign sparklineVO = egoGrantSparklineVO />
+		<#include "personGrantSparklineContent.ftl">
+
+		<#assign sparklineVO = uniqueCoInvestigatorsSparklineVO />
+		<#include "coInvestigationSparklineContent.ftl">
+	</div>	
+	
+	<#if (numOfInvestigators?? && numOfInvestigators > 0) >
+
+		<div class="vis_stats">
+		
+		<div class="sub_headings" id="table_heading"><h3>Tables</h3></div>
+		
+			<div class="vis-tables">
+
+				<p id="grants_table_container" class="datatable">
+
+				<#assign tableID = "grant_data_table" />
+				<#assign tableCaption = "Grants per year " />
+				<#assign tableActivityColumnName = "Grants" />
+				<#assign tableContent = egoGrantSparklineVO.yearToActivityCount />
+				<#assign fileDownloadLink = egoGrantSparklineVO.downloadDataLink />
+				
+				<#include "yearToActivityCountTable.ftl">
+
+				</p>
+				
+			</div>
+			
+			<#if (numOfCoInvestigations?? && numOfCoInvestigations > 0) >
+		
+				<div class="vis-tables">
+				
+				<p id="coinve_table_container" class="datatable"></p>
+				</div>
+			
+			</#if>
+			
+			<div style="clear:both"></div>
+		
+		</div>
+		
+	</#if>
+	
+</div>
--- a/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl
+++ b/productMods/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl
@ -12,7 +12,7 @@
    <#assign sparklineContainerID = visContainerID + "_spark"> 
 </#if>

-<div class="staticPageBackground">
+<div class="staticPageBackground" style="width: 50%; float: left;">
    <div id="${visContainerID}">
        <script type="text/javascript">
    
@ -52,8 +52,8 @@
                <#-- Create the vis object and draw it in the div pertaining to sparkline. -->
                var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
                sparkline.draw(sparklineDataView, {
-                        width: 65,
-                        height: 30,
+                        width: 150,
+                        height: 60,
                        showAxisLines: false,
                        showValueLabels: false,
                        labelPosition: 'none'
@ -69,11 +69,9 @@
                        renderedShortSparks += data.getValue(value, 1);
                    });
         
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> publication(s) <br/></span>");
            
-                    var sparksText = ' publication(s) within the last 10 years <span class="incomplete-data-holder" title="This information'
-                                    + ' is based solely on publications which have been loaded into the VIVO system. This may only be a small' 
-                                    + ' sample of the person\'s total work.">incomplete list</span>';
+                    var sparksText = '  within the last 10 years';
            
                 <#else>
            
@ -82,14 +80,14 @@
                     * any year associated with it. Hence.
                     * */
                    var renderedSparks = ${sparklineVO.renderedSparks};      
-                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearPublications}));
+                    $('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearPublications})).css("font-weight", "bold").attr("class", "grey").append("<span style='color: #2485AE;'> publication(s) <br/></span>");
            
-                    var sparksText = ' publication(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
+                    var sparksText = '  from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}' 
                                        + ' to ${sparklineVO.latestRenderedPublicationYear?c}</span> ' 
                                        + ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
                 </#if>
         
-                 $('#${sparklineContainerID} td.sparkline_text').html(sparksText);
+                 $('#${sparklineContainerID} td.sparkline_text').html(sparksText).css("font-weight", "bold");
         
            }
    
@ -128,22 +126,24 @@
                    var row = $('<tr>');
                    sparklineImgTD = $('<td>');
                    sparklineImgTD.attr('id', '${sparklineContainerID}_img');
-                    sparklineImgTD.attr('width', '65');
-                    sparklineImgTD.attr('align', 'right');
+                    sparklineImgTD.attr('width', '150');
                    sparklineImgTD.attr('class', 'sparkline_style');
            
                    row.append(sparklineImgTD);
-            
+            		var row2 = $('<tr>');
                    var sparklineNumberTD = $('<td>');
-                    sparklineNumberTD.attr('width', '30');
-                    sparklineNumberTD.attr('align', 'right');
                    sparklineNumberTD.attr('class', 'sparkline_number');
-                    row.append(sparklineNumberTD);
+					sparklineNumberTD.css('text-align', 'left');
+                    row2.append(sparklineNumberTD);
+                    var row3 = $('<tr>');
+                    
                    var sparklineTextTD = $('<td>');
-                    sparklineTextTD.attr('width', '450');
                    sparklineTextTD.attr('class', 'sparkline_text');
-                    row.append(sparklineTextTD);
+					sparklineTextTD.css('text-align', 'left');
+                    row3.append(sparklineTextTD);
                    table.append(row);
+                    table.append(row2);
+                    table.append(row3);
                    table.prependTo('#${sparklineContainerID}');
            
                }
@ -156,7 +156,8 @@

    <#if sparklineVO.shortVisMode>
        <#--<span class="vis_link">-->
-            <p><a class="all-vivo-publications" href="${sparklineVO.fullTimelineNetworkLink}">View all VIVO publications and corresponding co-author network.</a></p>
+        	<h3>Co-Author Network
+            <a class="view-all-style" href="${sparklineVO.fullTimelineNetworkLink}">View <span class= "pictos-arrow-10">4</span></a> </h3>
        <#--</span>-->
    <#else>
        <!-- For Full Sparkline - Print the Table of Publication Counts per Year -->
--- a/productMods/templates/visualization/entity_comparison.jsp
+++ b/productMods/templates/visualization/entity_comparison.jsp
@ -8,56 +8,70 @@
 	<c:out value="${portalBean.themeDir}" />
 </c:set>
 <c:set var='jsonContent' value='${requestScope.JsonContent}' />
+
+<c:url var="TemporalGraphDownloadFile" value="/visualization">
+	<c:param name="vis" value="entity_comparison" />
+	<c:param name="render_mode" value="data" />
+	<c:param name="uri" value="${requestScope.OrganizationURI}" />
+</c:url>
+
+
 <div id="body">
-	<div id="navcontainer">
-		<ul id="navlist">
-			<li><a href="#">Temporal</a></li>
-			<li><a href="#">Geospatial</a></li>
-			<li><a href="#">Scimap</a></li>
-			<li><a href="#">Networks</a></li>
-		</ul>
-	</div>
-		<h1>Temporal Graph Visualization<span id="entitylevelheading"><i> School Level</i></span></h1>
-	<div id="leftblock">
-		<div id="leftUpper">
-			<h2 style="background-color:#3D454E; padding-left: 3px; color: white; margin-top: 0px; margin-bottom: 20px; padding-bottom:5px;">How do you want to compare?</h2>
-			<div style="text-align: center;">
-			<p style="margin-right: 10px; margin-top: 6px; font-size: 1.2em;">Select </p>
-			<select class="comparisonValues" style="margin-bottom: 20px;">
-				<option value="Publications" selected="selected">Publications</option>
-				<option value="Grants">Grants</option>
-				<option value="People" disabled="disabled">People</option>
-				<option value="Item4" disabled="disabled">Item4</option>
-				<option value="Item5" disabled="disabled">Item5</option>
-			</select>
+		<h2 style="width: 36%; padding-left:50px;">Temporal Graph Visualization<span id="entitylevelheading"><i> School Level</i></span></h2>
+		<div id="leftblock">
+			<div id="leftUpper">
+				<h3>How do you want to compare?</h3>
+				
+				<div style="text-align: left;">
+				
+				<select class="comparisonValues" style="margin-bottom: 20px;">
+					<option value="Publications" selected="selected">by Publications</option>
+					<option value="Grants">by Grants</option>
+					<option value="People" disabled="disabled">by People</option>
+					<option value="Item4" disabled="disabled">by Item4</option>
+					<option value="Item5" disabled="disabled">by Item5</option>
+				</select>
+				
+				</div>
 			</div>
-		</div>
-		<br/>	
-		<div id="leftLower">
-			<h2 style="background-color:#3D454E; color: white; padding-left: 3px; margin-top: 0px; margin-bottom: 20px; padding-bottom:5px;">Choose</h2>
-			<div id="paginatedTable">
+			
+			<br/>	
+			
+			<div id="leftLower">
+				<h3>Who do you want to compare?</h3>
+				<div id="paginatedTable">
+				</div>
 			</div>
+			<div id = "stopwordsdiv">
+				* The entity types core:Person, foaf:Organization have been excluded as they are too general.
+			</div>	
 		</div>
-		<div id = "stopwordsdiv">
-			* The entity types core:Person, foaf:Organization have been excluded as they are too general.
-		</div>	
-	</div>
 		<div id="rightblock">
+		
+			<h4 style="padding-left:50px;">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span></h4>
 			<div id="graphContainer" style="width: 450px; height: 250px;"></div>
 			<div id="yaxislabel"></div>
+			
 			<div id="bottom" style="width: 450px; height: 350px;">
 				<div id="xaxislabel">Year</div>
-				<h3><span id="comparisonParameter"></span></h3>
+		
+				<div id="bottomButtons">
+					<button id="clear" class="green-button" type ="button">Remove All</button>
+					<button id="csv" class="green-button" class="green-button" type ="button">Save as CSV</button>
+					<button id="image" class="green-button" type="button" onClick="window.print()"> Save as Image</button>				
+				</div><br/>
+		
+				<h4><span id="comparisonParameter"></span></h4>
+		
 			<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum <span
 			id="total">10</span> <span id="entityleveltext"> schools</span> to compare.</p>
+		
 			</div>
+		
 		</div>		
-		<div id="bottomButtons">
-			<button id="clear" class = "metallic" type ="button">Remove All</button>
-			<button id="csv" class = "metallic" type ="button">Save as CSV</button>
-			<button id="image" class= "metallic" type="button" onClick="window.print()"> Save as Image</button>				
-		</div>
 </div>
+
+
 <script type="text/javascript">
 	
 	$(document).ready(function() {
@ -83,6 +97,7 @@
            var selectedValue = $("select.comparisonValues option:selected").val();
 			$("#comparisonParameter").text("Total Number of " + selectedValue);
 			$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
+			$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
        });

 		//click event handler for clear button
@ -90,6 +105,10 @@
 			clearRenderedObjects();
 		});

+		//click event handler for download file
+		$("button#csv").click(function(){
+			  alert("${TemporalGraphDownloadFile}");
+		});		
 		
 		$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
 			
--- a/productMods/templates/visualization/person_level.jsp
+++ b/productMods/templates/visualization/person_level.jsp
@ -195,12 +195,12 @@ $(document).ready(function(){
 			</c:if>
 			
 			<%-- Sparkline --%>
-			<div style="width: 60%; height: 100px; float:right;">
-				<div id="${egoPubSparklineContainerID}" style="float: left; width: 40%">
+			<div style="margin-left: 33%; width:67%;">
+				<div id="${egoPubSparklineContainerID}" style="float:left; margin-right:200px;">
 					${egoPubSparkline.sparklineContent}
 				</div>
 		
-				<div id="${uniqueCoauthorsSparklineVisContainerID}" style="float: right;width: 40%">
+				<div id="${uniqueCoauthorsSparklineVisContainerID}">
 					${uniqueCoauthorsSparkline.sparklineContent}
 				</div>
 			</div>	
@ -250,7 +250,7 @@ $(document).ready(function(){
 					
 				<div class = "toggle_visualization" style="text-align:center; clear: left;">
 					<h2>Co-Author Network</h2>
-					<a class="view-all-style" href='<c:out value="${coprincipalinvestigatorURL}"/>'>View</a>
+					<a class="view-all-style" href='<c:out value="${coauthorshipURL}"/>'>View</a>
 					<span class="pictos-arrow-10">4</span>
 				</div>
 				
@ -313,13 +313,13 @@ $(document).ready(function(){
 			</c:if>	
 			
 			<%-- Sparkline --%>
-			<div style="width: 60%; height: 100px; float:right;">
+			<div style="margin-left: 33%; width:67%;">
 			
-				<div id="${egoPubSparklineContainerID}" style="float: left;width: 40%">
+				<div id="${egoPubSparklineContainerID}" style="float:left; margin-right:200px;">
 					${egoGrantSparkline.sparklineContent}
 				</div>			
 				
-				<div id="${uniqueCoauthorsSparklineVisContainerID}" style="float: right;width: 40%">
+				<div id="${uniqueCoauthorsSparklineVisContainerID}">
 					${uniqueCopisSparkline.sparklineContent}
 				</div>	
 			
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/coauthorship/CoAuthorshipVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/coauthorship/CoAuthorshipVisCodeGenerator.java
@ -394,12 +394,12 @@ public class CoAuthorshipVisCodeGenerator {
 		visualizationCode.append("$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
 									+ " td.sparkline_number')" 
 									+ ".text('" + (renderedFullSparks 
-									+ unknownYearCoauthors) + "');");
+									+ unknownYearCoauthors) + "').css('font-weight', 'bold');");
 		
 		visualizationCode.append("var allSparksText = ''" 
-									+ "+ ' <h3>co-author(s)</h3> from '" 
+									+ "+ ' <h3>co-author(s)</h3> '" 
 									+ "+ ' <span class=\"sparkline_range\">" 
-									+ "" + minPubYearConsidered + " to " + currentYear + "" 
+									+ "from " + minPubYearConsidered + " to " + currentYear + "" 
 									+ "</span> '" 
 									+ "+ ' " + csvDownloadURLHref + " ';" 
 									+ "$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
@ -415,26 +415,31 @@ public class CoAuthorshipVisCodeGenerator {
 	private String generateVisualizationActivator(String sparklineID, String visContainerID) {
 		
 		String sparklineTableWrapper = "\n" 
-				+ "var table = $('<table>');" 
-				+ "table.attr('class', 'sparkline_wrapper_table');" 
-				+ "var row = $('<tr>');" 
-				+ "sparklineImgTD = $('<td>');" 
-				+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
-				+ "sparklineImgTD.attr('width', '65');" 
-				+ "sparklineImgTD.attr('align', 'right');" 
-				+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
-				+ "row.append(sparklineImgTD);" 
-				+ "var sparklineNumberTD = $('<td>');" 
-				+ "sparklineNumberTD.attr('width', '30');" 
-				+ "sparklineNumberTD.attr('align', 'right');" 
-				+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
-				+ "row.append(sparklineNumberTD);" 
-				+ "var sparklineTextTD = $('<td>');" 
-				+ "sparklineTextTD.attr('width', '350');" 
-				+ "sparklineTextTD.attr('class', 'sparkline_text');" 
-				+ "row.append(sparklineTextTD);" 
-				+ "table.append(row);" 
-				+ "table.prependTo('#" + sparklineID + "');\n";
+			+ "var table = $('<table>');" 
+			+ "table.attr('class', 'sparkline_wrapper_table');" 
+			+ "var row = $('<tr>');" 
+			+ "sparklineImgTD = $('<td>');" 
+			+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
+			+ "sparklineImgTD.attr('width', '65');" 
+//			+ "sparklineImgTD.attr('align', 'right');" 
+			+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
+			+ "row.append(sparklineImgTD);" 
+			+  "var row2 = $('<tr>');"
+			+ "var sparklineNumberTD = $('<td>');" 
+//			+ "sparklineNumberTD.attr('width', '30');" 
+//			+ "sparklineNumberTD.attr('align', 'right');" 
+			+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
+			+ "sparklineNumberTD.css('text-align', 'center');"
+			+ "row2.append(sparklineNumberTD);"
+			+  "var row3 = $('<tr>');"
+			+ "var sparklineTextTD = $('<td>');" 
+//			+ "sparklineTextTD.attr('width', '450');" 
+			+ "sparklineTextTD.attr('class', 'sparkline_text');"
+			+ "row3.append(sparklineTextTD);" 
+			+ "table.append(row);"
+			+ "table.append(row2);"
+			+ "table.append(row3);"				
+			+ "table.prependTo('#" + sparklineID + "');\n";
 		
 		return "$(document).ready(function() {" 
 				+ "var sparklineImgTD; " 
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/coprincipalinvestigator/CoPIVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/coprincipalinvestigator/CoPIVisCodeGenerator.java
@ -388,13 +388,13 @@ public class CoPIVisCodeGenerator {
 		
 		visualizationCode.append("$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
 									+ " td.sparkline_number').text('" + (renderedFullSparks 
-									+ unknownYearGrants) + "');");
+									+ unknownYearGrants) + "').css('font-weight', 'bold');");
 		
 		visualizationCode.append("var allSparksText = ''" 
 									+ "+ ' <h3>Co-Principal Investigator(s)</h3> '" 
-									+ "+ ' from " 
+									+ "+ '" 
 									+ "<span class=\"sparkline_range\">" 
-									+ "" + minGrantYearConsidered + " to " + currentYear + "" 
+									+ " from  " + minGrantYearConsidered + " to " + currentYear + "" 
 									+ "</span> '" 
 									+ "+ ' " + csvDownloadURLHref + " ';" 
 									+ "$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
@ -416,19 +416,24 @@ public class CoPIVisCodeGenerator {
 				+ "sparklineImgTD = $('<td>');" 
 				+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
 				+ "sparklineImgTD.attr('width', '65');" 
-				+ "sparklineImgTD.attr('align', 'right');" 
+//				+ "sparklineImgTD.attr('align', 'right');" 
 				+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
 				+ "row.append(sparklineImgTD);" 
+				+  "var row2 = $('<tr>');"
 				+ "var sparklineNumberTD = $('<td>');" 
-				+ "sparklineNumberTD.attr('width', '30');" 
-				+ "sparklineNumberTD.attr('align', 'right');" 
-				+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
-				+ "row.append(sparklineNumberTD);" 
+//				+ "sparklineNumberTD.attr('width', '30');" 
+//				+ "sparklineNumberTD.attr('align', 'right');" 
+				+ "sparklineNumberTD.attr('class', 'sparkline_number');"
+				+ "sparklineNumberTD.css('text-align', 'center');"
+				+ "row2.append(sparklineNumberTD);"
+				+ "var row3 = $('<tr>');"
 				+ "var sparklineTextTD = $('<td>');" 
-				+ "sparklineTextTD.attr('width', '450');" 
+//				+ "sparklineTextTD.attr('width', '450');" 
 				+ "sparklineTextTD.attr('class', 'sparkline_text');" 
-				+ "row.append(sparklineTextTD);" 
+				+ "row3.append(sparklineTextTD);" 
 				+ "table.append(row);" 
+				+ "table.append(row2);"
+				+ "table.append(row3);"				
 				+ "table.prependTo('#" + sparklineID + "');\n";
 		
 		return "$(document).ready(function() {" 
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/entitycomparison/EntityPublicationCountRequestHandler.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/entitycomparison/EntityPublicationCountRequestHandler.java
@ -66,11 +66,11 @@ public class EntityPublicationCountRequestHandler implements
 		try {
 			Entity entity = queryManager.getQueryResult();

-			if (ENTITY_VIS_MODE.equals("DEPARTMENT")) {
+			if (ENTITY_VIS_MODE.equalsIgnoreCase("DEPARTMENT")) {
 				
 				SUB_ENTITY_VIS_MODE = "PERSON";

-			}else if (ENTITY_VIS_MODE.equals("SCHOOL")) {
+			}else if (ENTITY_VIS_MODE.equalsIgnoreCase("SCHOOL")) {
 				
 				SUB_ENTITY_VIS_MODE = "DEPARTMENT";

@ -95,7 +95,7 @@ public class EntityPublicationCountRequestHandler implements
 					.equalsIgnoreCase(renderMode)) {

 				prepareStandaloneResponse(request, response, vitroRequest,
-						entity, subOrganizationTypesResult, log);
+						entity,entityURI, subOrganizationTypesResult, log);
 				requestDispatcher = request
 						.getRequestDispatcher(Controllers.BASIC_JSP);
 			}
@ -173,11 +173,12 @@ public class EntityPublicationCountRequestHandler implements
 	 * @param response
 	 * @param vreq
 	 * @param entity
+	 * @param entityURI 
 	 * @param subOrganizationTypesResult 
 	 * @param log 
 	 */
 	private void prepareStandaloneResponse(HttpServletRequest request,
-			HttpServletResponse response, VitroRequest vreq, Entity entity, Map<String, Set<String>> subOrganizationTypesResult, Log log) {
+			HttpServletResponse response, VitroRequest vreq, Entity entity, String entityURI, Map<String, Set<String>> subOrganizationTypesResult, Log log) {

 		Portal portal = vreq.getPortal();
 		String jsonContent = "";
@ -186,7 +187,8 @@ public class EntityPublicationCountRequestHandler implements
 		 * manipulating the response object of the servlet.
 		 */
 		jsonContent = writePublicationsOverTimeJSON(entity.getSubEntities(), subOrganizationTypesResult, log);
-
+		
+		request.setAttribute("OrganizationURI", entityURI);
 		request.setAttribute("JsonContent", jsonContent);

 		request.setAttribute("bodyJsp",
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coauthorship/CoAuthorshipRequestHandler.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coauthorship/CoAuthorshipRequestHandler.java
@ -346,7 +346,7 @@ public class CoAuthorshipRequestHandler implements VisualizationRequestHandler {
        
        //request.setAttribute("scripts", "/templates/visualization/person_level_inject_head.jsp");
        
-        String standaloneTemplate = "/visualization/coauthorship/coAuthorship.ftl";
+        String standaloneTemplate = "coAuthorship.ftl";

        
        body.put("portalBean", portal);
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coprincipalinvestigator/CoPIGrantCountRequestHandler.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coprincipalinvestigator/CoPIGrantCountRequestHandler.java
@ -138,7 +138,7 @@ public class CoPIGrantCountRequestHandler implements VisualizationRequestHandler
 			body.put("numOfCoInvestigations", coPIVO.getEdges().size());
 		}

-		String standaloneTemplate = "/visualization/copi/coInvestigation.ftl";
+		String standaloneTemplate = "coInvestigation.ftl";
 		
        body.put("portalBean", portal);
        body.put("egoURIParam", egoURI);
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coprincipalinvestigator/CoPIVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/coprincipalinvestigator/CoPIVisCodeGenerator.java
@ -51,7 +51,7 @@ public class CoPIVisCodeGenerator {
 	
 	private static final String VISUALIZATION_STYLE_CLASS = "sparkline_style";
 	
-	private static final String DEFAULT_VISCONTAINER_DIV_ID = "unique_copis_vis_container";
+	private static final String DEFAULT_VISCONTAINER_DIV_ID = "unique_coinvestigators_vis_container";
 	
 	private Map<String, Set<CoPINode>> yearToUniqueCoPIs;

@ -157,7 +157,9 @@ public class CoPIVisCodeGenerator {
 		}

 		numOfYearsToBeRendered = currentYear - minGrantYearConsidered + 1;
-
+		
+		sparklineData.setNumOfYearsToBeRendered(numOfYearsToBeRendered);
+		
 		visualizationCode.append("<style type='text/css'>" + "."
 				+ VISUALIZATION_STYLE_CLASS + " table{" + "		margin: 0;"
 				+ "  		padding: 0;" + "  		width: auto;"
@ -221,16 +223,16 @@ public class CoPIVisCodeGenerator {
 		sparklineData.setYearToEntityCountDataTable(yearToUniqueInvestigatorsCountDataTable);

 		/*
-		 * Total grants will also consider publications that have no year
+		 * Total grants will also consider grants that have no year
 		 * associated with them. Hence.
 		 */
-		Integer unknownYearCoPIs = 0;
+		Integer unknownYearGrants = 0;
 		if (yearToUniqueCoPIs.get(VOConstants.DEFAULT_GRANT_YEAR) != null) {
-			unknownYearCoPIs = yearToUniqueCoPIs.get(
+			unknownYearGrants = yearToUniqueCoPIs.get(
 					VOConstants.DEFAULT_GRANT_YEAR).size();
 		}
 		
-		sparklineData.setUnknownYearPublications(unknownYearCoPIs);
+		sparklineData.setUnknownYearGrants(unknownYearGrants);

 		String sparklineDisplayOptions = "{width: 65, height: 30, showAxisLines: false, "
 				+ "showValueLabels: false, labelPosition: 'none'}";
@ -273,14 +275,14 @@ public class CoPIVisCodeGenerator {
 			
 			generateShortSparklineVisualizationContent(currentYear,
 					shortSparkMinYear, visContainerID, visualizationCode,
-					unknownYearCoPIs, sparklineDisplayOptions);
+					unknownYearGrants, sparklineDisplayOptions);
 		} else {
 			
 			sparklineData.setShortVisMode(false);
 			
 			generateFullSparklineVisualizationContent(currentYear,
 					minGrantYearConsidered, visContainerID, visualizationCode,
-					unknownYearCoPIs, renderedFullSparks,
+					unknownYearGrants, renderedFullSparks,
 					sparklineDisplayOptions);
 		}

@ -511,6 +513,13 @@ public class CoPIVisCodeGenerator {
 		
 		sparklineData.setTable(tableCode);
 		
+		Map<String, Integer> yearToUniqueCoPIsCount = new HashMap<String, Integer>();
+		for (Map.Entry<String, Set<CoPINode>> currentYear : yearToUniqueCoPIs.entrySet()) {
+			yearToUniqueCoPIsCount.put(currentYear.getKey(), currentYear.getValue().size());
+		}
+		
+		sparklineData.setYearToActivityCount(yearToUniqueCoPIsCount);
+		
 		return divContextCode.toString();
 	}
 	
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/persongrantcount/PersonGrantCountVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/persongrantcount/PersonGrantCountVisCodeGenerator.java
@ -177,7 +177,7 @@ public class PersonGrantCountVisCodeGenerator {
 				+ "function drawGrantCountVisualization(providedSparklineImgTD) "
 				+ "{\n" + "var data = new google.visualization.DataTable();\n"
 				+ "data.addColumn('string', 'Year');\n"
-				+ "data.addColumn('number', 'Publications');\n"
+				+ "data.addColumn('number', 'Grants');\n"
 				+ "data.addRows(" + numOfYearsToBeRendered + ");\n");

 		int grantCounter = 0;
@ -227,7 +227,7 @@ public class PersonGrantCountVisCodeGenerator {
 		sparklineData.setRenderedSparks(renderedFullSparks);

 		/*
-		 * Total grants will also consider publications that have no year
+		 * Total grants will also consider grants that have no year
 		 * associated with it. Hence.
 		 */
 		Integer unknownYearGrants = 0;
@ -544,6 +544,7 @@ public class PersonGrantCountVisCodeGenerator {
 		String fullTimelineLink;
 		if (yearToGrantCount.size() > 0) {
 			
+			// add another parameter for vis_mode
 			ParamMap fullTimelineNetworkURLParams = new ParamMap(VisualizationFrameworkConstants.INDIVIDUAL_URI_KEY,
 					 individualURI,
 					 VisualizationFrameworkConstants.VIS_TYPE_KEY,
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/personlevel/PersonLevelRequestHandler.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/personlevel/PersonLevelRequestHandler.java
@ -254,13 +254,13 @@ public class PersonLevelRequestHandler implements VisualizationRequestHandler {
 		}
 		
 		if (coPIVO.getEdges() != null && coPIVO.getEdges().size() > 0) {
-			body.put("numOfCoPIs", coPIVO.getEdges().size());
+			body.put("numOfCoInvestigations", coPIVO.getEdges().size());
 		}
 		
        String	standaloneTemplate = "coPIPersonLevel.ftl";
 		
 		body.put("egoGrantSparklineVO", egoGrantSparklineVO);
-		body.put("uniqueCopisSparklineVO", uniqueCopisSparklineVO);        	
+		body.put("uniqueCoInvestigatorsSparklineVO", uniqueCopisSparklineVO);        	

 		body.put("portalBean", portal);
 		body.put("title",  title + "Person Level Visualization");
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/utilities/UtilitiesRequestHandler.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/freemarker/utilities/UtilitiesRequestHandler.java
@ -122,6 +122,23 @@ public class UtilitiesRequestHandler implements VisualizationRequestHandler {
 			return UrlBuilder.getUrl(VisualizationFrameworkConstants.FREEMARKERIZED_VISUALIZATION_URL_PREFIX,
 							  coAuthorProfileURLParams);
 			
+		} else if (VisualizationFrameworkConstants.COPI_UTILS_VIS_MODE
+						.equalsIgnoreCase(visMode)) {
+			
+	    	/*
+	    	 * By default we will be generating profile url else some specific url like 
+	    	 * coPI vis url for that individual.
+	    	 * */
+			ParamMap coInvestigatorProfileURLParams = new ParamMap(VisualizationFrameworkConstants.INDIVIDUAL_URI_KEY,
+															 individualURI,
+															 VisualizationFrameworkConstants.VIS_TYPE_KEY,
+															 VisualizationFrameworkConstants.PERSON_LEVEL_VIS,
+															 VisualizationFrameworkConstants.VIS_MODE_KEY,
+															 VisualizationFrameworkConstants.COPI_VIS_MODE);
+			
+			return UrlBuilder.getUrl(VisualizationFrameworkConstants.FREEMARKERIZED_VISUALIZATION_URL_PREFIX,
+							  coInvestigatorProfileURLParams);
+			
 		} else if (VisualizationFrameworkConstants.PERSON_LEVEL_UTILS_VIS_MODE
 						.equalsIgnoreCase(visMode)) {
 	    	/*
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/persongrantcount/PersonGrantCountVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/persongrantcount/PersonGrantCountVisCodeGenerator.java
@ -387,14 +387,14 @@ public class PersonGrantCountVisCodeGenerator {
 									+ sparklineDisplayOptions + ");\n");
 		
 		visualizationCode.append("$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
-									+ " td.sparkline_number').text('" + (renderedFullSparks 
-									+ unknownYearGrants) + "');");
+									+ " td.sparkline_number').text('"  + (renderedFullSparks 
+									+ unknownYearGrants) +  "').css('font-weight', 'bold');");
 		
 		visualizationCode.append("var allSparksText = ''" 
 									+ "+ ' <h3>grant(s)</h3> '" 
-									+ "+ ' from " 
+									+ "+ ' " 
 									+ "<span class=\"sparkline_range\">" 
-									+ "" + minGrantYearConsidered + " to " + currentYear + "" 
+									+ "from " + minGrantYearConsidered + " to " + currentYear + "" 
 									+ "</span> '" 
 									+ "+ ' " + csvDownloadURLHref + " ';" 
 									+ "$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
@ -416,19 +416,24 @@ public class PersonGrantCountVisCodeGenerator {
 				+ "sparklineImgTD = $('<td>');" 
 				+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
 				+ "sparklineImgTD.attr('width', '65');" 
-				+ "sparklineImgTD.attr('align', 'right');" 
+//				+ "sparklineImgTD.attr('align', 'right');" 
 				+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
 				+ "row.append(sparklineImgTD);" 
+				+  "var row2 = $('<tr>');"
 				+ "var sparklineNumberTD = $('<td>');" 
-				+ "sparklineNumberTD.attr('width', '30');" 
-				+ "sparklineNumberTD.attr('align', 'right');" 
+//				+ "sparklineNumberTD.attr('width', '30');" 
+//				+ "sparklineNumberTD.attr('align', 'right');" 
 				+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
-				+ "row.append(sparklineNumberTD);" 
+				+ "sparklineNumberTD.css('text-align', 'center');"
+				+ "row2.append(sparklineNumberTD);"
+				+  "var row3 = $('<tr>');"
 				+ "var sparklineTextTD = $('<td>');" 
-				+ "sparklineTextTD.attr('width', '450');" 
-				+ "sparklineTextTD.attr('class', 'sparkline_text');" 
-				+ "row.append(sparklineTextTD);" 
-				+ "table.append(row);" 
+//				+ "sparklineTextTD.attr('width', '450');" 
+				+ "sparklineTextTD.attr('class', 'sparkline_text');"
+				+ "row3.append(sparklineTextTD);" 
+				+ "table.append(row);"
+				+ "table.append(row2);"
+				+ "table.append(row3);"				
 				+ "table.prependTo('#" + sparklineID + "');\n";
 		
 		return "$(document).ready(function() {" 
--- a/src/edu/cornell/mannlib/vitro/webapp/visualization/personpubcount/PersonPublicationCountVisCodeGenerator.java
+++ b/src/edu/cornell/mannlib/vitro/webapp/visualization/personpubcount/PersonPublicationCountVisCodeGenerator.java
@ -407,13 +407,13 @@ public class PersonPublicationCountVisCodeGenerator {
 		
 		visualizationCode.append("$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
 									+ " td.sparkline_number').text('" + (renderedFullSparks 
-									+ unknownYearPublications) + "');");
+									+ unknownYearPublications) + "').css('font-weight', 'bold');");
 		
 		visualizationCode.append("var allSparksText = ''" 
 									+ "+ ' <h3>publication(s)</h3> '" 
-									+ "+ ' from " 
+									+ "+ ' " 
 									+ "<span class=\"sparkline_range\">" 
-									+ "" + minPubYearConsidered + " to " + currentYear + "" 
+									+ "from " + minPubYearConsidered + " to " + currentYear + "" 
 									+ "</span> '" 
 									+ "+ ' " + csvDownloadURLHref + " ';" 
 									+ "$('#" + VIS_DIV_NAMES.get("FULL_SPARK") 
@ -429,26 +429,31 @@ public class PersonPublicationCountVisCodeGenerator {
 	private String generateVisualizationActivator(String sparklineID, String visContainerID) {
 		
 		String sparklineTableWrapper = "\n" 
-				+ "var table = $('<table>');" 
-				+ "table.attr('class', 'sparkline_wrapper_table');" 
-				+ "var row = $('<tr>');" 
-				+ "sparklineImgTD = $('<td>');" 
-				+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
-				+ "sparklineImgTD.attr('width', '65');" 
-				+ "sparklineImgTD.attr('align', 'right');" 
-				+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
-				+ "row.append(sparklineImgTD);" 
-				+ "var sparklineNumberTD = $('<td>');" 
-				+ "sparklineNumberTD.attr('width', '30');" 
-				+ "sparklineNumberTD.attr('align', 'right');" 
-				+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
-				+ "row.append(sparklineNumberTD);" 
-				+ "var sparklineTextTD = $('<td>');" 
-				+ "sparklineTextTD.attr('width', '450');" 
-				+ "sparklineTextTD.attr('class', 'sparkline_text');" 
-				+ "row.append(sparklineTextTD);" 
-				+ "table.append(row);" 
-				+ "table.prependTo('#" + sparklineID + "');\n";
+			+ "var table = $('<table>');" 
+			+ "table.attr('class', 'sparkline_wrapper_table');" 
+			+ "var row = $('<tr>');" 
+			+ "sparklineImgTD = $('<td>');" 
+			+ "sparklineImgTD.attr('id', '" + sparklineID + "_img');" 
+			+ "sparklineImgTD.attr('width', '65');" 
+//			+ "sparklineImgTD.attr('align', 'right');" 
+			+ "sparklineImgTD.attr('class', '" + VISUALIZATION_STYLE_CLASS + "');" 
+			+ "row.append(sparklineImgTD);" 
+			+  "var row2 = $('<tr>');"
+			+ "var sparklineNumberTD = $('<td>');" 
+//			+ "sparklineNumberTD.attr('width', '30');" 
+//			+ "sparklineNumberTD.attr('align', 'right');" 
+			+ "sparklineNumberTD.attr('class', 'sparkline_number');" 
+			+ "sparklineNumberTD.css('text-align', 'center');"
+			+ "row2.append(sparklineNumberTD);"
+			+  "var row3 = $('<tr>');"
+			+ "var sparklineTextTD = $('<td>');" 
+//			+ "sparklineTextTD.attr('width', '450');" 
+			+ "sparklineTextTD.attr('class', 'sparkline_text');"
+			+ "row3.append(sparklineTextTD);" 
+			+ "table.append(row);"
+			+ "table.append(row2);"
+			+ "table.append(row3);"				
+			+ "table.prependTo('#" + sparklineID + "');\n";
 		
 		return "$(document).ready(function() {" 
 				+ "var sparklineImgTD; " 
--- a/themes/wilma/css/visualization/entityComparison/layout.css
+++ b/themes/wilma/css/visualization/entityComparison/layout.css
@ -117,6 +117,7 @@ form{
 	float:right;
 	margin-right:5%;
 	width:54%;
+	margin-top: -43px;
 }

 #counter,#total {
@ -145,54 +146,52 @@ li{
 	background-color: #ECFFB3 !important;
 }

+/*
 .metallic{
 	background-color: #212D34;
 	color: white;
-	margin-left: 20px;
 }
+*/

 #leftUpper{
+/*
 	border: 1px #3D454E solid;
 	border-top: 10px #3D454E solid;
 	background-color: #D9D9D9;
+*/	
+	padding-left: 10px;
 }

 #leftLower{
+/*	
 	border: 1px #3D454E solid;
 	border-top: 10px #3D454E solid;
-}
-
-#navcontainer{
-	background: none repeat scroll 0 0 #3D454E;
-	height: 1%;
-	padding: 8px 22em 8px 20px;
-	position: relative;
-}
-
-#navlist li
-{
-	display: inline;
-	list-style-type: none;
-	padding: 20px;
-	
-}
-
-#navlist li a{
-	color: white;
-	text-decoration: none;
+*/
+	padding-left: 10px;
 }
 		
 #bottomButtons{
-	width: 50%;
+	width: 100%;
 	float:right;
-	margin-right: 5%;
+	margin: 20px 0 20px 0;
+}
+
+button.green-button{
+	width: 31%;
+	margin: 0 1% 0 1%;
+	
 }

 #stopwordsdiv{
 	margin-top: 10px;
+	margin-left: 10px;
 }

 p.displayCounter{
 	padding-bottom: 4px;
 	border-bottom: 1px solid gray;
+}
+
+#comparisonHeader, #entityHeader, #entitylevelheading, #comparisonParameter{
+	color: #2485ae;
 }
--- a/themes/wilma/css/visualization/personlevel/coauthor_style.css
+++ b/themes/wilma/css/visualization/personlevel/coauthor_style.css
@ -77,6 +77,6 @@
 }

 #table_heading{
-	margin-bottom:20px;
+/*	margin-bottom:20px; */
 	width: 80%;	
 }
--- a/themes/wilma/css/visualization/personlevel/page.css
+++ b/themes/wilma/css/visualization/personlevel/page.css
@ -8,15 +8,38 @@ a.no_href_styles {
 	border: 0;
 }

-.vis_stats {
+/*.vis_stats {*/
 	/*width: 760px;*/
-	margin: 0;
+/*	margin: 0;
 	padding-left:10px;
 	padding-top:10px;
 	background: #fff;
 	margin-left: 35%;
 	clear: right;
 }
+*/
+/*.vis-tables {*/
+/*	width: 33%; */
+/*	padding: 10px;
+	margin: 10px;
+	background-color: #FFF;
+	border: 1px solid #ddebf1;
+	float:left;
+	font-size: 0.8em;
+}
+*/
+
+.vis_stats {
+	/*width: 760px;*/
+/*	margin: 0;
+	margin-left: 35%; 
+	padding-left:10px;*/
+	padding-top:10px;
+	background: #fff;
+	clear: right;
+	width:67%;
+	margin-left:33%;
+}

 .vis-tables {
 /*	width: 33%; */
@ -26,8 +49,11 @@ a.no_href_styles {
 	border: 1px solid #ddebf1;
 	float:left;
 	font-size: 0.8em;
+	width: 44%;
+	margin-left: 0px;
 }

+
 p.datatable {
 	font-size: 12px;
 	display: block;
@ -155,3 +181,46 @@ table.sparkline_wrapper_table td, th {
 #coauthorships_table th {
 	vertical-align: top;
 }
+
+.sparkline_range{
+	font-size: 0.9em;
+	font-weight: bold;
+}
+
+.vis-tables table td{
+	padding-right: 10px;
+	width: 50%;
+}
+
+.vis-tables table caption{
+	width: 100%;
+	padding-bottom: 10px;
+	font-weight: bold;
+	font-size: 16px;
+	text-align: left;
+}
+
+.vis-tables table{
+	width: 100%;
+}
+
+.vis-tables table thead{
+	text-align: left;
+}
+
+.vis-tables table thead tr th { 
+	background-color:#eaeaea; 
+	font-size:14px; 
+	padding:5px; 
+	vertical-align:top; 
+	text-align:left;  
+}
+
+.vis-tables table tbody { 
+	font-size:12px;  
+}
+
+.vis-tables table tbody td { 
+	text-align:left; 
+	padding:5px;  
+}