time story

_.md

[ Launch: time story ] 927a35cc5df02a19cc28 by jasonkolb

config.json

{"description":"time story","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.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}

inlet.css

path {
  fill-rule: evenodd;
  fill: #aaa;
  fill-opacity: 0;
  stroke: #9f27c8;
  stroke-width: 5.408px;
}

inlet.js

// what about cohort size?

var data = 
[
{"series": "fix A (Recommended)", "date" : "1\/1\/2014", "healthScore": 100, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/2\/2014", "healthScore": 100, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/3\/2014", "healthScore": 94, "faults": [{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/4\/2014", "healthScore": 94, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/5\/2014", "healthScore": 94, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/6\/2014", "healthScore": 92, "faults": [{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/7\/2014", "healthScore": 92, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/8\/2014", "healthScore": 80, "faults": [{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/9\/2014", "healthScore": 75, "faults": [{"name": "fan failure"},{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/10\/2014", "healthScore": 60, "faults": [{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/11\/2014", "healthScore": 60, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/12\/2014", "healthScore": 50, "faults": [{"name": "fan failure"},{"name": "fan failure"},{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/13\/2014", "healthScore": 45, "faults": [{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/14\/2015", "healthScore": 45, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/15\/2016", "healthScore": 40, "faults": [{"name": "fan failure"}]},
{"series": "fix A (Recommended)", "date" : "1\/16\/2016", "healthScore": 40, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/17\/2016", "healthScore": 40, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/18\/2016", "healthScore": 40, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/19\/2016", "healthScore": 40, "faults": []},
{"series": "fix A (Recommended)", "date" : "1\/20\/2016", "healthScore": 40, "faults": []}
]


var data = [1,9,4,2,6,2,5,0,5,9,7,2].map(function(d,i) {
        return [i, d];
    });

var w = 300,
    h = 100;

var x = d3.scale.linear()
    .domain([0, data.length-1])
    .range([0, w]);

var y = d3.scale.linear()
    .domain([0, 10])
    .range([h, 0]);

var line = d3.svg.line()
	.interpolate("basis")
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });

var svg = d3.select("svg")
    .attr('w', w)
    .attr('h', h);

    // add element and transition in
    var path = svg.append('path')
        .attr('class', 'line')
        .attr('d', line(data[0]))
      .transition()
        .duration(4062)
        .attrTween('d', pathTween);
    
    function pathTween() {
        var interpolate = d3.scale.quantile()
                .domain([0,1])
                .range(d3.range(1, data.length + 1));
        return function(t) {
            return line(data.slice(0, interpolate(t)));
        };
    }