INFO 247 - Lab 7 - #4 - Transformations

_.md

[ Launch: INFO 247 - Lab 7 - #1 - Draw Squares ] 5111933 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054734 by poezn

config.json

{"description":"INFO 247 - Lab 7 - #4 - Transformations","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":15},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":15},"matrix-data.json":{"default":true,"vim":false,"emacs":false,"fontSize":15}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

// School of Information, UC Berkeley
// INFO 247 Lab 7: D3.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-7-d3-js-part-2/ 

g.append("text")
.attr({
  "transform": function(d, i) {
    var tx = 21;
    var ty = 50;
    return "translate(" + [tx, ty] + ")";
  }
})
.text("Move Me!");


g.append("text")
.attr({
  "transform": function(d, i) {
    var tx = 21;
    var ty = 200;
    var rotation = -20; // degrees
    return "rotate("+ rotation + ") translate(" + [tx, ty] + ")";
  }
})
.text("Rotate Me!");


g.append("text")
.attr({
  "transform": function(d, i) {
    var tx = 21;
    var ty = 200;
    var scale = 2; // factor
    // What happens if you change the order of scale and translate?
    return "scale("+ scale + ") translate(" + [tx, ty] + ")";
  }
})
.text("Scale Me!");