Data Canvas API: by city

_.md

[ Launch: Data Canvas API: by city ] 2bab95c4aa1e95bd48c1 by enjalot

config.json

{"description":"Data Canvas API: by city","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ui.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"controls":{"resolution":"1h","ci":"5m","city":"Rio de Janeiro","field":"light"},"thumbnail":"http://i.imgur.com/i40KDO4.png"}

inlet.js

/*
 Data Canvas API explorer
 
 http://map.datacanvas.org/#!/data
 
*/ 
var apiAggregations = "http://sensor-api.localdata.com/api/v1/aggregations.csv?op=mean";

var fields = [
  "temperature",
  "light",
  "airquality_raw",
  "sound",
  "humidity",
  "dust"
];
var field =  tributary.control({name: "field", options: fields});

var resolutions = [
  "5m", "1h", "6h"
]
//var resolution = resolutions[1]
var resolution =  tributary.control({name: "resolution", options: resolutions});

var cities = [
  "San Francisco",
  "Bangalore",
  "Boston",
  "Geneva",
  "Rio de Janeiro",
  "Shanghai",
  "Singapore"
]
//var city = cities[0];
var city =  tributary.control({name: "city", options: cities});


// BUILD UP THE VISUALIZATION
var date = lastDay();
//var date = last7Days();
var url = apiAggregations +
   "&fields=" + fields.join(",") + 
   "&resolution=" + resolution +
   "&over.city=" + city +
   "&from=" + date.from.toISOString() + 
   "&before=" + date.before.toISOString();

console.log(url);

var display = d3.select("#display");
display.select("#url").node().value = url;

// REQUEST THE DATA AND USE IT
d3.csv(url, function(err, data) {
  if(err) { console.log("err", err) }
  console.log(data);
  //data.sort(function(a,b) { return b.timestamp - a.timestamp });
  display.select(".loader").style("display", "none");
  display.select("#data").node().value = JSON.stringify(data, null, 2);
  
  // SIMPLE VISUALIZATION
  var svg = display.select("svg");
  
  var width = tributary.sw - 50;
  
  var timescale = d3.time.scale()
  .domain(d3.extent(data, function(d) { return new Date(d.timestamp) }))
  .range([10, width]);
  
  var yscale = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return +d[field] })])
  .range([1, 150]);
  
  svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect").classed("field", true)
  .attr({
    x: function(d) { return timescale(new Date(d.timestamp)) },
    y: function(d) { return 150 - yscale(+d[field]) },
    width: width / data.length - 2,
    height: function(d) { return yscale(+d[field]) }
    
    
  })
})


function lastDay() {
  var today = new Date();
  var day = today.getUTCDate() - 1;
  var month = today.getUTCMonth();
  if(day < 1) {
    month -= 1;
  }
  var from = new Date(today.getUTCFullYear(), month, day)
  var before = new Date(today.getUTCFullYear(), month, today.getUTCDate());
  return { from: from, before: before }
}
//console.log("from", lastDay().from.toISOString());
//console.log("before", lastDay().before.toISOString());
function last7Days() {
  var today = new Date();
  var day = today.getUTCDate() - 7;
  var month = today.getUTCMonth();
  if(day < 1) {
    month -= 1;
  }
  var from = new Date(today.getUTCFullYear(), month, day)
  var before = today;
  return { from: from, before: before }
}
//console.log("7 from", last7Days().from.toISOString());
//console.log("7 before", last7Days().before.toISOString());

style.css

.control {
  width: 100%;
}
.control .label {
  width: 100px;
  height: 30px;
  display: block;
  margin: auto 0;
}
.row {
  margin: 10px;
}
#url {
  width: 100% !important;
  margin: 0 !important;
}
#data {
  width: 100%;
  height: 150px;
  margin: 0px;
}

.canvas {
  height: 300px;
}
.canvas svg {
  width: 100%;
  height: 100%;
}

ui.html

<div class="control">

  <div class="row">
    <span class="label">API URL:</span>
    <input id="url">
  </div>
  <div class="row">
    <span class="label">DATA:</span>
    <textarea id="data"></textarea>
  </div>
  
  <div class="canvas">
    <div class="loader">
      Loading
    </div>
    <svg></svg>
  </div>
</div>