Skip to content

Instantly share code, notes, and snippets.

@sampathweb
Created August 7, 2016 23:37
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 sampathweb/1c1ecc991d2e1039277db417b7c6ba1a to your computer and use it in GitHub Desktop.
Save sampathweb/1c1ecc991d2e1039277db417b7c6ba1a to your computer and use it in GitHub Desktop.
Anscombe Quartet II
license: gpl-3.0
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body {
font-family: arial, sans;
width: 720px;
margin: 20px auto;
}
svg {
/*border:1px solid #f0f;*/
}
.axis text {
font-size: 12px;
fill: #777;
}
.axis path {
display: none;
}
.axis line {
stroke-width:1px;
stroke: #ccc;
stroke-dasharray: 2px 2px;
}
.anscombe-circle-group text {
fill: #aaa;
font-size: 11px;
}
.anscombe-circle-group circle {
fill: red;
stroke: #fff;
stroke-width:1px;
}
</style>
</head>
<body>
<script>
//JS to go here
var data = [
{"group": "II", "x":10, "y" : 9.14},
{"group": "II", "x":8, "y" : 8.14},
{"group": "II", "x":13, "y" : 8.74},
{"group": "II", "x":9, "y" : 8.77},
{"group": "II", "x":11, "y" : 9.26},
{"group": "II", "x":14, "y" : 8.1},
{"group": "II", "x":6, "y" : 6.13},
{"group": "II", "x":4, "y" : 3.1},
{"group": "II", "x":12, "y" : 9.13},
{"group": "II", "x":7, "y" : 7.26},
{"group": "II", "x":5, "y" : 4.74}
];
var margin = {top: 20, right: 40, bottom: 20, left: 10};
var width = 720 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
.domain([4, 15]);
var y = d3.scale.linear()
.range([height, 0])
.domain([2, 11]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(8)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(-width)
.tickPadding(8)
.orient("right");
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", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width) + ",0)")
.call(yAxis);
var circleGroup = svg.selectAll(".anscombe-circle-group")
.data(data)
.enter()
.append("g")
.attr("class", "anscombe-circle-group")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
circleGroup.append("circle")
.attr("r", 5);
circleGroup.append("text")
.text(function(d) { return "(" + d.x + "," + d.y + ")"; })
.attr("dx", 6);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment