tmcw/_.md

## _.md

      
    Raw
  

              _.md
            
          
    [ Launch: transition paths ] 5110356 by tmcw
[ Launch: transition paths ] 5109103 by buttersrugby


## 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}

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:tal="http://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>

## inlet.js
var r = [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 data = r.map(function (d, i) {
        return [i, d];
    });

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;})])
    .range([height, 0]);

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

var svg = d3.select('body').append('svg')
    .attr('w', width)
    .attr('h', height);

    // add element and transition in
    var path = svg.append('path')
        .attr('class', 'line')
        .attr('d', line(data[0]))
      .transition()
        .duration(1000)
        .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)));
        };
    }
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:tal="http://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>
	var r = [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 data = r.map(function (d, i) {
	return [i, d];
	});

	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;})])
	.range([height, 0]);

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

	var svg = d3.select('body').append('svg')
	.attr('w', width)
	.attr('h', height);

	// add element and transition in
	var path = svg.append('path')
	.attr('class', 'line')
	.attr('d', line(data[0]))
	.transition()
	.duration(1000)
	.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)));
	};
	}