Created
January 26, 2016 02:09
-
-
Save kpq/5ca718e44b49167a3b58 to your computer and use it in GitHub Desktop.
A terrible rendering of Anscombe's quarter, No. 2
This file contains hidden or 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"> | |
| /*css to go here*/ | |
| .ancombe-chart { | |
| border: 1px solid #f0f; | |
| } | |
| </style> | |
| <body> | |
| <h1>Class 2</h1> | |
| <div class="g-chart-container"> | |
| </div> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script> | |
| //JS to go here | |
| var data = [ | |
| {"x":10, "y": 9.14}, | |
| {"x":8, "y": 8.14}, | |
| {"x":13, "y": 8.74}, | |
| {"x":9, "y": 8.77}, | |
| {"x":11, "y": 9.26}, | |
| {"x":14, "y": 8.1}, | |
| {"x":6, "y": 6.13}, | |
| {"x":4, "y": 3.1}, | |
| {"x":12, "y": 9.13}, | |
| {"x":7, "y": 7.26}, | |
| {"x":5, "y": 4.74} | |
| ]; | |
| var margin = {top: 120, right: 10, bottom: 20, left: 120}; | |
| var width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var xScale = d3.scale.linear() | |
| .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"); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left"); | |
| var svg = d3.select(".g-chart-container").append("svg") | |
| .attr("class", "ancombe-chart") | |
| .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("text") | |
| .attr("x", 0) | |
| .attr("y", 10) | |
| .text("hello"); | |
| d3.select("svg").append("text") | |
| .attr("x", 0) | |
| .attr("y", 10) | |
| .text("hello2"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| var circle = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 5) | |
| .attr("cx", function(d) { | |
| return xScale(d.x); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.y); | |
| }); | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment