block by timelyportfolio 3165561

groups axis error fix

Full Screen

index.html

<!doctype html>
<html>
<head></head>
<body>
<script  src="//d3js.org/d3.v2.min.js?2.9.1"></script>     
<script>
	var margin = {top: 20, right: 15, bottom: 60, left: 60};
	var width = 700 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;
		
	
	d3.csv("local.csv",
		function(data) {
			//convert data to ints
			data.forEach(function(d){
				d.NorthErr = +d.NorthErr;
				d.EastErr = +d.EastErr;
				});
			var x= d3.scale.linear()
				.domain([d3.min(data, function(d){
					return d.EastErr;
					}),d3.max(data, function(d){
					return d.EastErr;
					})])
				.range([0,width])
                .nice();
			
			var y= d3.scale.linear()
				.domain([d3.min(data, function(d){
					return d.NorthErr;
					}),d3.max(data, function(d){
					return d.NorthErr;
					})])
				//.domain([0,d3.max(ydata)])
				.range([height,0])
                .nice();
				
			var chart = d3.select('body').append('svg:svg')
				.attr('width',width+margin.right+margin.left)
				.attr('height',height+margin.top+margin.bottom)
				.attr('class','chart');
			
			var main = chart.append('g')
				.attr('transform','translate('+margin.left+','+margin.top+')')
				.attr('width',width)
				.attr('height',height)
				.attr('class','main');
			//drawing x axis	
			var xAxis = d3.svg.axis()
				.scale(x)
				.orient('bottom');
				
			main.append('g')
				.call(xAxis)
                      .attr("transform", "translate(0," + y(0) + ")");
			//drawing  y axis
			var yAxis=d3.svg.axis()
				.scale(y)
				.orient('left');
				
			main.append('g')
				.call(yAxis)
                      .attr("transform", "translate(" + x(0) + ",0)");
				
			// draw the graph object
			var g = main.append("svg:g");
			
			g.selectAll("scatter-dots")
				.data(data)
				//.data(ydata)
				.enter().append("svg:circle")
				.attr("cy", function (d){
					return y(d.NorthErr);
					})
				.attr("cx", function(d){
					return x(d.EastErr);
					})
				.attr("r",5)
				.style("opacity",0.3);
			
			}
		);
	</script>	
</body>
</html>