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
license: mit | |
border: no | |
height: 300 |
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> |