Skip to content

Instantly share code, notes, and snippets.

@justinav

justinav/README.md

Last active June 14, 2016 20:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinav/b92c926b1c84964c29304d2d9f82bb5b to your computer and use it in GitHub Desktop.
Save justinav/b92c926b1c84964c29304d2d9f82bb5b to your computer and use it in GitHub Desktop.
Download ZIP
FirstAnscombesQuartetExample_SeriesIII
Raw
README.md

Anscombe's Quartet III

assignment

Metis Data Visualization with D3.js: Class 2

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Anscombe's Quartet III</title>
</head>
<style type="text/css">
body{
font: 400 13px/1.2 sans-serif;
}
.chart {
display: block;
background: Linen;
margin: 2em auto;
padding: 10px;
}
.axis path {
fill: none;
}
.axis path,
.axis line {
stroke: #000;
stroke-width: 1;
opacity: 0.3;
}
.axis text {
font-size: 11px;
}
.anscombe-circle-groups {
font-size: 10px;
}
.anscombe-circles {
fill: Coral;
}
</style>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
var anscombeData = [
{'group': 'III', 'x': 10, 'y': 7.46},
{'group': 'III', 'x': 8, 'y': 6.77},
{'group': 'III', 'x': 13, 'y': 12.74},
{'group': 'III', 'x': 9, 'y': 7.11},
{'group': 'III', 'x': 11, 'y': 7.81},
{'group': 'III', 'x': 14, 'y': 8.84},
{'group': 'III', 'x': 6, 'y': 6.08},
{'group': 'III', 'x': 4, 'y': 5.39},
{'group': 'III', 'x': 12, 'y': 8.15},
{'group': 'III', 'x': 7, 'y': 6.42},
{'group': 'III', 'x': 5, 'y': 5.73}
]
var margin = {top: 30, right: 30, bottom: 30, left: 30};
var width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scale.linear()
// alternative: .domain(d3.extent(anscombeData, function(d) {return d.x; })).nice()
// alternative: .domain([d3.min(data, function(d) { return d.x; }),d3.max(data, function(d) { return d.x; })])
.domain([0,15])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0,15])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(15)
.tickSize(-width);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height)
.attr("y2", 0)
.style("stroke", "#000")
var circleGroups = svg.selectAll(".anscombe-circle-groups")
.data(anscombeData)
.enter().append("g")
.attr("class", "anscombe-circle-groups")
.attr("transform", function(d) {return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"})
circleGroups.append("text")
.attr("class",function(d,i) { return "T" + i })
.attr("dx", 6)
.attr("dy", 5)
.text(function(d) {return "(" + d.x + ", " + d.y + ")"; })
.style("fill", "none")
circleGroups.append("circle")
.attr("class", function(d,i){return "anscombe-circles T" + i; })
.attr("r", 5)
.on("mouseenter", function() {
var myClass = d3.select(this).attr("class").split(" ")[1];
d3.selectAll("." + myClass)
.style("fill", "#000")
})
.on("mouseleave", function() {
d3.selectAll(".anscombe-circle-groups")
.selectAll("text")
.style("fill","none")
d3.selectAll(".anscombe-circles")
.style("fill","Coral")
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment