iblind · October 18, 2015 04:35
diff --git a/index.html b/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(){
 			yourTargetGroup.append(this);
 		});
 		
 		
 		
 			
 		//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>
 	
diff --git a/overall_table_so.csv b/overall_table_so.csv
	<!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(){
	yourTargetGroup.append(this);
	});




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