frendhisaido/Thetestfield.html

## Thetestfield.html
<!DOCTYPE html>
<html>
  <head>
    <title>TestField</title>
    <script type="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript">
    var data = [ 1, 2, 3, 4, 5, 6];

    var w = 500,
    	h = 400;

    var
    	rv = d3.scale.linear().domain([0,d3.max(data)]).range([5,70]),
    	col = d3.scale.category20c().domain([d3.extent(data)]);

    var svg = d3.selectAll("body").append("svg")
    		.attr("width", w)
    		.attr("height", h)
    	.append("g")
    		.attr("transform", "translate(10,10)");

    	svg.append("rect")
    		.attr("width", w)
    		.attr("height", h)
    		.style("fill-opacity", 0.2);

    	var circle = svg.selectAll("circle")
    		.data(data);
    	circle
    	.enter().append("circle")
    	.attr("transform", "translate(30,10)")
    		.attr("cx", function(d,i) { return i*50;})
    		.attr("cy", h /2)
    		.attr("r", rv)
    		.attr("stroke", 1)
    		.style("fill-opacity", 0.5)
    		.style("fill", col)
    		.on("mouseover", mouseov)
    		.on("mouseout", mousot);

    	function mouseov(d, i) {
    		d3.select(this)
    		 .transition().duration(500)
    			.attr("r", rv(d)+20)
    	}

    	function mousot(d, i) {
    		d3.select(this)
    		.transition().duration(1000)
    		 	.attr("r",rv(d));
    	}
    	/*
    	function transo(num) {

    		circle.transition().duration(5000)
    			.attr("cy", h / num);

    	}

    	function xito() {
    		circle.exit().transition().duration(2000)
    			.attr("r", 0)
    			.remove();
    	}

         $("#opsi").change(function() {
   	var ops = $("#opsi option:selected").val();
	transo(ops);
	});

	$("#xitbutt").click(function() {
	xito();
	});
        */
	 </script>
  </head>
  <body>

	 <select id="opsi">
	    <option value="2">2</option>
	    <option value="3">3</option>
	    <option value="4">4</option>
	 </select>
	  <button id="xitbutt">EXIT</button>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>TestField</title>
	<script type="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
	<script type="text/javascript">
	var data = [ 1, 2, 3, 4, 5, 6];

	var w = 500,
	h = 400;

	var
	rv = d3.scale.linear().domain([0,d3.max(data)]).range([5,70]),
	col = d3.scale.category20c().domain([d3.extent(data)]);

	var svg = d3.selectAll("body").append("svg")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("transform", "translate(10,10)");

	svg.append("rect")
	.attr("width", w)
	.attr("height", h)
	.style("fill-opacity", 0.2);

	var circle = svg.selectAll("circle")
	.data(data);
	circle
	.enter().append("circle")
	.attr("transform", "translate(30,10)")
	.attr("cx", function(d,i) { return i*50;})
	.attr("cy", h /2)
	.attr("r", rv)
	.attr("stroke", 1)
	.style("fill-opacity", 0.5)
	.style("fill", col)
	.on("mouseover", mouseov)
	.on("mouseout", mousot);

	function mouseov(d, i) {
	d3.select(this)
	.transition().duration(500)
	.attr("r", rv(d)+20)
	}

	function mousot(d, i) {
	d3.select(this)
	.transition().duration(1000)
	.attr("r",rv(d));
	}
	/*
	function transo(num) {

	circle.transition().duration(5000)
	.attr("cy", h / num);

	}

	function xito() {
	circle.exit().transition().duration(2000)
	.attr("r", 0)
	.remove();
	}

	$("#opsi").change(function() {
	var ops = $("#opsi option:selected").val();
	transo(ops);
	});

	$("#xitbutt").click(function() {
	xito();
	});
	*/
	</script>
	</head>
	<body>

	<select id="opsi">
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	</select>
	<button id="xitbutt">EXIT</button>

	</body>
	</html>