Home

Keshif

• You have some list-of-items (mails, digital collections, news, …) that you want to easily get an overview of?
• Filtering options that feels intuitive, and gives you the right power when needed?
• Don’t have much screen space for the box, and want to scale easily without losing control?
• Simple API to manage it all.

Keshif is here to help you.

To see how to use Keshif and further documentation, serve yourself.

Screenshot

Sample Code

Here is a sample code that creates a keshif widget from a google spreadsheet.

kshf.init({
    chartTitle: "5 Years of Infosthetics",
    domID : "#chart_div4",
    itemName : "posts",
    categoryTextWidth:186,
    source : {
        gdocId : '0Ai6LdDWgaqgNdFhuMXh0V1E2Wk5tU19JaDltUWVMVnc',
        sheets : [ {name:"Posts"} ]
    },
    loadedCb: function(){
        postCols = kshf.dt_ColNames.Posts;
        kshf.cellToArray(kshf.dt.Posts, [postCols.categories], ",", false);
    },
    charts: [ // 2 facets, the first one also describing time chart
        {   facetTitle: "Category",
            timeTitle: "Date",
            timeItemMap : function(post){ return post.data[postCols['DateTime']]; }
        },{
            facetTitle: "Author",
            catDispCountFix: 6,
            textFilter: 'by', textGroup: 'authors'
        }
    ],
    sortOpts:{
        columns : [
            {   name: 'Date',
                width: 45,
                value: function(d){ return d.data[postCols.date].getUTCFullYear(); },
                value_type : 'number'
            }
        ],
        textSearch : function (d) { return d.data[postCols.title]; },
        textSearchTitle : "post title",
        contentFunc : function(d) { 
        	// return an html string which you can generate from the data parameter, d
        }
    }
});

Adding Keshif

1. Insert kshf.init(params) function in a page load callback using an object with parameters defined here.
2. You need to include javascript files for jquery, d3 and keshif. You can insert the following scripts to your page, if you want to use current keshif distribution structure. Your file locations and names may vary.

<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>

Also, insert the following style sheets to your page head section:
<link rel="stylesheet" type="text/css" href="./keshif.css"/>

Main Parameters
Data Source Parameters
Facet Parameters
Link Parameters

Demos

• World Country Flags – 193 items
• Nobel Prize Winners – 863 items
• Ben Bederson’s publications – 144 items
• Accidents – Road Safety 2012 – UK – 3939 items
  Light Cond., Weather Cond., Special Cond., Junction Detail, Junction Control_
• Petroleum Spills – 366 items
• Product – Tablet Computers on Amazon – 573 items
• Teaching Assistant Evaluations – 151 items
• UMD HCIL Lab publications – 711 items
• 112th Senate Roll – 486 items
• Transactions In Major League Baseball – 4022 items
• Zoo – Some Animal List
• Reuters 1987 News Dataset – 21578 items
• Marvin Minsky’s publications – 248 items

Author

Mehmet Adil Yalcin @ HCIL, University of Maryland, College Park

Funded in part by Huawei.