enjalot/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    thing 0003

playing with latent vectors. didn't get to where I thought I'd be, but its a start.
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
      background: #222;
    }
  </style>
</head>

<body>
  <script>
    var width = 960
    var height = 500
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)


    var drawingLine = d3.line()
    .x(function(d) { return d.x })
    .y(function(d) { return d.y })
    .curve(d3.curveBasis)

    var q = d3.queue()
    q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-left-drawings.json")
    q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-left-encodings_a.json?q=1")
    q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-perspective-left-drawings.json?q=1")
    q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-perspective-left-encodings_a.json?q=1")
    //q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-right-drawings.json")
		q.awaitAll(function(err, results) {
      console.log("results", results)
      var chairsLeft = results[0]
      var chairsLeftEncodings = results[1]
      var chairsPerspective = results[2]
      var chairsPerspectiveEncodings = results[3]
      chairsLeft.forEach(function(d,i) {
        d.e = chairsLeftEncodings[i].e
      })
      chairsPerspective.forEach(function(d,i) {
        d.e = chairsPerspectiveEncodings[i].e
      })
      var chairs = chairsLeft.concat(chairsPerspective.slice(0,29))
      chairs.forEach(strokifyDrawing)

      var randomg = svg.selectAll("g.random")
        .data(chairs)

      var cellSize = 3;
      var renter = randomg.enter().append("g").classed("random", true)
      var cols = 29
      renter.attr("transform", function(d,i) {
        var x = 15 + 32 * (i % cols);
        var y = 45 + 250 * Math.floor(i / cols);
        return "translate(" + [x, y] + ")"
      })
      .each(function(d,i) {
        //console.log(d)
        var s = new strip()
        .data(d.e)
        .cellWidth(cellSize)
        .cellHeight(1.5)
        .onChange(function(data) {
          rerender();
          updateExplanation();
        })
        .update(d3.select(this))

        d3.select(this)
          .selectAll("path.stroke").data(d.strokes)
          .enter().append("path").classed("stroke", true)
          .attr("d", drawingLine)
          .style("stroke", "#ffefa8")
          .style("stroke-width", 5)
          .style("fill", "none")
          .attr("transform", "translate(5,-40)scale(0.14)")
      })

    })


    function strip() {
      //interactive vector editor
      var cellWidth = 20;
      var cellHeight = 20;
      var rows = 128;
      var cols = 5;
      var half = Math.floor(cols/2);
      var colors = d3.scaleOrdinal()
        .domain(d3.range(rows))
        .range([
          "#e41a1c",
          "#377eb8",
          "#4daf4a",
          "#984ea3",
          "#ff7f00",
          "#ffff33"
        ])
      var data = [];
      var cb; // callback for onChange

      this.update = function(g) {
        var extent = d3.extent(data)
        var mapping = d3.scaleLinear()
          .domain(extent)
          .range([-(cols-1), 0])
          //.domain([0, cols-1]) // based on max value
          //.range([-(cols-1), 0])

        var container = g.append("g")
          .attr("transform", "translate(" + [cellWidth * cols, 0] + ")")

        var rowsg = container.selectAll("g.row")
          .data(d3.range(data.length))
        rowsg.exit().remove();
        var rowsgE = rowsg.enter().append("g").classed("row", true)
          .attr("transform", function(d) {
            var x = cellWidth * mapping(data[d]);
            var y = 0;
            return "translate(" + [x,y] + ")";
          })


        var cellsg = rowsgE.selectAll("rect.cell")
          .data(function(d) {
            return d3.range(cols).map(function(c) {
              return { c: c, r: d }
            })
          })

        var cellsgE = cellsg.enter().append("rect").classed("cell", true)
        cellsg = cellsgE.merge(cellsg)

        cellsg.attr("x", function(d) { return d.c * cellWidth })
          .attr("y", function(d) { return d.r * cellHeight })
          .attr("width", cellWidth)
          .attr("height", cellHeight)
          .style("fill", function(d,i) {
            var color = d3.hcl(colors(d.r))
            if(d.c < half) {
              return color.darker(1 - d.c/half)
            } else if(d.c > half) {
              return color.brighter(d.c/cols)
            } else {
              return color;
            }
          })

        // We convert the relative mouse position to one of the potential
        // values in our array
        var mouseScale = d3.scaleLinear()
        .domain([-cellWidth * cols/2, cellWidth/2 * (cols+1)])
        .range([0, cols-1])

        var drag = d3.drag()
        .on("drag", function(d) {
          var x = d3.event.x;
          var y = d3.event.y;

          var v = Math.floor(mouseScale(x))
          v = Math.max(0, Math.min(v, cols-1))

          if(data[d] === v) return;
          data[d] = v;
          rowsg.attr("transform", function(d) {
            var x = cellWidth * mapping(data[d]);
            var y = 0;
            return "translate(" + [x,y] + ")";
          })
          if(cb) cb(data);
        })
        rowsg.call(drag)

        return this;
      }

      this.data = function(val) {
        if(val) { data = val; return this; }
        return data;
      }
      this.cellWidth = function(val) {
        if(val) { cellWidth = val; return this; }
        return cellWidth;
      }
      this.cellHeight = function(val) {
        if(val) { cellHeight = val; return this; }
        return cellHeight;
      }
      this.onChange = function(val) {
        if(val) { cb = val; return this; }
        return val
      }
      return this;
    }

    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;
      })
      d.strokes = strokes;

    }

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
	background: #222;
	}
	</style>
	</head>

	<body>
	<script>
	var width = 960
	var height = 500
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)


	var drawingLine = d3.line()
	.x(function(d) { return d.x })
	.y(function(d) { return d.y })
	.curve(d3.curveBasis)

	var q = d3.queue()
	q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-left-drawings.json")
	q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-left-encodings_a.json?q=1")
	q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-perspective-left-drawings.json?q=1")
	q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-perspective-left-encodings_a.json?q=1")
	//q.defer(d3.json, "https://storage.googleapis.com/fun-data/quickdraw/chair-right-drawings.json")
	q.awaitAll(function(err, results) {
	console.log("results", results)
	var chairsLeft = results[0]
	var chairsLeftEncodings = results[1]
	var chairsPerspective = results[2]
	var chairsPerspectiveEncodings = results[3]
	chairsLeft.forEach(function(d,i) {
	d.e = chairsLeftEncodings[i].e
	})
	chairsPerspective.forEach(function(d,i) {
	d.e = chairsPerspectiveEncodings[i].e
	})
	var chairs = chairsLeft.concat(chairsPerspective.slice(0,29))
	chairs.forEach(strokifyDrawing)

	var randomg = svg.selectAll("g.random")
	.data(chairs)

	var cellSize = 3;
	var renter = randomg.enter().append("g").classed("random", true)
	var cols = 29
	renter.attr("transform", function(d,i) {
	var x = 15 + 32 * (i % cols);
	var y = 45 + 250 * Math.floor(i / cols);
	return "translate(" + [x, y] + ")"
	})
	.each(function(d,i) {
	//console.log(d)
	var s = new strip()
	.data(d.e)
	.cellWidth(cellSize)
	.cellHeight(1.5)
	.onChange(function(data) {
	rerender();
	updateExplanation();
	})
	.update(d3.select(this))

	d3.select(this)
	.selectAll("path.stroke").data(d.strokes)
	.enter().append("path").classed("stroke", true)
	.attr("d", drawingLine)
	.style("stroke", "#ffefa8")
	.style("stroke-width", 5)
	.style("fill", "none")
	.attr("transform", "translate(5,-40)scale(0.14)")
	})

	})


	function strip() {
	//interactive vector editor
	var cellWidth = 20;
	var cellHeight = 20;
	var rows = 128;
	var cols = 5;
	var half = Math.floor(cols/2);
	var colors = d3.scaleOrdinal()
	.domain(d3.range(rows))
	.range([
	"#e41a1c",
	"#377eb8",
	"#4daf4a",
	"#984ea3",
	"#ff7f00",
	"#ffff33"
	])
	var data = [];
	var cb; // callback for onChange

	this.update = function(g) {
	var extent = d3.extent(data)
	var mapping = d3.scaleLinear()
	.domain(extent)
	.range([-(cols-1), 0])
	//.domain([0, cols-1]) // based on max value
	//.range([-(cols-1), 0])

	var container = g.append("g")
	.attr("transform", "translate(" + [cellWidth * cols, 0] + ")")

	var rowsg = container.selectAll("g.row")
	.data(d3.range(data.length))
	rowsg.exit().remove();
	var rowsgE = rowsg.enter().append("g").classed("row", true)
	.attr("transform", function(d) {
	var x = cellWidth * mapping(data[d]);
	var y = 0;
	return "translate(" + [x,y] + ")";
	})


	var cellsg = rowsgE.selectAll("rect.cell")
	.data(function(d) {
	return d3.range(cols).map(function(c) {
	return { c: c, r: d }
	})
	})

	var cellsgE = cellsg.enter().append("rect").classed("cell", true)
	cellsg = cellsgE.merge(cellsg)

	cellsg.attr("x", function(d) { return d.c * cellWidth })
	.attr("y", function(d) { return d.r * cellHeight })
	.attr("width", cellWidth)
	.attr("height", cellHeight)
	.style("fill", function(d,i) {
	var color = d3.hcl(colors(d.r))
	if(d.c < half) {
	return color.darker(1 - d.c/half)
	} else if(d.c > half) {
	return color.brighter(d.c/cols)
	} else {
	return color;
	}
	})

	// We convert the relative mouse position to one of the potential
	// values in our array
	var mouseScale = d3.scaleLinear()
	.domain([-cellWidth * cols/2, cellWidth/2 * (cols+1)])
	.range([0, cols-1])

	var drag = d3.drag()
	.on("drag", function(d) {
	var x = d3.event.x;
	var y = d3.event.y;

	var v = Math.floor(mouseScale(x))
	v = Math.max(0, Math.min(v, cols-1))

	if(data[d] === v) return;
	data[d] = v;
	rowsg.attr("transform", function(d) {
	var x = cellWidth * mapping(data[d]);
	var y = 0;
	return "translate(" + [x,y] + ")";
	})
	if(cb) cb(data);
	})
	rowsg.call(drag)

	return this;
	}

	this.data = function(val) {
	if(val) { data = val; return this; }
	return data;
	}
	this.cellWidth = function(val) {
	if(val) { cellWidth = val; return this; }
	return cellWidth;
	}
	this.cellHeight = function(val) {
	if(val) { cellHeight = val; return this; }
	return cellHeight;
	}
	this.onChange = function(val) {
	if(val) { cb = val; return this; }
	return val
	}
	return this;
	}

	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;
	})
	d.strokes = strokes;

	}

	</script>
	</body>