Skip to content

Instantly share code, notes, and snippets.

@kenpenn

kenpenn/.block

Last active July 9, 2017 17:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kenpenn/02163b2968906ad90857cdf681c0304b to your computer and use it in GitHub Desktop.
Save kenpenn/02163b2968906ad90857cdf681c0304b to your computer and use it in GitHub Desktop.
Download ZIP
D3 badge for viSFest 2016
Raw
.block
license: gpl-3.0
height: 1475
Raw
README.md

Badge for d3 viSFest unconf 2016

uses forceSimulation and transitions.

tweaked for badgetron using blockbuilder

Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>unconf d3</title>
<style>
body {margin:0;}
svg { background: #000; }
</style>
</head>
<body>
<div>
<svg width="1050px" height="1500px" viewBox="0 0 1050 1500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="lg-dt" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#f26d58"></stop>
<stop offset="1" stop-color="#f9a03c"></stop>
</linearGradient>
<linearGradient id="lg-b" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#f9a03c"></stop>
<stop offset="1" stop-color="#f7974e"></stop>
</linearGradient>
<linearGradient id="lg-3t" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#b84e51"></stop>
<stop offset="1" stop-color="#f68e48"></stop>
</linearGradient>
<linearGradient id="lg-3m" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#f68a49"></stop>
<stop offset="1" stop-color="#f9a03C"></stop>
</linearGradient>
</defs>
<rect id="p-n-1" class="cycler" x="497" y="79" width="55" height="71"></rect>
<rect id="p-n-0" class="cycler" x="430" y="78" width="56" height="72"></rect>
<rect id="p-e" class="cycler" x="364" y="79" width="59" height="71"></rect>
<rect id="p" class="cycler" x="292" y="57" width="68" height="93"></rect>
<rect id="k-n" class="cycler" x="195" y="79" width="55" height="71"></rect>
<rect id="k-e" class="cycler" x="129" y="79" width="59" height="71"></rect>
<rect id="k" class="cycler" x="61" y="57" width="68" height="93"></rect>
<ellipse id="circ-5" class="cycler" cx="975.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-4" class="cycler" cx="875.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-3" class="cycler" cx="775.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-2" class="cycler" cx="675.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-1" class="cycler" cx="575.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-0" class="cycler" cx="475.5" cy="190.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="octokitty" class="cycler" cx="80.5" cy="186.5" rx="29.5" ry="28.5"></ellipse>
<rect id="rect-top-11" class="cycler" x="819" y="240" width="56" height="30"></rect>
<rect id="rect-top-10" class="cycler" x="760" y="240" width="56" height="30"></rect>
<rect id="rect-top-9" class="cycler" x="701" y="240" width="56" height="30"></rect>
<rect id="rect-top-8" class="cycler" x="642.5" y="240" width="56" height="30"></rect>
<rect id="rect-top-7" class="cycler" x="584" y="240" width="56" height="30"></rect>
<rect id="rect-top-6" class="cycler" x="526" y="240" width="56" height="30"></rect>
<rect id="rect-top-5" class="cycler" x="467.5" y="240" width="56" height="30"></rect>
<rect id="rect-top-4" class="cycler" x="409.5" y="240" width="56" height="30"></rect>
<rect id="rect-top-3" class="cycler" x="351.5" y="240" width="56" height="30"></rect>
<rect id="rect-top-2" class="cycler" x="292.5" y="240" width="56" height="30"></rect>
<rect id="rect-top-1" class="cycler" x="234" y="240" width="56" height="30"></rect>
<rect id="rect-top-0" class="cycler" x="175" y="240" width="56" height="30"></rect>
<rect id="rect-bot-11" class="cycler" x="819" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-10" class="cycler" x="760" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-9" class="cycler" x="701" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-8" class="cycler" x="642.5" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-7" class="cycler" x="584" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-6" class="cycler" x="526" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-5" class="cycler" x="467.5" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-4" class="cycler" x="409.5" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-3" class="cycler" x="351.5" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-2" class="cycler" x="292.5" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-1" class="cycler" x="234" y="1160" width="56" height="30"></rect>
<rect id="rect-bot-0" class="cycler" x="175" y="1160" width="56" height="30"></rect>
<rect id="conf-r-para" class="cycler" x="853" y="1235" width="22" height="75"></rect>
<rect id="conf-6" class="cycler" x="799" y="1235" width="39" height="66"></rect>
<rect id="conf-1" class="cycler" x="753" y="1235" width="37" height="66"></rect>
<rect id="conf-0" class="cycler" x="703" y="1235" width="39" height="66"></rect>
<rect id="conf-2" class="cycler" x="655" y="1235" width="37" height="66"></rect>
<rect id="conf-l-para" class="cycler" x="617" y="1235" width="22" height="75"></rect>
<rect id="conf-f" class="cycler" x="560" y="1235" width="35" height="66"></rect>
<rect id="conf-n-1" class="cycler" x="513" y="1251" width="35" height="50"></rect>
<rect id="conf-o" class="cycler" x="462" y="1251" width="41" height="50"></rect>
<rect id="conf-c" class="cycler" x="417" y="1251" width="36" height="50"></rect>
<rect id="conf-n-0" class="cycler" x="368" y="1252" width="36" height="49"></rect>
<rect id="conf-u" class="cycler" x="320" y="1252" width="35" height="49"></rect>
<rect id="conf-dot" class="cycler" x="284" y="1282" width="13" height="18"></rect>
<rect id="conf-3" class="cycler" x="223" y="1235" width="38" height="66"></rect>
<rect id="conf-d" class="cycler" x="174" y="1235" width="39" height="66"></rect>
<rect id="s" class="cycler" x="628" y="1359" width="30" height="38"></rect>
<rect id="i" class="cycler" x="605" y="1359" width="9" height="38"></rect>
<rect id="t" class="cycler" x="560" y="1359" width="30" height="38"></rect>
<rect id="e" class="cycler" x="519" y="1359" width="28" height="38"></rect>
<rect id="m" class="cycler" x="465" y="1359" width="37" height="38"></rect>
<polygon id="hex-5" class="cycler" points="411.013733 1378.90385 373.699893 1400.62824 374.228768 1354.1713"></polygon>
<polygon id="hex-4" class="cycler" points="411.013733 1378.90385 411 1423.42719 373.555565 1400.32081"></polygon>
<polygon id="hex-3" class="cycler" points="411.013733 1378.90385 446.684601 1399.91155 410.739929 1423.08614"></polygon>
<polygon id="hex-2" class="cycler" points="411.013733 1378.90385 446.653956 1354.49653 447.378564 1400.59661"></polygon>
<polygon id="hex-1" class="cycler" points="411.013733 1378.90385 411.013733 1331.59774 446.653956 1354.49653"></polygon>
<polygon id="hex-0" class="cycler" points="411.013733 1378.90385 373.841256 1354.7496 411.013733 1331.59774"></polygon>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
var start = Date.now();
var svg = d3.select('svg');
var cyclerColors = ['hsl(273, 100%, 50%)', 'hsl(212, 100%, 50%)', 'hsl(127, 100%, 50%)', 'hsl(52, 100%, 50%)', 'hsl(35, 100%, 50%)', 'hsl(341, 100%, 50%)'];
var cyx = 0;
var cyLen = cyclerColors.length;
var cyclers = d3.selectAll('.cycler');
var points = [[500.948995,905.346405], [395.340687,799.738097], [409.437025,773.544805], [417.43529,743.583227], [417.43529,711.753555], [417.43529,609.068457], [334.192571,525.825738], [231.507474,525.825738], [175,525.825738], [175,380], [231.507474,380], [414.729902,380], [563.261028,528.531126], [563.261028,711.753555], [563.261028,784.006278], [540.163333,850.864247], [500.948995,905.346405], [500.948995,905.276555], [440.721461,988.953248], [342.477178,1043.43726], [231.507474,1043.43726], [175,1043.43726], [175,897.61152], [231.507474,897.61152], [302.362898,897.61152], [363.961099,857.976633], [395.340687,799.668246], [500.948995,905.276555],[871.239524,876.842108], [881.607931,818.931422], [866.342126,758.316347], [827.595698,711.753555], [877.796722,651.425417], [888.581847,567.508324], [855.267199,496.446652], [821.95255,425.38498], [750.548548,379.999234], [672.065257,380], [438.744076,380], [438.744076,380], [496.156385,415.962562], [543.253253,466.20887], [575.429457,525.825738], [672.057966,525.825738], [692.246142,525.825738], [710.900786,536.596001], [720.994874,554.079475], [731.088963,571.562948], [731.088963,593.103476], [720.994874,610.586949], [710.900786,628.070422], [692.246142,638.840686], [672.057966,638.840685], [633.238095,638.840685], [871.239523,876.842113],[634.495842,638.840685], [871.475641,875.820485], [868.44033,893.290466], [863.075829,910.523553], [855.323111,927.060457], [822.008462,998.122129], [750.60446,1043.50788], [672.121169,1043.50711], [639.12732,1043.50711], [543.343182,947.722971], [555.269613,931.93619], [566.02272,915.214001], [575.485369,897.681371], [672.113878,897.681371], [692.302054,897.681371], [710.956698,886.911108], [721.050787,869.427634], [731.144875,851.944161], [731.144875,830.403633], [721.050787,812.92016], [710.956698,795.436687], [692.302054,784.666423], [672.113878,784.666424], [615.606404,784.666424], [624.739964,736.486894], [624.739964,687.020215], [615.606404,638.840685], [634.495842,638.840685]];
var ptLen = points.length;
var colors = ['hsl(341, 100%, 50%)', 'hsl(359, 100%, 50%)', 'hsl(18, 100%, 50%)', 'hsl(35, 100%, 50%)', 'hsl(52, 100%, 50%)', 'hsl(83, 100%, 50%)', 'hsl(127, 100%, 50%)', 'hsl(160, 100%, 50%)', 'hsl(190, 100%, 50%)', 'hsl(212, 100%, 50%)', 'hsl(227, 100%, 50%)', 'hsl(242, 100%, 50%)', 'hsl(259, 100%, 50%)', 'hsl(273, 100%, 50%)', 'hsl(296, 100%, 50%)'];
var cLen = colors.length;
var clx = 0;
var circles = [];
var stopCycling = false;
//console.log(cyclerColors.reverse());
function setCycleColors() {
cyclers.each(function() {
cyx = cyx < cyLen ? cyx : 0;
d3.select(this)
.attr('fill', cyclerColors[cyx])
.datum({'cyx': cyx});
cyx += 1;
});
}
setCycleColors();
function cycleColors() {
if(stopCycling) { return; }
cyclers.each(function(d) {
var idx = d.cyx + 1 < cyLen ? d.cyx + 1 : 0;
d3.select(this)
.attr('fill', cyclerColors[idx])
.datum({'cyx': idx});
});
setTimeout(cycleColors, 200);
}
cycleColors();
points.forEach(function(point) {
clx = clx < cLen ? clx : 0;
var circle = {};
circle.reqX = point[0];
circle.reqY = point[1];
circle.fill = colors[clx];
circles.push(circle);
clx += 1;
});
var sim = d3.forceSimulation()
.force('charge', d3.forceManyBody().distanceMax(50))
.force('center', d3.forceCenter( 525, 737 ))
.alphaDecay(0.06);
var circs = svg.selectAll('circle')
.data(circles)
.enter()
.append('circle')
.attr('r', 5)
.attr('fill', function(d) { return d.fill })
.attr('transform', 'translate(525,750)')
.attr('opacity', 1);
sim
.nodes(circles)
.on('tick', function() {
circs
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
})
.on('end', function() {
var elapsed = Date.now() - start;
console.log('force end: ' + elapsed + 'ms');
circs.each(function(p, i) {
d3.select(this)
.transition()
.duration(300)
.attr('transform', function(d) {
return 'translate(' + d.reqX + ',' + d.reqY + ')';
})
.on('end', function () {
var elapsed = Date.now() - start;
if (i + 1 == cLen) {
console.log('move end: ' + elapsed + 'ms');
blowUpCircs();
appendPaths();
}
});
});
});
function blowUpCircs() {
var px = 0;
circs
.transition()
.delay(200)
.duration(700)
.attr('r', 30)
.attr('opacity', 0)
.on('end', function () {
var elapsed = Date.now() - start;
px += 1;
if (px == ptLen) {
console.log('blowup end: ' + elapsed + 'ms');
}
});
}
function appendPaths() {
var paths = [
{ id: "dee-top", style: "fill:url(#lg-dt)", points: [["M500.948995","905.346405"], ["L395.340687","799.738097"], ["C409.437025","773.544805"], ["417.43529","743.583227"], ["417.43529","711.753555"], ["C417.43529","609.068457"], ["334.192571","525.825738"], ["231.507474","525.825738"], ["L175","525.825738"], ["L175","380"], ["L231.507474","380"], ["C414.729902","380"], ["563.261028","528.531126"], ["563.261028","711.753555"], ["C563.261028","784.006278"], ["540.163333","850.864247"], ["500.948995","905.346405"]] },
{ id: "dee-bottom", style: "fill:url(#lg-b)", points: [["M500.948995","905.276555"], ["C440.721461","988.953248"], ["342.477178","1043.43726"], ["231.507474","1043.43726"], ["L175","1043.43726"], ["L175","897.61152"], ["L231.507474","897.61152"], ["C302.362898","897.61152"], ["363.961099","857.976633"], ["395.340687","799.668246"], ["L500.948995","905.276555"]] },
{ id: "three-top", style: "fill:url(#lg-3t)", points: [["M871.239524","876.842108"], ["C881.607931","818.931422"], ["866.342126","758.316347"], ["827.595698","711.753555"], ["C877.796722","651.425417"], ["888.581847","567.508324"], ["855.267199","496.446652"], ["C821.95255","425.38498"], ["750.548548","379.999234"], ["672.065257","380"], ["L438.744076","380"], ["L438.744076","380"], ["C496.156385","415.962562"], ["543.253253","466.20887"], ["575.429457","525.825738"], ["L672.057966","525.825738"], ["C692.246142","525.825738"], ["710.900786","536.596001"], ["720.994874","554.079475"], ["C731.088963","571.562948"], ["731.088963","593.103476"], ["720.994874","610.586949"], ["C710.900786","628.070422"], ["692.246142","638.840686"], ["672.057966","638.840685"], ["L633.238095","638.840685"], ["L871.239523","876.842113"]] },
{ id: "three-mid", style: "fill:url(#lg-3m)", points: [["M634.495842","638.840685"], ["L871.475641","875.820485"], ["C868.44033","893.290466"], ["863.075829","910.523553"], ["855.323111","927.060457"], ["C822.008462","998.122129"], ["750.60446","1043.50788"], ["672.121169","1043.50711"], ["L639.12732","1043.50711"], ["L543.343182","947.722971"], ["C555.269613","931.93619"], ["566.02272","915.214001"], ["575.485369","897.681371"], ["L672.113878","897.681371"], ["C692.302054","897.681371"], ["710.956698","886.911108"], ["721.050787","869.427634"], ["C731.144875","851.944161"], ["731.144875","830.403633"], ["721.050787","812.92016"], ["C710.956698","795.436687"], ["692.302054","784.666423"], ["672.113878","784.666424"], ["L615.606404","784.666424"], ["C624.739964","736.486894"], ["624.739964","687.020215"], ["615.606404","638.840685"], ["L634.495842","638.840685"]] },
{ id: "three-bottom", style: "fill:url(#lg-b)", points: [["M639.109699","1043.50711"], ["L438.744076","1043.50711"], ["C479.279866","1018.11585"], ["514.673385","985.604107"], ["543.303748","947.701158"], ["L639.109699","1043.50711"]] }
];
var pax = 0;
var paLen = paths.length;
paths.forEach(function(path) {
var d = '';
var logoEl;
path.points.forEach(function(point){
d += point[0] + ',' + point[1] + ' ';
});
d += ' Z';
logoEl = svg.append('path')
.attr('id', path.id)
.attr('style', path.style)
.attr('opacity', 0)
.attr('d', d);
logoEl
.transition()
.delay(600)
.duration(600)
.attr('opacity', 1)
.on('end', function() {
var elapsed = Date.now() - start;
pax += 1;
if (pax == paLen) {
console.log('logo end: ' + elapsed + 'ms');
stopCycling = true;
}
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment