Skip to content

Instantly share code, notes, and snippets.

@togakangaroo

togakangaroo/index.html

Forked from anonymous/index.html
Created November 7, 2014 15:17
Show Gist options
  • Save togakangaroo/14d8962aeb3d0a325fb2 to your computer and use it in GitHub Desktop.
Save togakangaroo/14d8962aeb3d0a325fb2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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;
}
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment