arsenovic/index.html

## 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>