Tutorial
Let's create a Keshif interface for a common and interesting dataset: Nobel Prizes!
First comes the data, as with any visualization or browser. We have it here in Google Docs, set to public read mode so that everyone can access this data. Note that this document is identified by the ID 0Ai6LdDWgaqgNdDNVcXlscjl4RzRZNl9ZSkNJLU1DWVE , available as a part of the link. While this document has 3 sheets, we are interested in two of them, Prizes and Laureates.
To start coding, let's create some barebone HTML page that will hold our interface (you can structure this any way you like, embed it in custom pages, blog posts, etc...)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nobel Prize Winners</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../d3.v3/d3.v3.js" charset="utf-8"></script>
<script type="text/javascript" src="../keshif.js" charset="utf-8"></script>
<link rel="stylesheet" href="../keshif.css"/ type="text/css">
<script type="text/javascript" src="moment.min.js" charset="utf-8"></script>
</head>
<body><div id="nobelDiv"></div></body>
</html>Notice the scripts we included, mainly Google API so that we can access the spreadsheet, jquery, d3, and finally keshif. We also linked keshif css so we have the basic interface styles needed, and moment library so that we can later manipulate date data easier. The body includes just a single empty div, with a given id "nobelDiv".
Now, let's bring our data to this page, simply by adding a few lines of javascript:
function resetSize(){
$('#nobelDiv').height($(window).height()-10);
// $('#nobelDiv').height(730);
$('#nobelDiv').width (1000);
}
function loadChart() {
resetSize();
// set resize callback
$(window).resize(function() {
resetSize();
kshf.updateLayout();
});
kshf.init({
chartTitle: "Nobel Prize Winners",
domID : "#nobelDiv",
dirRoot: "../",
categoryTextWidth: 306,
source : {
gdocId : '0Ai6LdDWgaqgNdDNVcXlscjl4RzRZNl9ZSkNJLU1DWVE',
sheets : [ {name:"Prizes"}, {name:"Laureates"} ]
},
columnsSkip : ["Overall Motivation","laureate_id"],
list: {
sortColWidth: 45,
sortOpts : [ {name: 'Year'} ],
contentFunc : function(d) {
var laureateID = d.data[kshf.dt_ColNames.Prizes.laureate_id];
var laureate = kshf.dt_id.Laureates[laureateID];
return "<div class=\"iteminfo iteminfo_0\">" +
laureate.data[kshf.dt_ColNames.Laureates.firstname] + " " +
laureate.data[kshf.dt_ColNames.Laureates.surname] +
"</div>";
}
}
});
}
$(document).ready(loadChart);