Simple Transition Example

_.md

[ Launch: test ] 2b913921ee9ca4a6550f by dmann99
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Simple Transition Example","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

<div id="myviz" width="250" height="250"></div>
<button id="GoBlue">Go Blue</button>
<button id="GoRed">Go Red</button>
<button id="GoLeft">Go Left</button>
<button id="GoRight">Go Right</button> 
<button id="GoBig">Go Big</button>
<button id="GoSmall">Go Small</button>

inlet.js

var svg = d3.select("#myviz")
            .append("svg")
            .attr("width",400)
            .attr("height",250);

var myrect = svg.append("rect")
.attr({
  width: 100,
  height: 100,
  x: 200,
  y: 62,
  fill: "#3BA360"
});


d3.select("#GoBlue")
  .on("click", function(){

     myrect.transition()
           .style("fill","blue")
           .duration(1000); 
    });
d3.select("#GoRed")
  .on("click", function(){

     myrect.transition()
           .style("fill","red")
           .duration(1000); 
    });



d3.select("#GoLeft")
  .on("click", function(){

     myrect.transition()
           .attr("x","100")
           .duration(1000); 
    
    });
d3.select("#GoRight")
  .on("click", function(){

     myrect.transition()
           .attr("x","200")
           .duration(1000); 
    
    });

      
d3.select("#GoBig")
  .on("click", function(){

     myrect.transition()
           .attr("width",200)
           .attr("height",200)
           .duration(1000); 
    
    });

d3.select("#GoSmall")
  .on("click", function(){

     myrect.transition()
           .attr("width",100)
           .attr("height",100)
           .duration(1000); 
    
    });