Last active
May 30, 2018 21:10
-
-
Save soyeonjeong/7e1dd1b191fc58d3255d9ce59f10fff0 to your computer and use it in GitHub Desktop.
Anscombe's Quartet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| body { | |
| padding: 50px; | |
| font-family: 'Libre Franklin', sans-serif; | |
| font-weight: lighter; | |
| } | |
| svg { | |
| overflow: visible; | |
| } | |
| circle { | |
| fill: seagreen; | |
| stroke: white; | |
| } | |
| .axisGrey line{ | |
| stroke: grey; | |
| } | |
| .axisGrey path { | |
| stroke: grey; | |
| } | |
| .axisGrey text { | |
| fill: grey; | |
| } | |
| h2 { | |
| font-weight: lighter; | |
| } | |
| h4 { | |
| font-weight:lighter; | |
| } | |
| </style> | |
| <body> | |
| <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"> | |
| </body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| //put everything that touches data into the callback function here | |
| d3.tsv("quartet.tsv", ready); | |
| var margin = {top: 0, right: 20, bottom: 20, left: 20}; | |
| var height = 300 - margin.top - margin.bottom; | |
| var width = 400 - margin.left - margin.right; | |
| function ready(data) { | |
| dataByGroup = d3.nest() | |
| .key(function(d) { return d.group}) | |
| .entries(data) | |
| console.log(dataByGroup) | |
| var body = d3.select("body"); | |
| body.append("h2") | |
| .text("Anscombe's Quartet") | |
| var quartetGroup = body.selectAll(".quartet-group") | |
| .data(dataByGroup) | |
| .enter() | |
| .append("div") | |
| quartetGroup.append("h4") | |
| .text(function(d) { return "Group "+ d.key}) | |
| var x = d3.scaleLinear() | |
| //data range min & max | |
| .domain([0, 20]) | |
| //pixel range | |
| .range([0, width]); | |
| var y = d3.scaleLinear() | |
| .domain([0, 20]) | |
| .range([height, 0]); | |
| //d3 axes creation | |
| var xaxis = d3.axisBottom(x) | |
| .tickValues([5, 10, 15, 20]) | |
| var yaxis = d3.axisLeft(y) | |
| .tickValues([5, 10, 15, 20]) | |
| var svg = quartetGroup.append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom + 30) | |
| //create margins so that content doesn't leave the svg width & height | |
| .append ("g") | |
| .attr("transform", "translate(" + (margin.right) + "," + margin.top + ")") | |
| .attr("class", "axisGrey"); | |
| //append g to not transform the whole svg | |
| svg.append("g") | |
| //transform attribute gets string "translate(XXX,YYY)" | |
| .attr("transform", "translate(0," + height + ")") | |
| //function will create an axis | |
| .call(xaxis); | |
| svg.append("g") | |
| .call(yaxis); | |
| //BASIS OF D3! Data join: Create one circle for every object that is in that array. Basically a for loop. | |
| //Go find all the elements that are circles. But there are no circles. Think of it more as "here are all the elements I want to create" | |
| var circle = svg.selectAll("circle") | |
| .data(function(d) { return d.values}) | |
| //Creates initial join of data to elements. The data can "enter" the elements | |
| .enter() | |
| //I'm creating all these circles based on the data | |
| .append("circle") | |
| //if you just list one value, it will be the same for all of them | |
| .attr("r", 3) | |
| //if you want to loop according to the data, do so as a function: | |
| .attr("cx", function(d) { | |
| return x(d.x); | |
| //return data[i].x | |
| }) | |
| .attr("cy", function(d) { | |
| return y(d.y); | |
| //return d[i].y | |
| }) | |
| }; | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| group | x | y | |
|---|---|---|---|
| I | 10 | 8.04 | |
| I | 8 | 6.95 | |
| I | 13 | 7.58 | |
| I | 9 | 8.81 | |
| I | 11 | 8.33 | |
| I | 14 | 9.96 | |
| I | 6 | 7.24 | |
| I | 4 | 4.26 | |
| I | 12 | 10.84 | |
| I | 7 | 4.82 | |
| I | 5 | 5.68 | |
| II | 10 | 9.14 | |
| II | 8 | 8.14 | |
| II | 13 | 8.74 | |
| II | 9 | 8.77 | |
| II | 11 | 9.26 | |
| II | 14 | 8.1 | |
| II | 6 | 6.13 | |
| II | 4 | 3.1 | |
| II | 12 | 9.13 | |
| II | 7 | 7.26 | |
| II | 5 | 4.74 | |
| III | 10 | 7.46 | |
| III | 8 | 6.77 | |
| III | 13 | 12.74 | |
| III | 9 | 7.11 | |
| III | 11 | 7.81 | |
| III | 14 | 8.84 | |
| III | 6 | 6.08 | |
| III | 4 | 5.39 | |
| III | 12 | 8.15 | |
| III | 7 | 6.42 | |
| III | 5 | 5.73 | |
| IV | 8 | 6.58 | |
| IV | 8 | 5.76 | |
| IV | 8 | 7.71 | |
| IV | 8 | 8.84 | |
| IV | 8 | 8.47 | |
| IV | 8 | 7.04 | |
| IV | 8 | 5.25 | |
| IV | 19 | 12.5 | |
| IV | 8 | 5.56 | |
| IV | 8 | 7.91 | |
| IV | 8 | 6.89 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment