damagedgoods/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>D3 test</title>
	<link rel="stylesheet" href="./js/jquery-ui/jquery-ui.css">

    <script type="text/javascript" src="http:\\avantitutti.com/js/d3.js"></script>
    <script type="text/javascript" src="http:\\avantitutti.com/js/jquery.min.js"></script>
    <script type="text/javascript" src="http:\\avantitutti.com/js/jquery-ui.min.js"></script>

    <style type="text/css">

    body {
        background-color: #02080D;
    }

    #graph_container {
        width: 800px;
        height: 450px;
    }
    .number_circle {
        fill: #0FE7F5;
        opacity: 0.2;
    }
    text {
        fill: #0FE7F5;
        opacity: 1;
        font-family: "Arial";
    }
    .link_list {}
    .link_list li{
        display: inline-block;
        margin: 0 5px 0 0;
        text-align: center;
    }
    .link_list li a{
        display: block;
        width: 60px;
        font-family: "Arial";
        font-size: 15px;
        text-decoration: none;
        color: #000000;
        background-color: #0FE7F5;
        padding: 7px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .link_list li a:hover{
        background-color: #ffffff;
    }

    </style>

    <script>

    var w = 800;
    var h = 450;
    var data =[] ;
    var num = 200;
    var x = d3.scale.linear().domain([0,1]).rangeRound([0,w]);
    var y = d3.scale.linear().domain([0,1]).rangeRound([0,h]);
    var r = d3.scale.linear().domain([0,1]).rangeRound([1,50]);
    var t = d3.scale.linear().domain([0,1]).rangeRound([6,24]);

    $(document).ready(function() {
        vis = d3.select("#graph_container")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h);
    });

    function add() {
        data.push({x:Math.random(), y: Math.random(), r: Math.random()});
        var node = vis.selectAll(".node")
            .data(data)
            .enter()
            .append("g")
            .attr("class","node")
            .attr("transform",function(d,i){return "translate("+x(d.x)+","+y(d.y)+")"});

        node.append("text")
            .attr("class","label")
            .attr("text-anchor","middle")
            .attr("dy",".3em")
            .transition()
            .duration(300)
            .attr("font-size", function(d,i){return t(d.r)})
            .text(function(d,i) {return i});

        node.append("circle")
            .attr("class","number_circle")
            .transition()
            .duration(300)
            .attr("r",function(d,i){return r(d.r)});
    }

    function remove() {
        data.pop();
        var node = vis.selectAll(".node")
            .data(data)
            .exit()
            .transition()
            .duration(1000)
            .remove()

        node.select("circle")
          .transition()
          .duration(300)
          .attr("r",0);

        node.select("text")
          .transition()
          .duration(300)
          .attr("font-size",0);

    }

    function dance(){
        for (var i =0; i<data.length; i++) {
            data[i] = {x:Math.random(), y: Math.random(), r: Math.random()};
        }

        var node = vis.selectAll(".node")
        .data(data)
        .transition()
        .duration(1000)
        .attr("transform",function(d,i){return "translate("+x(d.x)+","+y(d.y)+")"});

        node.select("circle")
          .transition()
          .duration(1000)
          .attr("r",function(d,i){return r(d.r)});

        node.select("text")
          .transition()
          .duration(1000)
          .attr("font-size",function(d,i){return r(d.r)});


    }

    </script>

  </head>

  <body>

    <div id="graph_container"></div>
    <ul class="link_list">
      <li><a href="#" onclick="add()">Add</a></li>
      <li><a href="#" onclick="remove()">Remove</a></li>
      <li><a href="#" onclick="dance()">Dance</a></li>
    </ul>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>D3 test</title>
	<link rel="stylesheet" href="./js/jquery-ui/jquery-ui.css">

	<script type="text/javascript" src="http:\\avantitutti.com/js/d3.js"></script>
	<script type="text/javascript" src="http:\\avantitutti.com/js/jquery.min.js"></script>
	<script type="text/javascript" src="http:\\avantitutti.com/js/jquery-ui.min.js"></script>

	<style type="text/css">

	body {
	background-color: #02080D;
	}

	#graph_container {
	width: 800px;
	height: 450px;
	}
	.number_circle {
	fill: #0FE7F5;
	opacity: 0.2;
	}
	text {
	fill: #0FE7F5;
	opacity: 1;
	font-family: "Arial";
	}
	.link_list {}
	.link_list li{
	display: inline-block;
	margin: 0 5px 0 0;
	text-align: center;
	}
	.link_list li a{
	display: block;
	width: 60px;
	font-family: "Arial";
	font-size: 15px;
	text-decoration: none;
	color: #000000;
	background-color: #0FE7F5;
	padding: 7px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

	.link_list li a:hover{
	background-color: #ffffff;
	}

	</style>

	<script>

	var w = 800;
	var h = 450;
	var data =[] ;
	var num = 200;
	var x = d3.scale.linear().domain([0,1]).rangeRound([0,w]);
	var y = d3.scale.linear().domain([0,1]).rangeRound([0,h]);
	var r = d3.scale.linear().domain([0,1]).rangeRound([1,50]);
	var t = d3.scale.linear().domain([0,1]).rangeRound([6,24]);

	$(document).ready(function() {
	vis = d3.select("#graph_container")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h);
	});

	function add() {
	data.push({x:Math.random(), y: Math.random(), r: Math.random()});
	var node = vis.selectAll(".node")
	.data(data)
	.enter()
	.append("g")
	.attr("class","node")
	.attr("transform",function(d,i){return "translate("+x(d.x)+","+y(d.y)+")"});

	node.append("text")
	.attr("class","label")
	.attr("text-anchor","middle")
	.attr("dy",".3em")
	.transition()
	.duration(300)
	.attr("font-size", function(d,i){return t(d.r)})
	.text(function(d,i) {return i});

	node.append("circle")
	.attr("class","number_circle")
	.transition()
	.duration(300)
	.attr("r",function(d,i){return r(d.r)});
	}

	function remove() {
	data.pop();
	var node = vis.selectAll(".node")
	.data(data)
	.exit()
	.transition()
	.duration(1000)
	.remove()

	node.select("circle")
	.transition()
	.duration(300)
	.attr("r",0);

	node.select("text")
	.transition()
	.duration(300)
	.attr("font-size",0);

	}

	function dance(){
	for (var i =0; i<data.length; i++) {
	data[i] = {x:Math.random(), y: Math.random(), r: Math.random()};
	}

	var node = vis.selectAll(".node")
	.data(data)
	.transition()
	.duration(1000)
	.attr("transform",function(d,i){return "translate("+x(d.x)+","+y(d.y)+")"});

	node.select("circle")
	.transition()
	.duration(1000)
	.attr("r",function(d,i){return r(d.r)});

	node.select("text")
	.transition()
	.duration(1000)
	.attr("font-size",function(d,i){return r(d.r)});


	}

	</script>

	</head>

	<body>

	<div id="graph_container"></div>
	<ul class="link_list">
	<li><a href="#" onclick="add()">Add</a></li>
	<li><a href="#" onclick="remove()">Remove</a></li>
	<li><a href="#" onclick="dance()">Dance</a></li>
	</ul>
	</body>
	</html>