Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active July 4, 2017 04:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save micahstubbs/d142f8c9a2bd8728fbf686703c642505 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save micahstubbs/d142f8c9a2bd8728fbf686703c642505 to your computer and use it in GitHub Desktop.
Download ZIP
meetup faces
Raw
.block
license: mit
border: no
height: 300
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
svg { margin:3px; }
</style>
</head>
<body>
<script>
// Claimed by Tarek
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid lawngreen');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 40;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 5;
const eyebrowX2 = 60;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by @enjalot
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 30)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -40, y: 70},
{ x: 8, y: 90},
{ x: 30, y: 70}
]))
}());
// Claimed by < senthil >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid steelblue');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < chris>
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < your name here >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 2
0;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < your name here >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < @micahstubbs >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid goldenrod');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 0;
const eyeSize = 20;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed byJonas
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 150)
.attr('height', 150)
.style('border', '3px dashed #ff00ff');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize*0.75)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY-2);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 25;
const eyebrowY1 = 25;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 12)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.7))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < your name here >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < Bo >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 10;
const eyeSize = 10;
const eyeY = 40;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by < your name here >
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 10;
const eyeY = 25;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
// Claimed by vastur
(function (){
const svg = d3.select("body").append("svg")
.attr('width', 100)
.attr('height', 100)
.style('border', '1px solid black');
const g = svg.append('g')
.attr('transform', 'translate(50, 0)');
const eyeSpacing = 20;
const eyeSize = 13;
const eyeY = 20;
const leftEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', -eyeSpacing)
.attr('cy', eyeY);
const rightEye = g.append('circle')
.attr('r', eyeSize)
.attr('cx', eyeSpacing)
.attr('cy', eyeY);
const eyebrowX1 = 10;
const eyebrowX2 = 30;
const eyebrowY1 = 10;
const eyebrowY2 = 10; // Changing this will have great effect.
const leftEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', eyebrowX1)
.attr('x2', eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const rightEyebrow = g.append('line')
.attr('stroke', 'black')
.attr('x1', -eyebrowX1)
.attr('x2', -eyebrowX2)
.attr('y1', eyebrowY1)
.attr('y2', eyebrowY2);
const nose = g.append('circle')
.attr('r', 8)
.attr('cy', 50)
.attr('fill', 'red');
const mouth = g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '3px')
.attr('fill', 'none')
.attr('d', d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCatmullRom.alpha(0.5))
([
{ x: -30, y: 70},
{ x: 0, y: 80},
{ x: 30, y: 70}
]))
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment