Skip to content

Instantly share code, notes, and snippets.

@larskotthoff
Forked from iblind/index.html
Created October 18, 2015 05:25
Show Gist options
  • Save larskotthoff/63a472bcf01f95c36f38 to your computer and use it in GitHub Desktop.
Save larskotthoff/63a472bcf01f95c36f38 to your computer and use it in GitHub Desktop.
<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment