transition paths by trinary

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" xmlns:tal="//xml.zope.org/namespaces/tal">
<head>
  <title>Topic Tag by Hour</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
   <!--[if lte IE 6]>
  <link rel="stylesheet" href="${request.static_url('app:static/ie6.css')}" type="text/css" media="screen" charset="utf-8" />
  <![endif]-->
</head>
<style type="text/css">
body {
  font: 10px sans-serif;
  margin:auto;
  text-rendering: optimizeLegibility;
}
body, #chart {width:1024px;}

svg {
  border: 1px solid #DEDEDE;
  width:100%;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  fill: none;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke-width: 5px;
  opacity: .6
}

.dot {opacity: .7;}
.dot:hover {color:'#000000'; opacity: 1;}

.label {color:'#abc123';}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

.tag.label {
  font: 500 70px "Helvetica Neue";
  fill: #ddd;
}
.tag.label.active {
  fill: #aaa;
}
h1,h2 {letter-spacing: 1px;font-family: "Helvetica Neue", Helvetica, sans-serif; line-height: 36px; }
h1 {float:left;display:inline-block;text-shadow: 2px 2px 2px #CCCCCC; opacity: .9;}
h2 {display:inline-block;float:right;}
emboss {
  color: #ECECF6;
  text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
}
div {clear:both;}
</style>
<body>
    <div><h1 class="emboss">Tag By Hour</h1>
      <h2>${tag}</h2>
    </div>
    <div id="chart"></div>
</body>
</html>

_.md

[ <a href="http://tributary.io/inlet/5111089">Launch: transition paths</a> ] 5111089 by trinary<br>[ <a href="http://tributary.io/inlet/5109103">Launch: transition paths</a> ] 5109103 by buttersrugby<br>

config.json

{"description":"transition paths","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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 m = {"Academy.Awards": [0, 11, 0, 0, 0, 0, 21, 9, 18, 9, 53, 46, 22, 34, 15, 15, 28, 16, 21, 10, 39, 52, 4, 14]};
var r = m[Object.keys(m)];
var data = r.map(function (d, i) {
        return [i, d];
    });

console.log(data);
var w = 300,
    h = 100;

var margin = {top: 50, right: 30, bottom: 30, left: 90},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

var y = d3.scale.linear()
    .domain([0,d3.max(data,function(d){return d[1];})])
    .range([height, 0]);

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

var svg = d3.select('svg')

    // add element and transition in
    var path = svg.append('path')
        .attr('class', 'line')
        .attr('d', line(data))
        .style("fill","none")
        .style("stroke","#666")