Skip to content

Instantly share code, notes, and snippets.

@benlesh

benlesh/index.html

Created January 5, 2015 06:21
Show Gist options
  • Save benlesh/d6097bfdf64de12a63f2 to your computer and use it in GitHub Desktop.
Save benlesh/d6097bfdf64de12a63f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body {
font-family: Sans-serif;
}
.scene {
margin-bottom: 50px;
}
.scene svg {
width: 100%;
height: 260px;
border: 1px solid gray
}
.code {
font-family: Consolas, Courier, Monospaced;
font-size: 14px;
}
</style>
</head>
<body>
<div id="scene1" class="scene">
<h2>Array Filter, Map, Reduce</h2>
<div class="code">
<span class="items">items</span><span class="filter">.filter(notRed)</span><span class="map">.map(toSquare)</span><span class="reduce">.reduce(toStack, stack)</span>
</div>
<svg>
</svg>
</div>
<div id="scene2" class="scene">
<h2>Streaming Filter, Map, Reduce</h2>
<div class="code">
<span class="items">items</span><span class="filter">.filter(notRed)</span><span class="map">.map(toSquare)</span><span class="reduce">.reduce(toStack, stack)</span>
</div>
<svg>
</svg>
</div>
<script id="jsbin-javascript">
console.clear();
var items = d3.range(0, 10).map(function(n) {
return {
id: n,
type: 'circle',
color: getColor(n)
};
});
function getColor(n) {
switch(n % 3) {
case 1:
return 'red';
case 2:
return 'green';
case 0:
return 'blue';
}
}
function startArrayBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var filteredItems = items.filter(notRed);
var filtering = cloneAll(scene, '.item').data(items)
.attr('class', 'filtering')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code .filter')
.style('background-color', 'lime');
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d,i) {
return 5 + i * 25;
})
.attr('class', 'filtered')
.call(endall, function(){
cloneAll(scene, '.filtered').data(filteredItems)
.attr('class', 'mapped')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function() {
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.call(endall, function(){
cloneAll(scene, '.mapped').data(filteredItems)
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d,i) {
return 5 + i * 20;
});
});
});
}
function cloneAll(parent, selector) {
var nodes = parent.selectAll(selector);
nodes.each(function(d, i) {
nodes[0][i] = this.parentNode.insertBefore(this.cloneNode(true),
this.nextSibling);
});
return nodes;
}
function endall(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each("end", function() { if (!--n) callback.apply(this, arguments); });
}
function notRed(d) {
return d.color !== 'red';
}
function startObservableBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var delay = 0;
cloneAll(scene, '.item').data(items)
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .filter')
.style('background-color', 'lime');
})
.delay(function(d, i) {
var result = delay;
if(notRed(d)) {
delay += 1500;
}
return result;
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.transition().duration(500)
.each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d, i) {
return 5 + i * 20;
});
}
startArrayBased('#scene1', items.slice());
startObservableBased('#scene2', items);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="scene1" class="scene">
<h2>Array Filter, Map, Reduce</h2>
<div class="code">
<span class="items">items</span><span class="filter">.filter(notRed)</span><span class="map">.map(toSquare)</span><span class="reduce">.reduce(toStack, stack)</span>
</div>
<svg>
</svg>
</div>
<div id="scene2" class="scene">
<h2>Streaming Filter, Map, Reduce</h2>
<div class="code">
<span class="items">items</span><span class="filter">.filter(notRed)</span><span class="map">.map(toSquare)</span><span class="reduce">.reduce(toStack, stack)</span>
</div>
<svg>
</svg>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
font-family: Sans-serif;
}
.scene {
margin-bottom: 50px;
}
.scene svg {
width: 100%;
height: 260px;
border: 1px solid gray
}
.code {
font-family: Consolas, Courier, Monospaced;
font-size: 14px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var items = d3.range(0, 10).map(function(n) {
return {
id: n,
type: 'circle',
color: getColor(n)
};
});
function getColor(n) {
switch(n % 3) {
case 1:
return 'red';
case 2:
return 'green';
case 0:
return 'blue';
}
}
function startArrayBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var filteredItems = items.filter(notRed);
var filtering = cloneAll(scene, '.item').data(items)
.attr('class', 'filtering')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code .filter')
.style('background-color', 'lime');
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d,i) {
return 5 + i * 25;
})
.attr('class', 'filtered')
.call(endall, function(){
cloneAll(scene, '.filtered').data(filteredItems)
.attr('class', 'mapped')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function() {
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.call(endall, function(){
cloneAll(scene, '.mapped').data(filteredItems)
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d,i) {
return 5 + i * 20;
});
});
});
}
function cloneAll(parent, selector) {
var nodes = parent.selectAll(selector);
nodes.each(function(d, i) {
nodes[0][i] = this.parentNode.insertBefore(this.cloneNode(true),
this.nextSibling);
});
return nodes;
}
function endall(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each("end", function() { if (!--n) callback.apply(this, arguments); });
}
function notRed(d) {
return d.color !== 'red';
}
function startObservableBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var delay = 0;
cloneAll(scene, '.item').data(items)
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .filter')
.style('background-color', 'lime');
})
.delay(function(d, i) {
var result = delay;
if(notRed(d)) {
delay += 1500;
}
return result;
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.transition().duration(500)
.each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d, i) {
return 5 + i * 20;
});
}
startArrayBased('#scene1', items.slice());
startObservableBased('#scene2', items);
</script></body>
</html>
Raw
jsbin.kirigu.css
body {
font-family: Sans-serif;
}
.scene {
margin-bottom: 50px;
}
.scene svg {
width: 100%;
height: 260px;
border: 1px solid gray
}
.code {
font-family: Consolas, Courier, Monospaced;
font-size: 14px;
}
Raw
jsbin.kirigu.js
console.clear();
var items = d3.range(0, 10).map(function(n) {
return {
id: n,
type: 'circle',
color: getColor(n)
};
});
function getColor(n) {
switch(n % 3) {
case 1:
return 'red';
case 2:
return 'green';
case 0:
return 'blue';
}
}
function startArrayBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var filteredItems = items.filter(notRed);
var filtering = cloneAll(scene, '.item').data(items)
.attr('class', 'filtering')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code .filter')
.style('background-color', 'lime');
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d,i) {
return 5 + i * 25;
})
.attr('class', 'filtered')
.call(endall, function(){
cloneAll(scene, '.filtered').data(filteredItems)
.attr('class', 'mapped')
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function() {
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.call(endall, function(){
cloneAll(scene, '.mapped').data(filteredItems)
.transition().duration(500)
.delay(function(d,i) { return i * 500; })
.each(function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d,i) {
return 5 + i * 20;
});
});
});
}
function cloneAll(parent, selector) {
var nodes = parent.selectAll(selector);
nodes.each(function(d, i) {
nodes[0][i] = this.parentNode.insertBefore(this.cloneNode(true),
this.nextSibling);
});
return nodes;
}
function endall(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each("end", function() { if (!--n) callback.apply(this, arguments); });
}
function notRed(d) {
return d.color !== 'red';
}
function startObservableBased(sceneSelector, items) {
var scene = d3.select(sceneSelector);
var svg = scene.select('svg');
svg.selectAll('.item')
.data(items)
.enter()
.append('rect')
.attr('x', 5)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.attr('width', 20)
.attr('height', 20)
.attr('rx', 20)
.attr('ry', 20)
.attr('class', 'item')
.style('fill', function(d) { return d.color; });
var delay = 0;
cloneAll(scene, '.item').data(items)
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .filter')
.style('background-color', 'lime');
})
.delay(function(d, i) {
var result = delay;
if(notRed(d)) {
delay += 1500;
}
return result;
})
.filter(notRed)
.attr('x', 155)
.attr('y', function(d, i) {
return 5 + i * 25;
})
.transition().duration(500).each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .map')
.style('background-color', 'lime');
})
.attr('x', 305)
.attr('rx', 0)
.attr('ry', 0)
.transition().duration(500)
.each('start', function(){
scene.selectAll('.code span')
.style('background-color', '');
scene.selectAll('.code > .reduce')
.style('background-color', 'lime');
})
.attr('x', 455)
.attr('y', function(d, i) {
return 5 + i * 20;
});
}
startArrayBased('#scene1', items.slice());
startObservableBased('#scene2', items);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment