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