This document discusses how big data and analytics can be used by individuals. It notes that while people used to be able to work alone, big data now requires teams of people. It provides examples of how a team of 1 person grew to 4 people and later 10 people to work on an analytics project over 3 months. It also discusses technologies like REST APIs, Java, RequireJS, Mustache templates, and how they were used to develop applications and widgets to work with and visualize different data sources.

1. Big Data for each one of us

6. Team size = 1

9. Team size = 4

10. Can’t work alone anymore 

11. 

12. Fall 2011

16. Team size = ???

17. Can’t count on web designer
Anymore 

18. 

19. Extension points

20. Connectors
Tabs
Applications
Widgets

22. Team size = 10

23. 3 month later…

25. developer usability

26. REST
Java
requirejs
mustache

27. REST http://api.fluxtream.com/calendar/all/date/2012-05-27
{
"tbounds":{"start":1338069600000,"end":1338155999999},
"solarInfo":{"sunrise":333,"sunset":1293,},
"updateNeeded":["google_calendar"],
"addresses":{...},
"cities":[...],
"inTransit":"UNKNOWN",
"travelType":"UNKNOWN",
"minTempC":10.0,...
"settings":{
"temperatureUnit":"FAHRENHEIT",
...
},
"haveDataConnectors":[...],
"haveNoDataConnectors":[...],
"selectedConnectors":[...],
"hourlyWeatherData":[...],
"cachedData":{
"bodymedia-burn":[...],
"picasa-photo":[...],
"google_latitude-location":[...],
"fitbit-activity_summary":[...]
}
}

28. Java

29. Requirejs define(["applications/calendar/tabs/Tab",
"applications/calendar/App", "applications/calendar/tabs/photos/PhotoUtils"], function(Tab,
Calendar, PhotoUtils) {
var maxWidth = 200;
// other private variables
// ...
function render(dgest, timeUnit, calendarState, cEn) {
this.getTemplate("text!applications/calendar/tabs/photos/photos.html", "photos", function() {
...
});
}
function setup(digest, cEn){...}
function showNoPhotos(){...}
function onDataReceived(photos){...}
function connectorToggled(connectorName,objectTypeNames,enabled){...}
function connectorDisplayable(connector){...}
var photosTab = new Tab("photos", "Justin Loutsenhizer", "icon-camera", true);
photosTab.render = render;
photosTab.connectorToggled = connectorToggled;
photosTab.connectorDisplayable = connectorDisplayable;
return photosTab;
});

30. requirejs

31. requirejs
total size of the
compiled code (gziped): 70kb

32. Mustache / Hogan
<div id="availableConnectors">
{{^rows}}
<div style="margin: 60px 0 75px 0; width: 100%; text-align: center">You have added all
available connectors</div>
{{/rows}}
{{#rows}}
<div class="row-fluid">
{{#connectors}}
<div class="span4">
<a href="javascript:App.addConnector('{{connectUrl}}')">
<img src="{{image}}" alt="" width=158 Height=89>
</a>
<p>{{text}}</p>
</div>
{{/connectors}}
</div>
{{/rows}}
</div>

33. Let’s write a widget!

34. 5 files

35. A Manifest
{
"WidgetDescription" : {"en" : "Average Daily Steps Taken per day,
week or year"},
"WidgetIcon" : "averageSteps.png",
"WidgetName" : "averageSteps",
"WidgetTitle" : {"en" : "Average Steps"},
"HasSettings" : true,
"SupportedLanguages" : "en",
"VendorIdentifier" : "Fluxtream.com",
"RequiredConnectors":"bodymedia, fitbit"
}

36. An Icon

37. the widget’s contents template
<div class="flx-widget-typo">
<section class="main-widget-data">
{{#steps}}
<div class="big-data-figure" style="color:{{color}}">{{steps}}<span class="data-
unit">steps</span></div>
{{/steps}}
{{#noMeasure}}
<div class="big-data-figure"><span class="data-unit">{{noMeasureMsg}}</span></div>
{{/noMeasure}}
</section>
</div>

38. the widget’s settings template
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Steps threshold:</label>
<div class="controls">
<input type="text" class="input-xlarge"
id="averageStepsHappyDailyThreshold">
<p class="help-block">Number of steps that make you happy.</p>
</div>
</div>
</fieldset>
</form>

39. the widget’s controller code
define(["core/DashboardWidget"], function(DashboardWidget) {
var StepsTaken = new DashboardWidget();
StepsTaken.postLoad = function() {
// ...
// using this.digest, this.settings, this.manifest
var params = {"manifest" : this.manifest,
"settings" : this.settings,
"color" : color,
"steps" : averageSteps>0?steps:null,
"noMeasure" : averageSteps===0,
"noMeasureMsg" : StepsTaken.noSteps()};
$("#averageSteps-widget .flx-body").empty();
$("#averageSteps-widget .flx-body").append(
this.template.render(params)
);
};
StepsTaken.validateSettings = function() {...};
StepsTaken.bindWidgetSettings = function(widgetSettings) {...}
StepsTaken.defaultSettings = function(widgetSettings) {...}
return StepsTaken;
})

40. Team size = you

41. Thank You!