tributary meta vis

_.md

[ Launch: tributary meta vis ] 5175381 by poezn
[ Launch: tributary meta vis ] 5175328 by poezn
[ Launch: tributary meta vis ] 5175210 by enjalot

config.json

{"description":"tributary meta vis","endpoint":"","display":"svg","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}

inlet.js

var cw = 600;
var ch = 300;
var ah = 100;
var margin = 100;

var trib_url = 'http://tributary.io/',
	//users_url = trib_url + 'api/users',
	created_url = trib_url + 'api/latest/created/limit=1000',
	trib_inlet = trib_url + 'inlet/';

var svg = d3.select("svg");


  


function update_content() {
  //accumulate inlets;
  //inlets come back in order so don't really need to do this
  var firstInlet = d3.min(tributary.inlets, function(d) { return d.createdAt });
  var lastInlet = d3.max(tributary.inlets, function(d) { return d.createdAt });
  
  var weekdayFirst = firstInlet.getDay();
  
  console.log("first", firstInlet, "last", lastInlet);
  console.log("number", tributary.inlets.length);
  var days = d3.time.day.range(firstInlet, lastInlet);
  days.unshift(firstInlet);
  //console.log(days);
  var daily = {};

  tributary.inlets.forEach(function(inlet) {
    var day = d3.time.day.floor(inlet.createdAt);
    daily[day] = daily[day]+1 || 1;
  })
  console.log(daily)
  var cumulative = [];
  var val = 0;
  days.forEach(function(day) {
    val += daily[day] || 0;
    cumulative.push(val);
  })
  console.log(cumulative);
  
  
  //accumulate user's first inlets;
  var users = {};


  var timescale = d3.time.scale()
    .domain([firstInlet, lastInlet])
    .range([margin, cw + margin]);
  var cyscale = d3.scale.linear()
    .domain([0, tributary.inlets.length])
    .range([margin+ch, margin]);
  var line = d3.svg.line()
  .interpolate("basis")
  .x(function(d,i) {
    return timescale(days[i]);
  })
  .y(function(d,i) {
    return cyscale(d);
  })

  
  var cumg = svg.append("g")
  .classed("cumulative", true)
  cumg.append("path")
  .attr("d", line(cumulative))
  .style({
    "stroke-width": 30,
    "stroke": "#B5D319",
    "opacity": 0.1
  })
  
  var cumg2 = svg.append("g")
  .classed("cumulative2", true)
  cumg.append("path")
  .attr("d", line(cumulative))
  .style({
    stroke: "#39721A",
    "opacity": 0.3,
    "stroke-width": 18,
  })
  
  var cumg3 = svg.append("g")
  .classed("cumulative3", true)
  cumg.append("path")
  .attr("d", line(cumulative))
  .style({
    stroke: "#C9FD23"
  })
  
 d3.selectAll("#display")
 .style({
   background: "#151F38"
 })
  
  
  var dailyActivity = [];
  days.forEach(function(day) {
    dailyActivity.push(daily[day] || 0);
  })
  var ayscale = d3.scale.linear()
  .domain([0, d3.max(dailyActivity)])
  .range([0, ah])
  var activity = svg.append("g")
  .classed("activity", true)
  activity.selectAll("rect.inlets")
  .data(dailyActivity)
  .enter()
  .append("rect")
  .classed("inlets", true)
  .attr({
    x: function(d,i) {
      return timescale(days[i])
    },
    y: function(d,i) {
      return ch + margin + 42;
    },
    rx: 3,
    ry: 3,
    width: 6,
    height: function(d,i) {
      return ayscale(d);
    }
  })
  .style({
    fill: function(d, i) {
      console.log(d);
      if (days[i] % 7 - weekdayFirst > 0) {
        // weekdays
        return "#CFDB49";
      }
      // weekend
      	return "#64B4CE";
   	}
  })
  
}



//delete tributary.inlets
if(!tributary.inlets) {
  d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    tributary.inlets.forEach(function(d) { 
      d.createdAt =  new Date(d.createdAt) 
    })
    update_content();
  })
} else {
  update_content();
}

style.css

.cumulative {
  fill: none;
  stroke: #000;
  stroke-width: 3
}