togakangaroo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#code {
  position: relative;
  transition: all 1s ease;
  display: inline-block;
}
#code.rotate {
  transform: rotate(90deg) translate(20px, 0);
  transform-origin: 50%;
}
#code > * {
  display: block;
}
#code > pre {
  padding: 0 0 0 10px;
  margin: 0;
  display: inline-block;
}
#code > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
}

</style>
</head>
<body>
  <div id=code><pre>
var doStuff = function(){
    var informal = "Hi";

    var sayHi = function() {
        var formal = "Hello";
        console.log(informal);
    }

    sayHi();
    console.log(informal);
    console.log(formal);
}</pre></div>
<script id="jsbin-javascript">
var code, drawPaths, indentations, line, lineColor, lineCount, pxPerLine, rotate, svg, walkPaths, xpos, ypos, _log;

console.clear();

_log = console.log.bind(console);

code = d3.select('#code');

svg = code.append('svg');

indentations = [0, 4, 4, 4, 8, 8, 4, 4, 4, 4, 4, 0, 0];

lineCount = 12;

pxPerLine = code.node().scrollHeight / lineCount;

xpos = function(d) {
  return 7 * d;
};

ypos = function(d, t) {
  return pxPerLine / 2 + t * pxPerLine;
};

lineColor = function(c, node) {
  return node.attr('stroke-width', 2).attr('fill', 'none').attr('stroke', c);
};

line = d3.svg.line().x(xpos).y(ypos).interpolate('basis');

drawPaths = function() {
  var usageCol, usageLine, useageLine;
  lineColor('brown', svg.append('path').attr('d', line(indentations)));
  useageLine = 6 - 1;
  usageCol = [22, 30];
  usageLine = d3.svg.line().x(xpos).y(5 + ypos(null, useageLine)).interpolate('linear');
  return lineColor('red', svg.append('path').attr('d', usageLine(usageCol)));
};

rotate = function() {
  return code.classed('rotate', true);
};

walkPaths = function() {
  return lineColor('yellow', svg.append('g').attr('transform', 'translate(10, 0)').append('path').attr('d', line(indentations)).transition().duration(1000));
};

drawPaths();

setTimeout(rotate, 0);

setTimeout(walkPaths, 0);

</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id=code><pre>
var doStuff = function(){
    var informal = "Hi";

    var sayHi = function() {
        var formal = "Hello";
        console.log(informal);
    }

    sayHi();
    console.log(informal);
    console.log(formal);
}</pre></div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">#code {
  position: relative;
  transition: all 1s ease;
  display: inline-block;

  &.rotate {
    transform: rotate(90deg) translate(20px, 0);
    transform-origin: 50%;
  }

  &>* {
    display: block;
  }

  &>pre {
    padding: 0 0 0 10px;
    margin: 0;
    display: inline-block;
  }
  &>svg {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
}</script>

<script id="jsbin-source-javascript" type="text/javascript">console.clear()

_log = console.log.bind console

code = d3.select('#code')
svg = code.append('svg')

indentations = [0, 4, 4, 4, 8, 8, 4, 4, 4, 4, 4, 0, 0]
lineCount = 12

pxPerLine = code.node().scrollHeight / lineCount

xpos = (d) -> 7*d
ypos = (d, t) -> pxPerLine/2 + t*pxPerLine

lineColor = (c, node) ->
  node
    .attr 'stroke-width', 2
    .attr 'fill', 'none'
    .attr 'stroke', c

line = d3.svg
          .line()
          .x xpos
          .y ypos
          .interpolate 'basis'

drawPaths = ->
  lineColor 'brown',
    svg
      .append 'path'
      .attr 'd', line indentations

  # Variable Usage
  useageLine = 6 - 1
  usageCol = [22, 30]
  usageLine = d3.svg
               .line()
               .x xpos
               .y 5 + ypos null, useageLine
               .interpolate 'linear'

  lineColor 'red',
    svg
      .append 'path'
      .attr 'd', usageLine usageCol

rotate = ->
  code.classed 'rotate', true

walkPaths = ->
  lineColor 'yellow',
    svg
      .append 'g'
      .attr 'transform', 'translate(10, 0)'
      .append 'path'
      .attr 'd', line indentations
      .transition()
      .duration 1000

do drawPaths
setTimeout rotate, 0 #1000
setTimeout walkPaths, 0 #2000

  </script></body>
</html>

## jsbin.lijaye.css
#code {
  position: relative;
  transition: all 1s ease;
  display: inline-block;
}
#code.rotate {
  transform: rotate(90deg) translate(20px, 0);
  transform-origin: 50%;
}
#code > * {
  display: block;
}
#code > pre {
  padding: 0 0 0 10px;
  margin: 0;
  display: inline-block;
}
#code > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
}

## jsbin.lijaye.js
var code, drawPaths, indentations, line, lineColor, lineCount, pxPerLine, rotate, svg, walkPaths, xpos, ypos, _log;

console.clear();

_log = console.log.bind(console);

code = d3.select('#code');

svg = code.append('svg');

indentations = [0, 4, 4, 4, 8, 8, 4, 4, 4, 4, 4, 0, 0];

lineCount = 12;

pxPerLine = code.node().scrollHeight / lineCount;

xpos = function(d) {
  return 7 * d;
};

ypos = function(d, t) {
  return pxPerLine / 2 + t * pxPerLine;
};

lineColor = function(c, node) {
  return node.attr('stroke-width', 2).attr('fill', 'none').attr('stroke', c);
};

line = d3.svg.line().x(xpos).y(ypos).interpolate('basis');

drawPaths = function() {
  var usageCol, usageLine, useageLine;
  lineColor('brown', svg.append('path').attr('d', line(indentations)));
  useageLine = 6 - 1;
  usageCol = [22, 30];
  usageLine = d3.svg.line().x(xpos).y(5 + ypos(null, useageLine)).interpolate('linear');
  return lineColor('red', svg.append('path').attr('d', usageLine(usageCol)));
};

rotate = function() {
  return code.classed('rotate', true);
};

walkPaths = function() {
  return lineColor('yellow', svg.append('g').attr('transform', 'translate(10, 0)').append('path').attr('d', line(indentations)).transition().duration(1000));
};

drawPaths();

setTimeout(rotate, 0);

setTimeout(walkPaths, 0);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#code {
	position: relative;
	transition: all 1s ease;
	display: inline-block;
	}
	#code.rotate {
	transform: rotate(90deg) translate(20px, 0);
	transform-origin: 50%;
	}
	#code > * {
	display: block;
	}
	#code > pre {
	padding: 0 0 0 10px;
	margin: 0;
	display: inline-block;
	}
	#code > svg {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	padding: 0;
	margin: 0;
	}

	</style>
	</head>
	<body>
	<div id=code><pre>
	var doStuff = function(){
	var informal = "Hi";

	var sayHi = function() {
	var formal = "Hello";
	console.log(informal);
	}

	sayHi();
	console.log(informal);
	console.log(formal);
	}</pre></div>
	<script id="jsbin-javascript">
	var code, drawPaths, indentations, line, lineColor, lineCount, pxPerLine, rotate, svg, walkPaths, xpos, ypos, _log;

	console.clear();

	_log = console.log.bind(console);

	code = d3.select('#code');

	svg = code.append('svg');

	indentations = [0, 4, 4, 4, 8, 8, 4, 4, 4, 4, 4, 0, 0];

	lineCount = 12;

	pxPerLine = code.node().scrollHeight / lineCount;

	xpos = function(d) {
	return 7 * d;
	};

	ypos = function(d, t) {
	return pxPerLine / 2 + t * pxPerLine;
	};

	lineColor = function(c, node) {
	return node.attr('stroke-width', 2).attr('fill', 'none').attr('stroke', c);
	};

	line = d3.svg.line().x(xpos).y(ypos).interpolate('basis');

	drawPaths = function() {
	var usageCol, usageLine, useageLine;
	lineColor('brown', svg.append('path').attr('d', line(indentations)));
	useageLine = 6 - 1;
	usageCol = [22, 30];
	usageLine = d3.svg.line().x(xpos).y(5 + ypos(null, useageLine)).interpolate('linear');
	return lineColor('red', svg.append('path').attr('d', usageLine(usageCol)));
	};

	rotate = function() {
	return code.classed('rotate', true);
	};

	walkPaths = function() {
	return lineColor('yellow', svg.append('g').attr('transform', 'translate(10, 0)').append('path').attr('d', line(indentations)).transition().duration(1000));
	};

	drawPaths();

	setTimeout(rotate, 0);

	setTimeout(walkPaths, 0);

	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id=code><pre>
	var doStuff = function(){
	var informal = "Hi";

	var sayHi = function() {
	var formal = "Hello";
	console.log(informal);
	}

	sayHi();
	console.log(informal);
	console.log(formal);
	}</pre></div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">#code {
	position: relative;
	transition: all 1s ease;
	display: inline-block;

	&.rotate {
	transform: rotate(90deg) translate(20px, 0);
	transform-origin: 50%;
	}

	&>* {
	display: block;
	}

	&>pre {
	padding: 0 0 0 10px;
	margin: 0;
	display: inline-block;
	}
	&>svg {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	padding: 0;
	margin: 0;
	}
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">console.clear()

	_log = console.log.bind console

	code = d3.select('#code')
	svg = code.append('svg')

	indentations = [0, 4, 4, 4, 8, 8, 4, 4, 4, 4, 4, 0, 0]
	lineCount = 12

	pxPerLine = code.node().scrollHeight / lineCount

	xpos = (d) -> 7*d
	ypos = (d, t) -> pxPerLine/2 + t*pxPerLine

	lineColor = (c, node) ->
	node
	.attr 'stroke-width', 2
	.attr 'fill', 'none'
	.attr 'stroke', c

	line = d3.svg
	.line()
	.x xpos
	.y ypos
	.interpolate 'basis'

	drawPaths = ->
	lineColor 'brown',
	svg
	.append 'path'
	.attr 'd', line indentations

	# Variable Usage
	useageLine = 6 - 1
	usageCol = [22, 30]
	usageLine = d3.svg
	.line()
	.x xpos
	.y 5 + ypos null, useageLine
	.interpolate 'linear'

	lineColor 'red',
	svg
	.append 'path'
	.attr 'd', usageLine usageCol

	rotate = ->
	code.classed 'rotate', true

	walkPaths = ->
	lineColor 'yellow',
	svg
	.append 'g'
	.attr 'transform', 'translate(10, 0)'
	.append 'path'
	.attr 'd', line indentations
	.transition()
	.duration 1000

	do drawPaths
	setTimeout rotate, 0 #1000
	setTimeout walkPaths, 0 #2000

	</script></body>
	</html>