Home

• 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 convert data into your interface.

Keshif is here to help you.

Tutorial & Sample Code

Tutorial is here . Using Nobel dataset, simply import the dataset with default configurations, then customize for more effective and detailed browsing.

Sample code:

kshf.init({
    domID : "#chart_div4",
    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"
        },{
            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>
3. Insert the following style sheets to your page head section:
   <link rel="stylesheet" type="text/css" href="./keshif.css"/>

API Documentation

Main Parameters
Data Source Parameters
Facet Parameters
List Parameters
Notes

Demos

• World Country Flags – 193 items
• Nobel Prize Winners – 863 items
• Ben Bederson’s publications – 144 items
• Accidents – Road Safety 2012 – UK – 3939 items
• 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.