enjalot/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Thanking all the people who contributed to my OpenVisConf talk

Built with blockbuilder.org

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>