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. It is here in Google Docs, with public read access. Note that this document is identified by 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 createa 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 loadChart() {
kshf.init({
chartTitle: "Nobel Prize Winners",
domID : "#nobelDiv",
dirRoot: "../",
categoryTextWidth: 200,
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);We used jquery's documunet ready callback to start loading the chart. There's only one call to kshf.init to create our interface. A single parameter to this function includes all the settings as a javascript object with certain indexes:
- chartTitle is used as the top chart title, and is actually optional.
- domID is where you want keshif to insert the interface. Important!
- dirRoot is where your put the keshif source directory relative to the current directory. By default, it's expected to be in the same folder, but your case may vary, and we put it in the parent directory.
- categoryTextWidth is how wide you want the left panel width to be, which hosts category facets. The nice value may depend on your categories, you can start around 150, and increase it if your data requires.
- source defines our datasource, and is mostly self explanatory, and configurable further as noted here in API docs.
- By default, Keshif will try to create a search facet for all columns in the first table you specified. We don't want to create search on 2 of the columns, so we list them here
