thing 0003

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

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

})
    
    
    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] + ")";
          })

</script>
</body>

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