Last active
March 24, 2016 01:28
-
-
Save budparr/0906df2a2de035da95d6 to your computer and use it in GitHub Desktop.
Test block
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 </title> | |
| <style media="screen"> | |
| svg { | |
| border: 1px solid #f0f; | |
| } | |
| circle { | |
| fill: red; | |
| stroke: steelblue; | |
| stroke-width: 1; | |
| } | |
| .tick line { | |
| stroke: red; | |
| stroke-width: 3; | |
| } | |
| .domain { | |
| fill: none; | |
| stroke: steelblue; | |
| } | |
| svg { | |
| overflow: visible; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| var body = d3.select("body") | |
| body.append("h1") | |
| .text("Anscombe's Quartet Group II") | |
| .attr("class", "exercise-hed"); | |
| var | |
| width = 600; | |
| height = 300; | |
| var container = body.append("div") | |
| .attr("class", "container"); | |
| var svg = container.append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var rad = 2; | |
| var quartet = [ | |
| {"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 xMin = d3.min(quartet, function(d){ | |
| return d.x | |
| }); | |
| var xMax = d3.max(quartet, function(d){ | |
| return d.x | |
| }); | |
| var xExt = d3.extent(quartet, function(d) { | |
| return d.x; | |
| }); | |
| var xScale = d3.scale.linear() | |
| .range([0,width]) | |
| .domain([xMin,xMax]); | |
| var yScale = d3.scale.linear() | |
| .range([height, 0]) | |
| .domain( | |
| d3.extent(quartet, function(d){ | |
| return d.y; | |
| }) | |
| ); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .tickSize(height) | |
| .orient("bottom"); | |
| var svg = d3.select("svg"); | |
| var rad = 3; | |
| // quartet.forEach(function(d) { | |
| // svg.append("circle") | |
| // .attr("cx", d.x) | |
| // .attr("cy", d.y) | |
| // .attr("r", rad); | |
| // | |
| // }); | |
| //calling this a variable is one selection that describes all circles | |
| svg.selectAll(".anscombe-circle") ///<-- look up this selectAll | |
| .data(quartet) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "anscombe-circle") | |
| .attr("r", rad) | |
| .attr("cx", function(d) { //d can be anything, as long as they match | |
| //console.log("d", d); | |
| return xScale(d.x); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.y); | |
| }); | |
| svg.append("g") | |
| .call(xAxis); | |
| // svg.append("circle") | |
| // .attr("cx", 10) | |
| // .attr("cy", 9.14) | |
| // .attr("r", rad); | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 8) | |
| // .attr("cy", 8.14) | |
| // .attr("r", rad); | |
| // | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 13) | |
| // .attr("cy", 8.74) | |
| // .attr("r", rad); | |
| // | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 9) | |
| // .attr("cy", 8.77) | |
| // .attr("r", rad); | |
| // | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 11) | |
| // .attr("cy", 9.26) | |
| // .attr("r", rad); | |
| // | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 14) | |
| // .attr("cy", 8.1) | |
| // .attr("r", rad); | |
| // | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 6) | |
| // .attr("cy", 6.13) | |
| // .attr("r", rad); | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 4) | |
| // .attr("cy", 3.1) | |
| // .attr("r", rad); | |
| // | |
| // // 12 9.13 | |
| // // 7 7.26 | |
| // // 5 4.74 | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 12) | |
| // .attr("cy", 9.13) | |
| // .attr("r", rad); | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 7) | |
| // .attr("cy", 7.26) | |
| // .attr("r", rad); | |
| // | |
| // svg.append("circle") | |
| // .attr("cx", 5) | |
| // .attr("cy", 4.74) | |
| // .attr("r", rad); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment