block by larskotthoff 63a472bcf01f95c36f38

63a472bcf01f95c36f38

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<style type="text/css">
	.axis path,
	.axis line {
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

	.axis text {
		font-family: sans-serif;
		font-size: 10px;
	}
	
	text {
		font-family: Arial;
		font-size: 11px;
	}
	

	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>

<body>
	
	<svg style="width:700px;height:500px"></svg>
	
	<script type="text/javascript">
	
	var w = 700,
		h = 450,
		margin=30;

	//Loading initital data + scatterplot
	d3.csv("overall_table_so.csv", type, function(data){

		
		var groups = ["dogs", "wolves", "cats", "lions"];
		
		
		var svg = d3.select("body")
		 	 		.select("svg")
					.attr("height", h-margin)
					.attr("width", w-margin);
		
		var xScale = d3.scale.linear()
					.domain([0, d3.max(data, function(d){return d.score;})])
					.range([0+margin, w-margin]);
					
		var yScale = d3.scale.linear()
					.domain([d3.max(data, function(d){return d.number;}),0])
					.range([0+margin, h]);
					
		var rScale = d3.scale.linear()
					.domain([0, d3.max(data, function(d) { return d.count;})])
					.range([3,13]);
					
		var colScale = d3.scale.ordinal()
					.domain(groups)
					.range(["#a6611a", "#dfc27d", "#80cdc1", "#018571"]);
					
		var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient("left");	
					
		var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("bottom");
		
		var circles = svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")
					.attr({
						cx: function(d) {return xScale(d.score);},
						cy: function(d) {return yScale(d.number);},
						r: function(d){return rScale(d.count);},
						class: function(d) {return d.location},
						id: function(d) {return d.animal}
					})
					.style({
						fill: function(d) {return colScale(d.animal);},
						opacity: 0.6
					});
					
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0,"+ (h)+")")
			.call(xAxis);
	
		svg.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(" + margin+",0)")
			.call(yAxis);	
		
		// Add an x-axis label.
		svg.append("text")
		    .attr("class", "xAxis label")
		    .attr("text-anchor", "end")
		    .attr("x", w-30)
		    .attr("y", h - 6)
		    .text("X");

		// Add a y-axis label.
		svg.append("text")
		    .attr("class", "yAxis label")
		    .attr("text-anchor", "end")
			.attr("x", -((h-margin)/2))
		    .attr("y", 40)
		    .attr("dy", ".75em")
		    .attr("transform", "rotate(-90)")
		    .text("Y");	
			


		//Add 4 g groups for each of the 4 animals types	
		var yourTargetGroup=svg.append("g");
/*		var groupWolves=svg.append("g");
		var groupCats=svg.append("g");
		var groupLions=svg.append("g");  
		*/
		
		//Creating selections of circles to append into each of the 4 animal groups
		
		var removed= d3.selectAll("circle#dogs").remove();
/*		var rmCircWolves= svg.selectAll("circle#wolves").remove()
		var rmCircCats= svg.selectAll("circle#cats").remove()
		var rmCircLions= svg.selectAll("circle#lions").remove()
		*/
		
		

		
		removed.each(function(){
			var that = this;
			yourTargetGroup.append(function() { return that; });
		});
		
		
		
			
		//Add legend rectangles	
		svg.selectAll("rect.lgnd")
			.data(groups)
			.enter()
			.append("rect")
			.attr({

				x: function(d,i) {return 50+(i*40);},
				y:10,
				width:20,
				height:15,
				opacity: 0.6,
				class:"lgnd",				
				id: function(d,i) {
					if (i==0) {
						return "dogs";
				}
				else if (i==1){
					return "wolves";
				}
				else if (i==2){
					return "cats";
				}
				else return "lions"
					}
			})
			.style("fill", colScale);
		
		
		
		
	});
	
	// coerce strings in data to numbers
	function type(d) {
	  d.score = +d.score;
	  d.number = +d.number;
	  d.count = +d.count;
	  return d;
	}

		
	</script>
</body>


</html>

overall_table_so.csv

location,animal,score,number,count
Forest1,dogs,225.2,22,574
Forest1,wolves,219.11,25,100
Forest1,cats,280.84,21,144
Forest1,lions,101.17,29,16
Plain3,dogs,228.41,27,445
Plain3,wolves,244.995,26,641
Plain3,cats,141.97,20,274
Plain3,lions,116.685,20,45
Forest2,dogs,219.11,25,265
Forest2,wolves,261.58,25,440
Forest2,cats,280.84,22,451
Forest2,lions,259.44,26,22
Island2,dogs,227.14,22,216
Island2,wolves,101.11,22,244
Island2,cats,121.5,27,16
Island2,lions,220.92,22,7
Island1,dogs,211.76,22,704
Island1,wolves,251.415,24,414
Island1,cats,294.215,28,461
Island1,lions,179.28,22,414
Desert1,dogs,186.68,27,240
Desert1,wolves,214.295,25,174
Desert1,cats,111.115,22,440
Desert1,lions,151.6,20,44
Desert2,dogs,207.01,26,216
Desert2,wolves,265.125,26,617
Desert2,cats,118.62,27,224
Desert2,lions,282.98,29,22
Plain2,dogs,208.615,24,411
Plain2,wolves,269.07,24,264
Plain2,cats,258.17,20,71
Plain2,lions,249.275,27,40
Plain1,dogs,224.11,24,262
Plain1,wolves,216.97,22,544
Plain1,cats,216.97,22,444
Plain1,lions,171.91,28,45