blaklaybul/index.html

## index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>hochemoche</title>
  <style>
  </style>

  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 </head>

  <body>


		  <div id = "viz" class = "sixteen columns">
			  <script type = "text/javascript">

			  var margin = {top: 40, right: 40, bottom: 40, left:40};
			  var width  = 600 - margin.left - margin.right;
			  var height = 600 - margin.top - margin.bottom;

			  var data = [];
			  var where = [];

			  makeMore(data);

			  var makeLine = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
						 .interpolate("linear-closed");

			  var area = d3.svg.area()
  					     .x0(function(d) { return d.x; })
  					     .y1(function(d) { return d.y;});

			  var xScale = d3.scale.linear()
			  .domain([1,10])
			  .range([margin.left,width+margin.left]);

			  var yScale = d3.scale.linear()
			  .domain([1,10])
			  .range([margin.top,height+margin.top]);


			  var svg = d3.selectAll("#viz").append("svg")
				  .attr("width", width + margin.left + margin.right)
				  .attr("height", height + margin.top + margin.bottom)
				  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

			 drawCircle();

			 function drawCircle(){
			  var circle = svg.selectAll("circle")
				  .data(data)
				  .enter()
				  .append("circle")
				  .attr("cx", function(d){return xScale(d[0]);})
  				  .attr("cy", function(d){return yScale(d[1]);})
				  .attr("r", 4)
				  .style("position", "relative")
				  .style("z-index", 10)
				  .on("mouseover", function(){d3.select(this).transition().attr("r",7);})
			  	  .on("mouseout", function(){d3.select(this).transition().attr("r",4);})
				  .on("click", function(){
					  if(where.length>0){
						  d3.select(this).transition().style("fill", "red");
					  where.push({ "x" : d3.select(this).attr("cx"), "y" : d3.select(this).attr("cy")});
				  		}
					 else{
					 d3.select(this).transition().style("fill", "red");
					  where.push({ "x" : d3.select(this).attr("cx"), "y" : d3.select(this).attr("cy")});};});

				 }

 				var butttt = svg.append("rect")
 								.attr("x", 30)
 								.attr("y", 10)
 								.attr("width", 10)
 								.attr("height",19)
 								.on("click", function(){

 									svg.selectAll("circle")
 									.remove();
								});

				var butt = svg.append("rect")
								.attr("x", 10)
								.attr("y", 10)
								.attr("width", 10)
								.attr("height",19)
								.on("click", function(){

									svg.selectAll("circle")
									.style("fill", "black");

									drawLine(where);

									svg.selectAll("circle")
 									.remove();

									drawCircle();

									where = [];});

			  function makeMore(stuff) {

				  for (var i = 1; i<11; i++){
					  for(var j = 1; j<11; j++){
						  stuff.push([i,j])
					  }
			  		}
		  	  	};

				function drawLine(where){

					var lineGraph = svg.append("path")
                            .attr("d", makeLine(where))
                            .attr("stroke", "black")
                            .attr("stroke-width", 2)
                            .attr("fill", function(){return d3.rgb(Math.random()*255,Math.random()*255 ,Math.random()*255).brighter();})
							.style("opacity", 0.7)
							.style("position", "relative")
							.style("z-index", -1)
//							.on("click", function(){d3.select(this).remove();})
							;

				}


			  </script>
	  </div>


 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>hochemoche</title>
	<style>
	</style>

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	</head>

	<body>


	<div id = "viz" class = "sixteen columns">
	<script type = "text/javascript">

	var margin = {top: 40, right: 40, bottom: 40, left:40};
	var width = 600 - margin.left - margin.right;
	var height = 600 - margin.top - margin.bottom;

	var data = [];
	var where = [];

	makeMore(data);

	var makeLine = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.interpolate("linear-closed");

	var area = d3.svg.area()
	.x0(function(d) { return d.x; })
	.y1(function(d) { return d.y;});

	var xScale = d3.scale.linear()
	.domain([1,10])
	.range([margin.left,width+margin.left]);

	var yScale = d3.scale.linear()
	.domain([1,10])
	.range([margin.top,height+margin.top]);


	var svg = d3.selectAll("#viz").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	drawCircle();

	function drawCircle(){
	var circle = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d){return xScale(d[0]);})
	.attr("cy", function(d){return yScale(d[1]);})
	.attr("r", 4)
	.style("position", "relative")
	.style("z-index", 10)
	.on("mouseover", function(){d3.select(this).transition().attr("r",7);})
	.on("mouseout", function(){d3.select(this).transition().attr("r",4);})
	.on("click", function(){
	if(where.length>0){
	d3.select(this).transition().style("fill", "red");
	where.push({ "x" : d3.select(this).attr("cx"), "y" : d3.select(this).attr("cy")});
	}
	else{
	d3.select(this).transition().style("fill", "red");
	where.push({ "x" : d3.select(this).attr("cx"), "y" : d3.select(this).attr("cy")});};});

	}

	var butttt = svg.append("rect")
	.attr("x", 30)
	.attr("y", 10)
	.attr("width", 10)
	.attr("height",19)
	.on("click", function(){

	svg.selectAll("circle")
	.remove();
	});

	var butt = svg.append("rect")
	.attr("x", 10)
	.attr("y", 10)
	.attr("width", 10)
	.attr("height",19)
	.on("click", function(){

	svg.selectAll("circle")
	.style("fill", "black");

	drawLine(where);

	svg.selectAll("circle")
	.remove();

	drawCircle();

	where = [];});

	function makeMore(stuff) {

	for (var i = 1; i<11; i++){
	for(var j = 1; j<11; j++){
	stuff.push([i,j])
	}
	}
	};

	function drawLine(where){

	var lineGraph = svg.append("path")
	.attr("d", makeLine(where))
	.attr("stroke", "black")
	.attr("stroke-width", 2)
	.attr("fill", function(){return d3.rgb(Math.random()255,Math.random()255 ,Math.random()*255).brighter();})
	.style("opacity", 0.7)
	.style("position", "relative")
	.style("z-index", -1)
	// .on("click", function(){d3.select(this).remove();})
	;

	}


	</script>
	</div>


	</body>
	</html>