Thanking all the people who contributed to my OpenVisConf talk
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
background: #3949ab;
}
svg text {
font-family: 'Source Code Pro', monospace;
font-size: 18px;
fill: #fff;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var names = [
"Chris Olah","Shan Carter","Zan Armstrong", "David Ha", "Jonas Jongejan", "Jason Schwarz","Ryan Kuykendall","Erik Hazzard","Siu-Mei Man","Ludwig Schubert","Katherine Lee","Nathan Crock", "Kyle McDonald", "Micah Stubbs", "Arvind Satyanarayan"
]
var ids = "5098987763793920,6682757910495232,4545109116846080,6529493533458432,4932097414266880,5507297637826560,5064963418750976,5122567050362880,4984112706224128,5886531254353920,5747162518388736,5419909200740352,5165804989448192,5845341930782720,5585836986859520,4560494042021888,6298373424414720,5305625821052928,6593072550903808,5861157443207168,5604194968928256,6492237875642368,5305154452586496,4717305059606528,5340595260227584,4708285796057088,5025701981847552,4517058685435904,4913235931168768,5862789061017600,6380339431735296,5284286225711104,5415526853509120,5404815746138112,5407947981062144,4990506222223360,5265937638883328,6021880085479424,6306384406642688,5602879417090048".split(",")
drawingLine = d3.line()
.x(function(d) { return d.x })
.y(function(d) { return d.y })
.curve(d3.curveBasis)
d3.json("https://storage.googleapis.com/quickdraw-data/words/grid-tiger/tiger_-11.98_14.4_1.25.json", function(err, data) {
console.log("data", data)
var drawings = {}
data.forEach(function(d) { drawings[d.key_id] = d})
//console.log("drawings", drawings)
var n = 4
var dx = 245
var dy = 100
var size = 50
var scale = size/300
var gthanks = svg.selectAll("g.thank").data(names)
.enter().append("g").classed("thank", true)
.attr("transform", function(d,i) {
var x = 20 + (i % n) * dx
var y = dy/2 + Math.floor(i/n) * dy
return `translate(${x}, ${y})`
})
gthanks.append("text").text(function(d) { return d })
.attr("dx", size + 5)
.attr("dy", size * .61)
gthanks.append("g").selectAll("path").data(function(d,i) {
var drawing = drawings[ids[i + 22]]
//console.log(i, ids[i], drawing)
var strokes = center(strokifyDrawing(drawing).strokes,size,size,scale * 1.05)
return strokes
})
.enter().append("path")
.attr("d", drawingLine)
.attr("stroke", "#fff")
.attr("fill", "none")
})
function strokifyDrawing(d) {
var drawing = JSON.parse(JSON.stringify(d)) //well that's one way to copy
var strokes = d.drawing.map(function(s) {
var points = []
s[0].forEach(function(x,i) {
points.push({x: x, y: s[1][i] })
})
return points;
})
drawing.strokes = strokes;
return drawing
}
function center(strokes, width, height, scale) {
var minY = Infinity
var maxY = -Infinity
var minX = Infinity
var maxX = -Infinity
var centroidX = 0
var centroidY = 0
var count = 0
var newstrokes = []
strokes.forEach(function(stroke) {
stroke.forEach(function(p) {
centroidX += p.x
centroidY += p.y
count++
})
})
centroidX /= count;
centroidY /= count;
strokes.forEach(function(stroke) {
var newstroke = []
stroke.forEach(function(op) {
var p = {
x: op.x,
y: op.y
}
p.x *= scale
p.y *= scale
p.x += width/2 - centroidX * scale
p.y += height/2 - centroidY * scale
if(p.y < minY) minY = p.y
if(p.y > maxY) maxY = p.y
if(p.x < minX) minX = p.x
if(p.x > maxX) maxX = p.x
newstroke.push(p)
})
newstrokes.push(newstroke)
})
var diffX = minX - (width - maxX)
var diffY = minY - (height - maxY)
newstrokes.forEach(function(stroke) {
stroke.forEach(function(p) {
p.x -= diffX/2
p.y -= diffY/2
})
})
return newstrokes
}
</script>
</body>