Skip to content

Instantly share code, notes, and snippets.

@kpq

kpq/index.html

Created March 6, 2018 02:04
Show Gist options
  • Save kpq/b82445743da203930b64783cc0d713bf to your computer and use it in GitHub Desktop.
Save kpq/b82445743da203930b64783cc0d713bf to your computer and use it in GitHub Desktop.
Download ZIP
A bad version of Anscombe's Quartet (Group 4)
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
svg {
border: 1px solid #ff00ff;
}
</style>
<body>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//JS to go here
var xScale = d3.scaleLinear()
.domain([0, 20])
.range([0, 300]);
var yScale = d3.scaleLinear()
.domain([0, 15])
.range([150, 0]);
var data = [
{"x":8, "y": 6.58, "group": "IV"},
{"x":8, "y": 5.76, "group": "IV"},
{"x":8, "y": 7.71, "group": "IV"},
{"x":8, "y": 8.84, "group": "IV"},
{"x":8, "y": 8.47, "group": "IV"},
{"x":8, "y": 7.04, "group": "IV"},
{"x":8, "y": 5.25, "group": "IV"},
{"x":19, "y": 12.5, "group": "IV"},
{"x":8, "y": 5.56, "group": "IV"},
{"x":8, "y": 7.91, "group": "IV"},
{"x":8, "y": 6.89, "group": "IV"}
];
// d3.select("svg").append("circle")
var body = d3.select("body");
body.append("h1")
.text("Hello 2");
var svg = body.append("svg");
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d,i) {
return xScale(d.x);
})
.attr("cy", function(d,i) {
return yScale(d.y);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment