Scatter Plot and Animated Transition (Visual Implementation 3)

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.

<!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");

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js