mpmckenna8/dod3.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Want to try to practice rotating stuff, but I haven't really tried to

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

  }

## index.html
<!DOCTYPE html>

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


</head>
<body>


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

</body>


</html>

## style.css
.header {
  margin-right:auto;
  margin-left:auto;

}

.svger{
  background:green;
}


svg rect {
  fill:purple
}
	// 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)

	}
	<!DOCTYPE html>

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


	</head>
	<body>




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

	</body>


	</html>
	.header {
	margin-right:auto;
	margin-left:auto;

	}

	.svger{
	background:green;
	}


	svg rect {
	fill:purple
	}