block by mpmckenna8 c2fe31811d1de8687861

rotation basics w/ d3

Full Screen

Want to try to practice rotating stuff, but I haven’t really tried to

index.html

<!DOCTYPE html>

<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<link href='style.css' rel='stylesheet' />


</head>
<body>




  <script src="dod3.js"></script>

</body>


</html>

dod3.js

// this file should have my code for doing d3 stuff


var svg = d3.select('body').append('svg').attr("height", 500).attr("width", 500).attr("class", "svger")


var rectwi = 30;

var recthi = 200;

var rectbuf = 50;

svg.append("rect")
  .attr("width", rectwi)
  .attr("height", recthi)
  .attr("fill", "yellow")
  .attr("y", recthi)
  .attr("x", rectbuf *4)
  .transition()
  .duration(8000)
  .style("fill", "pink")
  .attr("transform", "rotate(90)")


// setting the x and y of a group don't do nothing cause it doesn't use those attributes.
var group =  svg.append("g")
  .attr("y", recthi)
  .attr("x", rectbuf *4)
  .attr("transform", "translate(200,200)")




group.append("rect")
  .transition().duration(8000)
  .style("fill", "pink")
  .attr("width", rectwi)
  .attr("height", recthi)
  .attr("transform", "rotate(180)")
  .attr("y", -recthi/2)
  .attr("x", -rectwi/2)


  function addbar(wi, hi, x, y){

    svg.append("rect")
      .attr("width", rectwi)

  }

style.css

.header {
  margin-right:auto;
  margin-left:auto;

}

.svger{
  background:green;
}


svg rect {
  fill:purple
}