larskotthoff/index.html

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