meetup faces

Built with the pad alpha from @datavis_tech and pasted into blockbuilder.org

the result of some realtime collaborative editing from ~12 Bay Area d3 users at this meetup

<!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>

https://d3js.org/d3.v4.min.js