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 spreadsheet is identified by the ID 0Ai6LdDWgaqgNdDNVcXlscjl4RzRZNl9ZSkNJLU1DWVE , available as a part of the link.
While the sheet has 3 sheets, we are interested in two of them, Prizes and Laureates.
Let's create some simple HTML page that will hold our interface (you can structure this any way you like, embed it in 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".
kshf.init({
chartTitle: "Nobel Prize Winners",
domID : "#chart_div4",
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>";
}
}
});