Data Visualization with Keshif

Crawling on the web for data visualization tools and packages that have been built using the D3.js, I chanced upon a library called “Keshif”. Keshif created at the University of Maryland is the brainchild of Prof. Anne Rose. You can find her profile here: PROFILE.

keshif

Let’s get started with a quick tutorial on creating a Keshif data visualization online here:

Now that we have the ground cleared with the basics. Let’s move on to some advanced stuff. I am now going to show you how we can customize and use the Keshif engine to create our personalized data visualization dashboard. The Git repository for Keshif provides us lots of demo examples of the types of visualization browsers we can create. We will try recreating one of these called “SelfieCity”.

Let’s begin with the skeleton html of our main page.

 
 
 
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="./js/d3.3.5.5.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/keshif.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/moment.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/demo.js" charset="utf-8"></script>
Selfiecity – Self-portraits (selfies) in five cities across the world
 

The page currently looks like this:

Skeleton Page

Keshif has a single main function which helps load the data source, creates summaries and loads visuals or displays items. There are several ways of invoking the main function. For more examples, check the demo examples on Keshif’s website. We will be creating another script file called “keshif_demo.js” which would contain the browser main function. Copy the code as below:

$(document).ready( function(){
  resizeBrowser(100,130);
  $(window).resize(function(){
    resizeBrowser(100,130);
    browser.updateLayout();
  });
 
  browser = new kshf.Browser({
    domID: "#chart_div",
    categoryTextWidth: 150,
    itemName: "Selfies",
    source: {
      gdocId: '1KwkzkZo7rHyORyqF5qL2TmIeBgOHz1FtGXg0sPrTsbw',
      tables: "Selfiecity"	  
    },
    summaries: [
      { title: "City", value: "city",
        catLabel: function(){
          switch(this.id){
            case 'ny': return "New York";
            case 'bangkok': return "Bangkok";
            case 'sao_paulo': return "Sao Paulo";
            case 'moscow': return "Moscow";
            case 'berlin': return "Berlin";
          }
        } },
      { title: "Sex", value: "sex" },
      { title: "Age", value: "age", showPercentile: true },
      { title: "Photo: Eyes Closed", value: "eye_closed" },
      { title: "Photo: Mouth Open", value: "mouth_open_wide", collapsed: true },
      { title: "Photo: Has Glasses", value: "glasses" },
 
      { title: "Happyness", value: "emotion_happy", layout: 'right', showPercentile: true },
      { title: "Calmness", value: "emotion_calm", layout: 'right', type: 'interval', },
      { title: "Confusion", value: "emotion_confused", layout: 'right', type: 'interval',},
      { title: "Sadness", value: "emotion_sad", layout: 'right', },
      { title: "Anger", value: "emotion_angry", collapsed: true, layout: 'right', },
      { title: "Disgust", value: "emotion_disgust", collapsed: true, layout: 'right', type: 'interval' }
    ],
    itemDisplay: {
      sortingOpts: {title:"Happyness", value: "emotion_happy"},
      displayType: "grid",
      detailsToggle: "off",
      maxVisibleItems_Default: 104,
      recordView: function(){ return "<img>"; },
      visibleCb: function(d){
          d3.select(d.DOM.record).select("img").attr("src",
              'https://d25rsf93iwlmgu.cloudfront.net/selfies/150/'+this.city+'/'+this.id);
      }
    }
  });
});
    • domID: In our case #chart_div which is the same id we gave to the div in the html body.
    • gdocId: This is the id of the Google Doc which contains our data. Keshif provides several ways to load data. It also supports several types including XML, JSON, Text files.
    • tables: Name of the table in the Google Doc.
    • summaries: This section summarizes the data as visual elements on the browser. Each element of the summary is identified by the title field. Additional options like showPercentile, catLabel, collapsed, layout, type etc. can be used to modify the appearance of the element. See API documentation for more help.
    • itemDisplay: This section creates the middle section of the browser. The visibleCb element along with recordView of this section renders this section
    • sortingOpts: Provides a dropdown list to sort the elements in the middle section.

The page currently looks like this:

Step 2 - Work in Progress

Let’s customize it a bit more. Keshif provides hidden options to remove the ribbons and make it look neater. Let’s set these options. Copy the code below before the browser main function.

socialShare = false;
noRibbon = true;
showLogo = true;

The page currently looks like this:

Step 3 - Removing Ribbons

Finally, let’s add in some cool CSS to create the hover effects on the selfies in the browser. We have succesfully recreated the demo on Keshif website here: Keshif SelfieCity
Selfiecity is a project by Dr. Lev Manovich, Moritz Stefaner, Mehrdad Yazdani, Dr. Dominikus Baur, Daniel Goddmeyer, Alise Tifentale, Nadov Hochman, Jay Chow.

You can also see their interactive visual selfie browser here: Selfie Exploratory

.listItemGroup{
  background-color: black !important;
}
.listItem{
  width: 70px;
  padding-top: 0px !important;
  background-color: black !important;
  overflow: visible !important;
}
.listItem[highlight=true]{
  background-color: orangered !important;
}
.listItem[highlight=true] .content img{
  border-color: orangered;
  border-width: 3px;
}
.listItem:hover{
  z-index: 200 !important;
}
.listItem:hover .content img{
  transform: scale(2);
}
.listItem &gt; .itemRow{
  display: block !important;
  overflow: visible !important;
}
.content img{
  display: block;
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 0px;
  background-color: white;
  width: 100%;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
}
.listItem[highlight=true] .content img{
  background-color: orangered;
}
.content span.title{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2px;
  text-align: center;
  font-size: 0.8em;
}

Our final HTML source looks like this:

 
 
 
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="./js/d3.3.5.5.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/keshif.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/moment.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/demo.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/keshif_demo.js" charset="utf-8"></script>
Selfiecity – Self-portraits (selfies) in five cities across the world
 

Final version:

Final Version

For more information about the API:
GitHub Source
API Documentation

No comments yet.

Leave a Reply