Skip to content

Instantly share code, notes, and snippets.

@kenpenn

kenpenn/.block

Last active July 9, 2017 17:08
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/b557ce50c952677e29354bc3c81f4c93 to your computer and use it in GitHub Desktop.
Save kenpenn/b557ce50c952677e29354bc3c81f4c93 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Logo for viSFest 2016
Raw
.block
license: gpl-3.0
height: 500
Raw
README.md

Created for d3 VisFest unconf 2016

uses forceSimulation and transitions.

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>
<svg width="960px" height="500px" viewBox="0 0 960 500" 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>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
var svg = d3.select('svg');
var points = [[465.500,366.708], [401.833,303.042], [410.332,287.251], [415.153,269.188], [415.153,250], [415.153,188.095], [364.970,137.912], [303.065,137.912], [269,137.912], [269,50], [303.065,50], [413.522,50], [503.065,139.543], [503.065,250], [503.065,293.558], [489.141,333.863], [465.500,366.708], [465.500,366.708], [429.192,417.153], [369.964,450], [303.065,450], [269,450], [269,362.087], [303.065,362.087], [345.781,362.087], [382.916,338.193], [401.833,303.042], [465.500,366.708], [688.732,349.524], [694.983,314.612], [685.780,278.070], [662.421,250], [692.686,213.630], [699.187,163.040], [679.103,120.200], [659.019,77.360], [615.973,49.999], [568.659,50], [428,50], [428,50], [462.611,71.680], [491.004,101.971], [510.401,137.912], [568.654,137.912], [580.825,137.912], [592.071,144.405], [598.156,154.945], [604.242,165.485], [604.242,178.470], [598.156,189.010], [592.071,199.551], [580.825,206.043], [568.654,206.043], [545.252,206.043], [688.732,349.524], [545.252,206.043], [689.029,349.821], [687.173,360.040], [683.992,370.117], [679.453,379.799], [659.369,422.639], [616.323,450.000], [569.009,450], [548.791,450], [491.233,392.441], [498.479,382.870], [505.009,372.726], [510.751,362.087], [569.004,362.087], [581.175,362.087], [592.421,355.594], [598.506,345.054], [604.592,334.514], [604.592,321.529], [598.506,310.989], [592.421,300.448], [581.175,293.956], [569.004,293.956], [534.938,293.956], [540.445,264.910], [540.445,235.089], [534.938,206.043], [545.252,206.043], [548.791,450], [428,450], [452.437,434.692], [473.774,415.092], [491.034,392.242], [548.791,450]];
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 = [];
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( 480, 250 ))
.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(480,250)')
.attr('opacity', 1);
sim
.nodes(circles)
.on('tick', function() {
circs
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
})
.on('end', function() {
circs.each(function(p, i) {
d3.select(this)
.transition()
.duration(500)
.attr('transform', function(d) {
return 'translate(' + d.reqX + ',' + d.reqY + ')';
})
.on('end', function () {
if (i + 1 == cLen) {
blowUpCircs();
appendPaths();
}
});
});
});
function blowUpCircs() {
circs
.transition()
.delay(200)
.duration(1000)
.attr('r', 30)
.attr('opacity', 0);
}
function appendPaths() {
var paths = [{ id: 'dee-top', style: 'fill:url(#lg-dt)', points: [['M465.500', 366.708], ['L401.833', 303.042], ['C410.332', 287.251], [415.153, 269.188], [415.153, 250], ['C415.153', 188.095], [364.970, 137.912], [303.065, 137.912], ['L269', 137.912], ['L269', 50], ['L303.065', 50], ['C413.522', 50], [503.065, 139.543], [503.065, 250], ['C503.065', 293.558], [489.141, 333.863], [465.500, 366.708]] }, { id: 'dee-bottom', style: 'fill:url(#lg-b)', points: [['M465.500', 366.708], ['C429.192', 417.153], [369.964, 450], [303.065, 450], ['L269', 450], ['L269', 362.087], ['L303.065', 362.087], ['C345.781', 362.087], [382.916, 338.193], [401.833, 303.042], ['L465.500', 366.708]] }, { id: 'three-top', style: 'fill:url(#lg-3t)', points: [['M688.732', 349.524], ['C694.983', 314.612], [685.780, 278.070], [662.421, 250], ['C692.686', 213.630], [699.187, 163.040], [679.103, 120.200], ['C659.019', 77.360], [615.973, 49.999], [568.659, 50], ['L428', 50], ['L428', 50], ['C462.611', 71.680], [491.004, 101.971], [510.401, 137.912], ['L568.654', 137.912], ['C580.825', 137.912], [592.071, 144.405], [598.156, 154.945], ['C604.242', 165.485], [604.242, 178.470], [598.156, 189.010], ['C592.071', 199.551], [580.825, 206.043], [568.654, 206.043], ['L545.252', 206.043], ['L688.732', 349.524]] }, { id: 'three-mid', style: 'fill:url(#lg-3m)', points: [['M545.252', 206.043], ['L689.029', 349.821], ['C687.173', 360.040], [683.992, 370.117], [679.453, 379.799], ['C659.369', 422.639], [616.323, 450.000], [569.009, 450], ['L548.791', 450], ['L491.233', 392.441], ['C498.479', 382.870], [505.009, 372.726], [510.751, 362.087], ['L569.004', 362.087], ['C581.175', 362.087], [592.421, 355.594], [598.506, 345.054], ['C604.592', 334.514], [604.592, 321.529], [598.506, 310.989], ['C592.421', 300.448], [581.175, 293.956], [569.004, 293.956], ['L534.938', 293.956], ['C540.445', 264.910], [540.445, 235.089], [534.938, 206.043], ['L545.252', 206.043]] }, { id: 'three-bottom', style: 'fill:url(#lg-b)', points: [['M688.732', 349.524], ['M548.791', 450], ['L428', 450], ['C452.437', 434.692], [473.774, 415.092], [491.034, 392.242], ['L548.791', 450]] }];
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)
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment