D3 Examples - ascii-animation

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500" rel="stylesheet" type="text/css">
​
<style>
body{
    margin: 0px;
    font: 10px;
  font-family: 'Roboto Mono', monospace;;
}
​
div{
    width: 70em;
}
​
</style>
​
<body>
​
<div>
​
​
</div>
​
<pre id='trump'></pre>
<pre id='graph'></pre>
​
​
</body>
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
​
​
<script>
​
d3.xhr('raw2.txt', function(res){
    raw = res
    rawText = res.responseText
​
    var slides = rawText.split('--**').filter(ƒ()).reverse()
​
    var curI = 0
    setInterval(function(){
        d3.select('#graph').text(slides[curI])
        curI = (curI + 1) % slides.length
    }, 500)
​
})
​
​
d3.xhr('trump.txt', function(res){
    raw = res
    rawText = res.responseText
​
    lines = rawText.split('\n')
​
    var curI = 0
    setInterval(function(){
        d3.select('#trump').text(lines.join('\n'))
        curI = (curI + 1) % (lines.length*3)
​
        if (!lines[curI]) return 
        lines[curI] = lines[curI].split('').reverse().join('')
                .replace(/\//g, "z")
                .replace(/\\/g, "/")
                .replace(/z/g, "\\")
    }, 100)
​
})
​
​
​
</script>
    