d3 horizon plot of android sensor time series data

config.json

{"description":"Another Inlet","endpoint":"","display":"html","public":true,"require":[{"name":"cubism","url":"https://raw.github.com/square/cubism/master/cubism.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"phone.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5977202783495047,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

//custom context example from view-source:http://bost.ocks.org/mike/cubism/intro/demo-stocks.html
/*
Dropping phone face up
Sensor_record_20121208_134601_AndroSensor
*/

var padding = 4;


function cleanData(d) {
  var field;
  for(field in d) {
    if(d.hasOwnProperty(field)) {
       d[field] = parseFloat(d[field]);
    }
  }
}
tributary.phone.forEach(cleanData);

var phone = [];
tributary.phone.map(function(d) {
  //pad our chart with extra copies of each data points
  for(var i = 0; i < padding; i++) phone.push(d);

});


var context = cubism.context()
    .size(phone.length)
    .stop();

var horizon = context.horizon()
    .height(69);

var metrics = [
  makeContext("accx"),
  makeContext("accy"),
  makeContext("accz"),
];


function makeContext(field) {
  return context.metric(function(start, stop, step, callback) {
    var values = _.pluck(phone, field);
    callback(null, values);
  }, field)
}



var display = d3.select("#display");

  
var group = display.append("div")
  .classed("group", true);
group.append("div")
    .attr("class", "rule")
    .call(context.rule());
  
group.selectAll(".axis")
    .data(["top", "bottom"])
  .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })

    .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });
  
group.selectAll(".horizon")
    .data(metrics)
  .enter()
    .append("div")
    .attr("class", "horizon")
    .call(horizon)

phone.csv

accx,accy,accz,gyrox,gyroy,gyroz,light,magx,magy,magz,orientx,orienty,orientz,proximity,atmosphere,sound,loclat,loclon,localt,locspeed,locacc,temp,level,voltage,time
1.3008,0.5139,9.5873,0.0171,0.0085,-0.0298,63.6197,12.3,13.9,-42.5,311.22,-2.44,-8.12,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,21,
1.3008,0.5139,9.5873,-0.1023,0.0128,-0.016,63.6197,12.7,14.4,-42.9,309.81,-2.24,-7.78,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,87,
1.2712,0.3741,9.5669,-0.1023,0.0128,-0.016,63.6197,12.7,14.4,-42.9,309.81,-2.24,-7.78,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,139,
1.2712,0.3741,9.5669,0.0927,0.0192,-0.0096,63.6197,12.7,14.4,-42.9,309.81,-2.24,-7.78,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,204,
1.2712,0.3741,9.5669,0.0927,0.0192,-0.0096,64.3699,12.8,13.8,-42.2,309.81,-2.24,-7.78,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,263,
1.2712,0.3741,9.5669,0.0927,0.0192,-0.0096,64.3699,12.8,13.8,-42.2,309.81,-2.24,-7.78,5.0,1009.2,47.812,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,314,
1.1611,0.429,9.725,0.0192,0.064,-0.0224,64.3699,12.8,13.8,-42.2,309.81,-2.24,-7.78,5.0,1009.2,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,374,
1.1611,0.429,9.725,0.0192,0.064,-0.0224,64.3699,12.8,13.8,-42.2,309.81,-2.24,-7.78,5.0,1009.2,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,424,
1.1544,0.5324,9.4232,-0.0139,0.0309,-0.0266,63.6197,12.4,14.1,-42.7,312.58,-2.75,-7.29,5.0,1009.18,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,500,
1.1544,0.5324,9.4232,-0.0139,0.0309,-0.0266,63.6197,12.4,14.1,-42.7,312.58,-2.75,-7.29,5.0,1009.18,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,550,
1.1544,0.5324,9.4232,-0.0139,0.0309,-0.0266,63.6197,12.4,14.1,-42.7,312.58,-2.75,-7.29,5.0,1009.18,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,600,
0.1157,0.253,0.867,-1.3781,-0.1492,0.4956,63.6197,12.4,14.1,-42.7,312.58,-2.75,-7.29,5.0,1009.18,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,650,
0.1157,0.253,0.867,-1.3781,-0.1492,0.4956,109.0908,14.2,23.3,-39.8,312.58,-2.75,-7.29,5.0,1009.18,49.77,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,726,
0.0525,0.1849,0.2874,-1.0957,-0.0853,0.4999,109.0908,14.2,23.3,-39.8,312.58,-2.75,-7.29,5.0,1009.18,50.408,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,817,
0.0525,0.1849,0.2874,-1.0957,-0.0853,0.4999,176.4123,14.2,23.3,-39.8,312.58,-2.75,-7.29,5.0,1009.18,50.408,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,867,
0.0525,0.1849,0.2874,-0.3603,0.0682,0.4754,176.4123,17.5,28.7,-35.5,318.96,5.26,-7.76,5.0,1009.18,50.408,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,924,
0.0031,0.1974,0.7797,-0.3603,0.0682,0.4754,176.4123,17.5,28.7,-35.5,318.96,5.26,-7.76,5.0,1009.18,50.408,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,996,
0.0031,0.1974,0.7797,3.5717,-5.0031,-2.6561,122.6594,6.0,16.5,-44.6,318.96,5.26,-7.76,5.0,1009.18,50.408,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1085,
10.0106,-3.0236,14.8568,3.5717,-5.0031,-2.6561,122.6594,6.0,16.5,-44.6,318.96,5.26,-7.76,5.0,1009.18,72.464,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1161,
10.0106,-3.0236,14.8568,-1.2385,-0.7834,0.8143,60.7053,6.0,16.5,-44.6,318.96,5.26,-7.76,5.0,1009.18,72.464,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1218,
4.1395,-1.5018,3.628,-1.2385,-0.7834,0.8143,60.7053,-1.5,24.2,-43.6,322.55,9.37,-18.34,5.0,1009.18,72.464,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1313,
4.1395,-1.5018,3.628,0.0778,-0.2036,-0.064,60.7053,-1.5,24.2,-43.6,322.55,9.37,-18.34,5.0,1009.18,72.464,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1367,
4.1395,-1.5018,3.628,0.0778,-0.2036,-0.064,69.0606,-1.5,24.2,-43.6,322.55,9.37,-18.34,5.0,1009.18,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1417,
4.1711,-1.9985,8.3534,0.0011,-0.1077,-0.0128,69.0606,0.6,23.4,-43.7,322.55,9.37,-18.34,5.0,1009.18,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1501,
4.1711,-1.9985,8.3534,0.0011,-0.1077,-0.0128,69.0606,0.6,23.4,-43.7,322.55,9.37,-18.34,5.0,1009.18,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1551,
4.4675,-1.9419,8.2122,0.0128,-0.1247,-0.0128,69.0606,0.6,23.4,-43.7,322.55,9.37,-18.34,5.0,1009.18,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1618,
4.4675,-1.9419,8.2122,0.0128,-0.1247,-0.0128,70.6989,-0.3,23.2,-43.4,304.64,12.37,-29.0,5.0,1009.32,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1696,
4.8715,-1.8804,8.2026,-0.0373,0.0053,0.0256,70.6989,-0.3,23.2,-43.4,304.64,12.37,-29.0,5.0,1009.32,57.258,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1765,
4.8715,-1.8804,8.2026,-0.0373,0.0053,0.0256,70.6989,-0.3,23.2,-43.4,304.64,12.37,-29.0,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1815,
5.0685,-1.7291,8.113,0.3667,0.4413,0.0096,70.6989,0.4,21.3,-44.8,304.64,12.37,-29.0,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1885,
5.0685,-1.7291,8.113,0.3667,0.4413,0.0096,70.6989,0.4,21.3,-44.8,304.64,12.37,-29.0,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1936,
5.0685,-1.7291,8.113,0.3667,0.4413,0.0096,70.6989,0.4,21.3,-44.8,304.64,12.37,-29.0,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,1986,
4.2973,-1.7041,8.4004,0.1812,0.0565,-0.0544,65.1289,0.4,21.3,-44.8,304.64,12.37,-29.0,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2045,
4.2973,-1.7041,8.4004,0.1812,0.0565,-0.0544,65.1289,1.1,21.1,-44.7,301.72,9.97,-28.8,5.0,1009.32,56.448,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2127,
4.3636,-1.2846,8.4644,0.0277,-0.0053,0.0426,65.1289,1.1,21.1,-44.7,301.72,9.97,-28.8,5.0,1009.32,62.731,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2182,
4.3636,-1.2846,8.4644,0.0277,-0.0053,0.0426,62.1454,1.1,21.1,-44.7,301.72,9.97,-28.8,5.0,1009.32,62.731,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2233,
4.3636,-1.2846,8.4644,0.0277,-0.0053,0.0426,62.1454,1.1,21.1,-44.7,301.72,9.97,-28.8,5.0,1009.32,62.731,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2288,
4.1462,-1.4146,8.3451,0.1364,0.8847,-0.0096,62.8782,2.6,20.1,-44.6,298.36,9.97,-28.8,5.0,1009.32,62.731,37.96732,-122.28161,?,?,25.0,77.0,93.0,4.123,2367,

style.css

.group {
  position: relative;
  padding-top: 24px;
  padding-bottom: 44px;
}


.axis {
  font: 10px sans-serif;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.axis text {
  -webkit-transition: fill-opacity 250ms linear;
}

.axis path {
  display: none;
}

.axis line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis.top {
  background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  top: 0px;
  padding: 0 0 24px 0;
}

.axis.bottom {
  background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  bottom: 00px;
  padding: 44px 0 0 0;
}

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

.line {
  background: #000;
  z-index: 2;
}