garrettwilkin/d3-example.html

## d3-example.html
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="src/d3/d3.js"></script>
  <script type="text/javascript" src="src/d3/d3.geom.js"></script>
  <script type="text/javascript" src="src/d3/d3.layout.js"></script>
</head>
<body>
  <div id="viz1"></div>
  <div id="viz2"></div>
  <div id="viz3"></div>
  <script type="text/javascript">
/*
    .transition()
      .delay(100)
      .duration(1000)
      .attr("r", 10)
      .attr("cx", 30)
      .style("fill", "black")

*/


  var viz1 = d3.select("#viz1")
      .append("svg")
      .attr("width", 100)
      .attr("height", 100);

  viz1.append("circle")
      .style("stroke", "gray")
      .style("fill", "white")
      .attr("r", 40)
      .attr("cx", 50)
      .attr("cy", 50)
      .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
      .on("mouseout", function(){d3.select(this).style("fill", "white");})
      .on("mousedown", animate);

      function animate() {
        d3.select(this).transition()
            .duration(1000)
            .attr("r", 10)
          .transition()
            .delay(1000)
            .attr("r", 40);
      }


  var w = 960,
      h = 500;

  var viz2 = d3.select("#viz2").append("svg")
       .attr("width", w)
       .attr("height", h);

    viz2.selectAll("circle")
    .data([100,200,300,400])
    .enter()
    .append("circle")
    .attr("cy", 90)
    .attr("cx", String)
    .attr("r", Math.sqrt);


  var nodes = [new Node('Sun'), new Node('Moon'), new Node('Earth'), new Node('Mars')];
  var links = [new Link(0,2), new Link(1,2), new Link(0,3)];

  var fw = 960,
      fh = 500;

  var force = d3.layout.force()
       .size([fw, fh]);
  force
      .nodes(nodes)
      .links(links)
      .start();

  var viz3 = d3.select("#viz3").append("svg")
       .attr("width", w)
       .attr("height", h);

  var node = viz3.selectAll("circle.code")
      .data(nodes)
    .enter().append("svg:circle")
      .attr("r", 45)
      .style("stroke", "#000")
      .call(force.drag);

  function Node(name) {
    this.name = name;
  }

  function Link(source, target) {
    this.source = source;
    this.target = target;
  }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="src/d3/d3.js"></script>
	<script type="text/javascript" src="src/d3/d3.geom.js"></script>
	<script type="text/javascript" src="src/d3/d3.layout.js"></script>
	</head>
	<body>
	<div id="viz1"></div>
	<div id="viz2"></div>
	<div id="viz3"></div>
	<script type="text/javascript">
	/*
	.transition()
	.delay(100)
	.duration(1000)
	.attr("r", 10)
	.attr("cx", 30)
	.style("fill", "black")

	*/


	var viz1 = d3.select("#viz1")
	.append("svg")
	.attr("width", 100)
	.attr("height", 100);

	viz1.append("circle")
	.style("stroke", "gray")
	.style("fill", "white")
	.attr("r", 40)
	.attr("cx", 50)
	.attr("cy", 50)
	.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
	.on("mouseout", function(){d3.select(this).style("fill", "white");})
	.on("mousedown", animate);

	function animate() {
	d3.select(this).transition()
	.duration(1000)
	.attr("r", 10)
	.transition()
	.delay(1000)
	.attr("r", 40);
	}


	var w = 960,
	h = 500;

	var viz2 = d3.select("#viz2").append("svg")
	.attr("width", w)
	.attr("height", h);

	viz2.selectAll("circle")
	.data([100,200,300,400])
	.enter()
	.append("circle")
	.attr("cy", 90)
	.attr("cx", String)
	.attr("r", Math.sqrt);


	var nodes = [new Node('Sun'), new Node('Moon'), new Node('Earth'), new Node('Mars')];
	var links = [new Link(0,2), new Link(1,2), new Link(0,3)];

	var fw = 960,
	fh = 500;

	var force = d3.layout.force()
	.size([fw, fh]);
	force
	.nodes(nodes)
	.links(links)
	.start();

	var viz3 = d3.select("#viz3").append("svg")
	.attr("width", w)
	.attr("height", h);

	var node = viz3.selectAll("circle.code")
	.data(nodes)
	.enter().append("svg:circle")
	.attr("r", 45)
	.style("stroke", "#000")
	.call(force.drag);

	function Node(name) {
	this.name = name;
	}

	function Link(source, target) {
	this.source = source;
	this.target = target;
	}

	</script>
	</body>
	</html>