Skip to content

Instantly share code, notes, and snippets.

@kenpenn

kenpenn/.block

Last active August 9, 2017 10: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/29bc81483a274afec6e440f14c9b51ac to your computer and use it in GitHub Desktop.
Save kenpenn/29bc81483a274afec6e440f14c9b51ac to your computer and use it in GitHub Desktop.
Download ZIP
D3 badge for viSFest 2017
Raw
.block
license: gpl-3.0
width: 1050
height: 1500
Raw
README.md
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>viSFest 2017 badge</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>
<path class="star" d="M32,64 C32,46.326888 46.326888,32 64,32 C46.326888,32 32,17.673112 32,0 C32,17.673112 17.673112,32 0,32 C17.673112,32 32,46.326888 32,64 Z"></path>
</defs>
<style>
.star {
fill: #fff;
stroke: none;
}
.color-orbit {
fill: none;
stroke-width: 8px;
}
.star-orbit {
fill: none;
stroke: none;
}
</style>
<rect id="p-n-1" class="bg-cycler" x="275" y="150" width="45" height="58"></rect>
<rect id="p-n-0" class="bg-cycler" x="220" y="150" width="45" height="58"></rect>
<rect id="p-e" class="bg-cycler" x="165" y="150" width="47" height="58"></rect>
<rect id="p" class="bg-cycler" x="107" y="134" width="53" height="77"></rect>
<rect id="k-n" class="bg-cycler" x="220" y="60" width="45" height="62"></rect>
<rect id="k-e" class="bg-cycler" x="164" y="60" width="47" height="62"></rect>
<rect id="k" class="bg-cycler" x="107" y="42" width="57" height="79"></rect>
<ellipse id="circ-5" class="bg-cycler" cx="1001.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-4" class="bg-cycler" cx="901.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-3" class="bg-cycler" cx="801.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-2" class="bg-cycler" cx="701.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-1" class="bg-cycler" cx="601.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="circ-0" class="bg-cycler" cx="501.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
<ellipse id="@-bg" class="bg-cycler" cx="131.5" cy="248.5" rx="29.5" ry="28.5"></ellipse>
<rect id="rect-top-11" class="bg-cycler" x="819" y="300" width="56" height="30"></rect>
<rect id="rect-top-10" class="bg-cycler" x="760" y="300" width="56" height="30"></rect>
<rect id="rect-top-9" class="bg-cycler" x="701" y="300" width="56" height="30"></rect>
<rect id="rect-top-8" class="bg-cycler" x="642.5" y="300" width="56" height="30"></rect>
<rect id="rect-top-7" class="bg-cycler" x="584" y="300" width="56" height="30"></rect>
<rect id="rect-top-6" class="bg-cycler" x="526" y="300" width="56" height="30"></rect>
<rect id="rect-top-5" class="bg-cycler" x="467.5" y="300" width="56" height="30"></rect>
<rect id="rect-top-4" class="bg-cycler" x="409.5" y="300" width="56" height="30"></rect>
<rect id="rect-top-3" class="bg-cycler" x="351.5" y="300" width="56" height="30"></rect>
<rect id="rect-top-2" class="bg-cycler" x="292.5" y="300" width="56" height="30"></rect>
<rect id="rect-top-1" class="bg-cycler" x="234" y="300" width="56" height="30"></rect>
<rect id="rect-top-0" class="bg-cycler" x="175" y="300" width="56" height="30"></rect>
<rect id="rect-bot-11" class="bg-cycler" x="819" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-10" class="bg-cycler" x="760" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-9" class="bg-cycler" x="701" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-8" class="bg-cycler" x="642.5" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-7" class="bg-cycler" x="584" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-6" class="bg-cycler" x="526" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-5" class="bg-cycler" x="467.5" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-4" class="bg-cycler" x="409.5" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-3" class="bg-cycler" x="351.5" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-2" class="bg-cycler" x="292.5" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-1" class="bg-cycler" x="234" y="1278" width="56" height="30"></rect>
<rect id="rect-bot-0" class="bg-cycler" x="175" y="1278" width="56" height="30"></rect>
<rect id="conf-r-paren" class="bg-cycler" x="853" y="1353" width="22" height="75"></rect>
<rect id="conf-7" class="bg-cycler" x="799" y="1353" width="39" height="66"></rect>
<rect id="conf-1" class="bg-cycler" x="752" y="1353" width="37" height="66"></rect>
<rect id="conf-0" class="bg-cycler" x="702" y="1353" width="39" height="66"></rect>
<rect id="conf-2" class="bg-cycler" x="654" y="1353" width="37" height="66"></rect>
<rect id="conf-l-paren" class="bg-cycler" x="616" y="1353" width="22" height="75"></rect>
<rect id="conf-f" class="bg-cycler" x="560" y="1353" width="35" height="66"></rect>
<rect id="conf-n-1" class="bg-cycler" x="502" y="1369" width="44" height="50"></rect>
<rect id="conf-o" class="bg-cycler" x="458" y="1369" width="44" height="50"></rect>
<rect id="conf-c" class="bg-cycler" x="412" y="1369" width="42" height="50"></rect>
<rect id="conf-n-0" class="bg-cycler" x="363" y="1370" width="44" height="49"></rect>
<rect id="conf-u" class="bg-cycler" x="314" y="1370" width="45" height="49"></rect>
<rect id="conf-dot" class="bg-cycler" x="280" y="1398" width="18" height="18"></rect>
<rect id="conf-3" class="bg-cycler" x="222" y="1353" width="35" height="66"></rect>
<rect id="conf-d" class="bg-cycler" x="172" y="1353" width="44" height="66"></rect>
<g id="orbital-grp"></g>
<g id="stars-grp"></g>
</svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select('svg');
var bgColors = ['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 bgx = 0;
var bgLen = bgColors.length;
var bgCyclers = d3.selectAll('.bg-cycler');
var stopCycling = false;
function setBgColors() {
bgCyclers.each(function() {
bgx = bgx < bgLen ? bgx : 0;
d3.select(this)
.attr('fill', bgColors[bgx])
.datum({'bgx': bgx});
bgx += 1;
});
}
setBgColors();
function cycleBgColors() {
if(stopCycling) { return; }
bgCyclers.each(function(d) {
var idx = d.bgx + 1 < bgLen ? d.bgx + 1 : 0;
d3.select(this)
.attr('fill', bgColors[idx])
.datum({'bgx': idx});
});
setTimeout(cycleBgColors, cycleMS);
}
cycleBgColors();
var ctr = { x: 0, y: 802};
var orbitRx;
var orbitalGrp = d3.select('#orbital-grp');
var starDef = document.querySelector('svg defs .star');
setDims();
function setDims () {
var svgDims = svg.node().getBoundingClientRect();
var rectTopCR = document.querySelector('#rect-top-0').getBoundingClientRect();
var rectBotCR = document.querySelector('#rect-bot-0').getBoundingClientRect();
var orbitY = rectBotCR.top - rectTopCR.bottom;
ctr.x = svgDims.width * 0.5;
orbitRx = (Math.min(ctr.x, orbitY) - 128);
var starDims = starDef.getBoundingClientRect();
}
var starsGrp = d3.select('#stars-grp');
var orbitColors = ['hsl(0, 100%, 50%)','hsl(28, 100%, 50%)','hsl(60, 100%, 50%)','hsl(90, 100%, 50%)','hsl(120, 100%, 50%)','hsl(216, 100%, 50%)','hsl(252, 100%, 50%)','hsl(272, 100%, 50%)','hsl(288, 100%, 50%)','hsl(314, 100%, 50%)'];
var obx = 0;
var obLen = orbitColors.length;
var cycleMS = 200;
function ellipticalPath (cx, cy, rx, ry) {
return 'M' + (cx - rx) + ',' + cy
+ ' a' + rx + ',' + ry
+ ' 0 1,0 ' + (rx * 2) + ',0'
+ ' a' + rx + ',' + ry
+ ' 0 1,0 -' + (rx * 2) + ',0 Z'
}
function setOrbitTransform (idx) {
return 'translate(' + ctr.x + ', ' + ctr.y + ')'
+ ' rotate(' + (idx * 18) + ') ' // 10 colors, 180 / 10
+ ' translate( -' + ctr.x + ', -' + ctr.y + ' )';
}
function cycleOrbits () {
if(stopCycling) { return; }
var orbits = orbitalGrp.selectAll('.color-orbit');
orbits.each(function () {
var orbit = d3.select(this);
var nextColor = orbit.datum().color - 1 < 0 ? obLen - 1 : orbit.datum().color - 1;
orbit
.attr('stroke', orbitColors[nextColor])
.datum({'color': nextColor});
});
var starGrps = d3.selectAll('.star-grp');
starGrps.each(function () {
var starGrp = d3.select(this);
var starOrbit = starGrp.select('.star-orbit');
var len = starOrbit.node().getTotalLength();
var stars = starGrp.selectAll('.star')
stars.each(function () {
var star = d3.select(this);
var step = star.datum().step + 1 < 10 ? star.datum().step + 1 : 0;
var pt = starOrbit.node().getPointAtLength(step * len * .1)
star
.attr('transform', 'translate(' + (pt.x - 32) + ',' + (pt.y - 32) + ')')
.datum({ 'step': step});
});
});
setTimeout(cycleOrbits, cycleMS);
}
function drawOrbits () {
var colorOrbit, starGrp, starOrbit, star0, star1, len, cp5, pt0, pt1;
for (obx; obx < obLen; obx += 1) {
colorOrbit = orbitalGrp.append('path')
.attr('id', 'orbit-' + obx)
.attr('class', 'color-orbit')
.attr('stroke', orbitColors[obx])
.attr('d', ellipticalPath(ctr.x, ctr.y, orbitRx, 192))
.datum({'color': obx});
starGrp = starsGrp.append('g')
.attr('class', 'star-grp');
starOrbit = starGrp.append('path')
.attr('id', 'star-orbit-' + obx)
.attr('class', 'star-orbit')
.attr('d', ellipticalPath(ctr.x, ctr.y, orbitRx, 192));
cp5 = obx + 5 < 10 ? obx + 5 : obx + 5 - 10;
len = starOrbit.node().getTotalLength();
pt0 = starOrbit.node().getPointAtLength(len * obx * .1)
pt1 = starOrbit.node().getPointAtLength(len * cp5 * .1)
star0 = d3.select(starGrp.node().appendChild(starDef.cloneNode(true)))
.attr('id', 'star-' + obx + '-0' )
.attr('transform', 'translate(' + (pt0.x - 32) + ',' + (pt0.y - 32) + ')')
.datum({ 'step': obx});
star1 = d3.select(starGrp.node().appendChild(starDef.cloneNode(true)))
.attr('id', 'star-' + obx + '-1')
.attr('transform', 'translate(' + (pt1.x - 32) + ',' + (pt1.y - 32) + ')')
.datum({ 'step': cp5});
colorOrbit.attr('transform', setOrbitTransform(obx))
starGrp.attr('transform', setOrbitTransform(obx))
}
}
drawOrbits();
setTimeout(cycleOrbits, cycleMS);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment