arsenovic · February 28, 2014 17:24
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.js"></script>
        <style type="text/css">
 			div.bar {
 				display: inline-block;
 				width: 20px;
 				height: 75px;	/* Gets overriden by D3-assigned height below */
 				margin-right: 2px;
 				background-color: teal;
 			}
 		</style>
    </head>
    <body>
        <script type="text/javascript">
        	
        	// smith chart otions
        	var chart_r = 1
        	var chartType = 'z'// 'z' or 'y' 
        	var strokeWidth = 1.5
        	// svg options
        	var pad = 20 
        	var width = 300 
        	var height = width
        	
        	// these need to be dynamic based on a zoom level
 			var rHeavy = [0,1];
 			var xHeavy = [1,-1];
        	var rLight =[ 0.2, 0.5, 2.0, 5.0 ]
 			var xLight = [ 0.2, 0.5,  2.0 , 5.0, -0.2, -0.5,  -2.0, -5.0 ]
 			
 			xyScale = d3.scale.linear()
 					        .domain([-chart_r, chart_r])
 					        .range([pad, width-pad]);
 			rScale = d3.scale.linear()
 					        .domain([0, chart_r])
 					        .range([0, (width-2*pad)/2]); 
 			
 			var flipme = 1 
 			if (chartType == 'y'){flipme = -1};
 				
 			
 			Rcx = function(r){
 						return xyScale(r/(1+r)*flipme)
 						};
 			Rcy = function(r){
 						return xyScale(0)
 						};
 			Rr = function(r){
 						return rScale(1/(1+r))
 						};
 			Xcx = function(x){
 						return xyScale(1*flipme)
 						};
 			Xcy = function(x){
 						return xyScale(1/x)
 						};
 			Xr = function(x){
 						return rScale(Math.abs(1/x))
 						};
 			
 				
            var svg = d3.select("body").append('svg')
      
           	svg.attr('width',width)
 				.attr('height',height)
 				.attr('fill', 'rgba(0,0,0,0)')
 				.attr('stroke','black')
 				.attr('stroke-width',strokeWidth);

 			
            
 			
 				
 			
 			var rLightCircles = svg.selectAll('circle.rLight')
 							 .data(rLight)
 							 .enter()
 							 .append('circle')
 							 .attr('class','r Light')
 							 .attr('stroke','grey')
 							 .attr('cx',Rcx)
 				     	 	 .attr('cy',Rcy)
 				     	 	 .attr('r',Rr);

 							     
 			
 			var xLightCircles = svg.selectAll('circle.xLight')
 							 .data(xLight)
 							 .enter()
 							 .append('circle')							 
 							 .attr('class','x Light')
 							 .attr('stroke','grey')
 							 .attr('cx',Xcx)
 							 .attr('cy',Xcy)
 						     .attr('r',Xr);
 			
 			var rHeavyCircles = svg.selectAll('circle.rHeavy')
 							 .data(rHeavy)
 							 .enter()
 							 .append('circle')
 							 .attr('class','r Heavy')
 							 .attr('stroke','black')
 							 .attr('cx',Rcx)
 				     	 	 .attr('cy',Rcy)
 				     	 	 .attr('r',Rr);

 							     
 			
 			var xHeavyCircles = svg.selectAll('circle.xHeavy')
 							 .data(xHeavy)
 							 .enter()
 							 .append('circle')
 							 .attr('class','x Heavy')
 							 .attr('stroke','black')
 							 .attr('cx',Xcx)
 							 .attr('cy',Xcy)
 						     .attr('r',Xr);

 			svg.append('clipPath')
 				.attr('id','chart-area')
 				.append('circle')
 				.attr('cx',Rcx(0))
 				.attr('cy',Rcy(0))
 				.attr('r',rScale(1));
 			
 			svg.selectAll(['.x','.r'])
 				.attr("clip-path", "url(#chart-area)")
 			
 			d3.select('body')
 				.append('p')
 				.text('here')
 				.on('click',function(){
 					

 					chart_r= 2
 					xyScale = d3.scale.linear()
 					        .domain([-chart_r, chart_r])
 					        .range([pad, width-pad]);
 					rScale = d3.scale.linear()
 					        .domain([0, chart_r])
 					        .range([0, (width-2*pad)/2]); 
 					
 					svg.selectAll('.r')
 							 .transition()
 							 .attr('cx',Rcx)
 				     	 	 .attr('cy',Rcy)
 				     	 	 .attr('r',Rr);
 					svg.selectAll('.x')
 							 .transition()
 							 .attr('cx',Xcx)
 				     	 	 .attr('cy',Xcy)
 				     	 	 .attr('r',Xr);
 					})
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Test</title>
	<script type="text/javascript" src="d3/d3.js"></script>
	<style type="text/css">
	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px; /* Gets overriden by D3-assigned height below */
	margin-right: 2px;
	background-color: teal;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	// smith chart otions
	var chart_r = 1
	var chartType = 'z'// 'z' or 'y'
	var strokeWidth = 1.5
	// svg options
	var pad = 20
	var width = 300
	var height = width

	// these need to be dynamic based on a zoom level
	var rHeavy = [0,1];
	var xHeavy = [1,-1];
	var rLight =[ 0.2, 0.5, 2.0, 5.0 ]
	var xLight = [ 0.2, 0.5, 2.0 , 5.0, -0.2, -0.5, -2.0, -5.0 ]

	xyScale = d3.scale.linear()
	.domain([-chart_r, chart_r])
	.range([pad, width-pad]);
	rScale = d3.scale.linear()
	.domain([0, chart_r])
	.range([0, (width-2*pad)/2]);

	var flipme = 1
	if (chartType == 'y'){flipme = -1};


	Rcx = function(r){
	return xyScale(r/(1+r)*flipme)
	};
	Rcy = function(r){
	return xyScale(0)
	};
	Rr = function(r){
	return rScale(1/(1+r))
	};
	Xcx = function(x){
	return xyScale(1*flipme)
	};
	Xcy = function(x){
	return xyScale(1/x)
	};
	Xr = function(x){
	return rScale(Math.abs(1/x))
	};


	var svg = d3.select("body").append('svg')

	svg.attr('width',width)
	.attr('height',height)
	.attr('fill', 'rgba(0,0,0,0)')
	.attr('stroke','black')
	.attr('stroke-width',strokeWidth);






	var rLightCircles = svg.selectAll('circle.rLight')
	.data(rLight)
	.enter()
	.append('circle')
	.attr('class','r Light')
	.attr('stroke','grey')
	.attr('cx',Rcx)
	.attr('cy',Rcy)
	.attr('r',Rr);



	var xLightCircles = svg.selectAll('circle.xLight')
	.data(xLight)
	.enter()
	.append('circle')
	.attr('class','x Light')
	.attr('stroke','grey')
	.attr('cx',Xcx)
	.attr('cy',Xcy)
	.attr('r',Xr);

	var rHeavyCircles = svg.selectAll('circle.rHeavy')
	.data(rHeavy)
	.enter()
	.append('circle')
	.attr('class','r Heavy')
	.attr('stroke','black')
	.attr('cx',Rcx)
	.attr('cy',Rcy)
	.attr('r',Rr);



	var xHeavyCircles = svg.selectAll('circle.xHeavy')
	.data(xHeavy)
	.enter()
	.append('circle')
	.attr('class','x Heavy')
	.attr('stroke','black')
	.attr('cx',Xcx)
	.attr('cy',Xcy)
	.attr('r',Xr);

	svg.append('clipPath')
	.attr('id','chart-area')
	.append('circle')
	.attr('cx',Rcx(0))
	.attr('cy',Rcy(0))
	.attr('r',rScale(1));

	svg.selectAll(['.x','.r'])
	.attr("clip-path", "url(#chart-area)")

	d3.select('body')
	.append('p')
	.text('here')
	.on('click',function(){


	chart_r= 2
	xyScale = d3.scale.linear()
	.domain([-chart_r, chart_r])
	.range([pad, width-pad]);
	rScale = d3.scale.linear()
	.domain([0, chart_r])
	.range([0, (width-2*pad)/2]);

	svg.selectAll('.r')
	.transition()
	.attr('cx',Rcx)
	.attr('cy',Rcy)
	.attr('r',Rr);
	svg.selectAll('.x')
	.transition()
	.attr('cx',Xcx)
	.attr('cy',Xcy)
	.attr('r',Xr);
	})
	</script>
	</body>
	</html>