<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
svg {
border: 1px solid rgb(40,200,130);
}
circle {
fill-opacity: 0.8;
}
</style>
<body>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var xdim = "xPos",
ydim = "yPos",
colordim = "group";
var margin = { top: 12, right: 12, bottom: 30, left: 30 },
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// create quantitative linear scales
var xscale = d3.scaleLinear()
.domain([2, 20])
.range([0, width]);
var yscale = d3.scaleLinear()
.domain([2, 14])
.range([height, 0]);
var color = d3.scaleOrdinal()
.domain(["I", "II", "III", "IV"])
.range(["#30C7A4","#076004","#600437","#C90975"]);
// load the data from a tsv file
d3.tsv("quartet.tsv", function(error, data) {
if (error) console.log(error);
// filter
/*
data = data.filter(function(d) {
return d.group == "II";
});
*/
// coerce the data to a number
data.forEach(function(d) {
d[xdim] = +d[xdim];
d[ydim] = +d[ydim];
});
var xAxis = d3.axisBottom()
.scale(xscale);
var yAxis = d3.axisLeft()
.scale(yscale);
// adding an svg for our visualization
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + [margin.left, margin.top] + ")");
svg.append("g")
.attr("class", "y--axis")
.call(yAxis);
svg.append("g")
.attr("class", "x--axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// join the data to some circle elements
var enter = svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", function(d) { return color(d[colordim]); })
.attr("cx", function(d) { return xscale(d[xdim]); })
.attr("cy", function(d) { return yscale(d[ydim]); })
.attr("r", 5)
console.log(data);
});
</script>