srinivashavanur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Problem Statement:
Generate a scatter plot and animated transition of an object using D3. Make sure to separate these graphs using the div tag to show complete visualization in blockbuilder.org

Name: Srinivas Havanur
Assignment: CS 725 - VI3 submission
Course: Information Visualization
Semester: Spring 2016

Built with blockbuilder.org
Things that I learn't in D3
1.There was a problem in rendering the two div elements in d3 as the transition graph was giving partial output. Later I learn't how to increase the height of rendering block.
d3.select(self.frameElement).style("height", "779px")

2.To translate an object from one position to another. D3 has in-built transition() function which can translate either x or y axis based on the value of specific attribute.
3.I also learn't how to control the rotation of an object during its transition using rotate function. The rotate value ranges between 0 to 180.

  
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#button {position:absolute;top:10px;left:1000px;}
#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}

svg { width:100%; height: 100% }
.div_style1 {
      border: 2px solid grey;
      width: 950px;
      height: 450px;

}
.div_style2 {
      border: 2px solid grey;
      width: 950px;
      height: 300px;

}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

  </style>
</head>

<body>
	<div id="div1" class="div_style1"></div>
	<br/>
	<div id="div2" class="div_style2">
<button type="button" onclick="transitiongraph();">Transition</button>
  </div>
<script>
 	var w = 900;
	var h = 500;
  var padding = 80;
  d3.select(self.frameElement).style("height", "779px");

  									/* Scatter Plot Begins here */
	var dataset = [];
  var numDataPoints = 50;
	var xRange = Math.random() * 1000;
	var yRange = Math.random() * 1000;
	for (var i = 0; i < numDataPoints; i++)
  {
    	var newNumber1 = Math.round(Math.random() * xRange);
    	var newNumber2 = Math.round(Math.random() * yRange);
    	dataset.push([newNumber1, newNumber2]);
	}

  var xScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                 .range([padding, w - padding * 2]);
  var yScale = d3.scale.linear()
                  .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                  .range([h - padding, padding]);
  var rScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                 .range([2, 5]);

  var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(5);  //Set rough # of ticks
  var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);
  var svg = d3.select("#div1").append("svg").attr("width", w).attr("height", h);
      svg.selectAll("circle")
   	     .data(dataset)
   	     .enter()
   	  	 .append("circle")
      	 .style("fill","blue")
    		 .attr("cx", function(d) {
        				return xScale(d[0]);
   				})
   			 .attr("cy", function(d) {
        				return yScale(d[1]);
   				})
   			 .attr("r", function(d) {
    						return rScale(d[1]);
					});

  		svg.append("g")
    		 .attr("class", "axis")
    		 .attr("transform", "translate(0," + (h - padding) + ")")
    		 .call(xAxis);

    	svg.append("g")
    		 .attr("class", "axis")
    		 .attr("transform", "translate(" + padding + ",0)")
    		 .call(yAxis);

  							/* Scatter Plot Ends here */

									/*Transition Graph Begins here */

	var svg = d3.select("#div2")
            	.append("svg")
            	.attr("width", 500)
            	.attr("height", 300);
     svg.selectAll(".vline").data(d3.range(76)).enter()
  			.append("line")
  			.attr("x1",function(d){return d*20;})
  			.attr("x2",function(d){return d*20;})
  			.attr("y1",function(d){return 0;})
  			.attr("y2",function(d){return 1000;})
  			.style("stroke","#eee");
		 svg.selectAll(".vline").data(d3.range(0,98)).enter()
  			.append("line")
  			.attr("y1",function(d){return d*20;})
  			.attr("y2",function(d){return d*20;})
  			.attr("x1",function(d){return 0;})
  			.attr("x2",function(d){return 1000;})
  			.style("stroke","#eee");

		var shape = svg.append("path")
									 .attr("transform", "translate(100,120)rotate(0)")
									 .style("stroke", "blue")
			 						 .style("fill", "none")
									 .attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");


		function transitiongraph()
  	{
				var button = d3.select("button");
				if(button.text() =="Transition")
        {
						shape
						.style("fill", "white")
						.transition()
						.duration(1000)
						.style("fill", "cyan")
						.attr("transform", "translate(840,120)rotate(180)")
						.attr("d", "m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z")
						.each("end",function()
            {
				 				svg.append("circle")
									 .attr("cx", 840)
									 .attr("cy", 120)
									 .attr("r",450)
									 .style("fill", "green")
									 .style("opacity", "0")
									 .transition()
									 .duration(700)
									 .attr("r",0)
									 .style("fill", "red")
									 .style("opacity",1)
									 .remove();
      			}
      			);

				 		d3.select("button").text("Revert Back");
				}
      else
      {
						d3.select("button").text("Transition");
						shape
							.transition()
							.duration(1000)
							.attr("transform", "translate(100,120)rotate(0)")
							.style("stroke", "blue")
							.style("fill", "none")
							.attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
			}
		};

  								/* Transition Graph Ends here */
</script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#button {position:absolute;top:10px;left:1000px;}
	#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}

	svg { width:100%; height: 100% }
	.div_style1 {
	border: 2px solid grey;
	width: 950px;
	height: 450px;

	}
	.div_style2 {
	border: 2px solid grey;
	width: 950px;
	height: 300px;

	}
	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>

	<body>
	<div id="div1" class="div_style1"></div>
	<br/>
	<div id="div2" class="div_style2">
	<button type="button" onclick="transitiongraph();">Transition</button>
	</div>
	<script>
	var w = 900;
	var h = 500;
	var padding = 80;
	d3.select(self.frameElement).style("height", "779px");

	/* Scatter Plot Begins here */
	var dataset = [];
	var numDataPoints = 50;
	var xRange = Math.random() * 1000;
	var yRange = Math.random() * 1000;
	for (var i = 0; i < numDataPoints; i++)
	{
	var newNumber1 = Math.round(Math.random() * xRange);
	var newNumber2 = Math.round(Math.random() * yRange);
	dataset.push([newNumber1, newNumber2]);
	}

	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[0]; })])
	.range([padding, w - padding * 2]);
	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([h - padding, padding]);
	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([2, 5]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5); //Set rough # of ticks
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);
	var svg = d3.select("#div1").append("svg").attr("width", w).attr("height", h);
	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.style("fill","blue")
	.attr("cx", function(d) {
	return xScale(d[0]);
	})
	.attr("cy", function(d) {
	return yScale(d[1]);
	})
	.attr("r", function(d) {
	return rScale(d[1]);
	});

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	/* Scatter Plot Ends here */

	/Transition Graph Begins here /

	var svg = d3.select("#div2")
	.append("svg")
	.attr("width", 500)
	.attr("height", 300);
	svg.selectAll(".vline").data(d3.range(76)).enter()
	.append("line")
	.attr("x1",function(d){return d*20;})
	.attr("x2",function(d){return d*20;})
	.attr("y1",function(d){return 0;})
	.attr("y2",function(d){return 1000;})
	.style("stroke","#eee");
	svg.selectAll(".vline").data(d3.range(0,98)).enter()
	.append("line")
	.attr("y1",function(d){return d*20;})
	.attr("y2",function(d){return d*20;})
	.attr("x1",function(d){return 0;})
	.attr("x2",function(d){return 1000;})
	.style("stroke","#eee");

	var shape = svg.append("path")
	.attr("transform", "translate(100,120)rotate(0)")
	.style("stroke", "blue")
	.style("fill", "none")
	.attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");


	function transitiongraph()
	{
	var button = d3.select("button");
	if(button.text() =="Transition")
	{
	shape
	.style("fill", "white")
	.transition()
	.duration(1000)
	.style("fill", "cyan")
	.attr("transform", "translate(840,120)rotate(180)")
	.attr("d", "m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z")
	.each("end",function()
	{
	svg.append("circle")
	.attr("cx", 840)
	.attr("cy", 120)
	.attr("r",450)
	.style("fill", "green")
	.style("opacity", "0")
	.transition()
	.duration(700)
	.attr("r",0)
	.style("fill", "red")
	.style("opacity",1)
	.remove();
	}
	);

	d3.select("button").text("Revert Back");
	}
	else
	{
	d3.select("button").text("Transition");
	shape
	.transition()
	.duration(1000)
	.attr("transform", "translate(100,120)rotate(0)")
	.style("stroke", "blue")
	.style("fill", "none")
	.attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
	}
	};

	/* Transition Graph Ends here */
	</script>
	</body>