Last active
September 20, 2015 18:10
-
-
Save scotthmurray/167f1aa84ef1c75dbf16 to your computer and use it in GitHub Desktop.
Scatter plot with lines, test
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
| Year | Coal | OilLPG | Gas | Renewables | Uranium | |
|---|---|---|---|---|---|---|
| 1977 | 2146 | 977 | 256 | 200 | 231 | |
| 1978 | 2200 | 1016 | 283 | 202 | 234 | |
| 1979 | 2229 | 1005 | 315 | 200 | 323 | |
| 1980 | 2286 | 960 | 363 | 194 | 386 | |
| 1981 | 2637 | 934 | 416 | 207 | 1066 | |
| 1982 | 2798 | 909 | 462 | 212 | 2363 | |
| 1983 | 2988 | 894 | 466 | 205 | 2177 | |
| 1984 | 3143 | 1076 | 490 | 203 | 2082 | |
| 1985 | 3573 | 1248 | 523 | 215 | 2055 | |
| 1986 | 3947 | 1281 | 571 | 217 | 2092 | |
| 1987 | 4360 | 1270 | 588 | 217 | 2117 | |
| 1988 | 4035 | 1261 | 611 | 221 | 1971 | |
| 1989 | 4426 | 1145 | 628 | 231 | 2140 | |
| 1990 | 4685 | 1284 | 797 | 235 | 1922 | |
| 1991 | 4880 | 1276 | 840 | 239 | 2063 | |
| 1992 | 5177 | 1254 | 932 | 225 | 2044 | |
| 1993 | 5245 | 1236 | 978 | 247 | 1271 | |
| 1994 | 5261 | 1171 | 1065 | 255 | 1293 | |
| 1995 | 5665 | 1250 | 1175 | 262 | 1237 | |
| 1996 | 5746 | 1216 | 1204 | 272 | 2399 | |
| 1997 | 6139 | 1249 | 1226 | 285 | 2818 | |
| 1998 | 6617 | 1374 | 1276 | 283 | 2725 | |
| 1999 | 6663 | 1136 | 1333 | 283 | 3002 | |
| 2000 | 7046 | 1502 | 1317 | 267 | 3902 | |
| 2001 | 7549 | 1540 | 1375 | 266 | 4535 | |
| 2002 | 7952 | 1458 | 1389 | 257 | 3782 | |
| 2003 | 8019 | 1422 | 1462 | 277 | 4311 | |
| 2004 | 8262 | 1262 | 1463 | 279 | 4497 | |
| 2005 | 8792 | 1135 | 1638 | 280 | 5153 | |
| 2006 | 8887 | 1027 | 1701 | 284 | 4688 | |
| 2007 | 9360 | 1146 | 1801 | 288 | 4507 | |
| 2008 | 9384 | 1055 | 1875 | 286 | 4758 | |
| 2009 | 9761 | 1083 | 1961 | 261 | 4846 | |
| 2010 | 10519 | 1057 | 2084 | 297 | 3341 | |
| 2011 | 9970 | 1059 | 2225 | 299 | 3322 | |
| 2012 | 10632 | 993 | 2134 | 295 | 3599 | |
| 2013 | 11438 | 882 | 2439 | 329 | 4229 |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Australian energy by fuel type</title> | |
| <style type="text/css"> | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| background-color: white; | |
| padding: 50px; | |
| } | |
| h1 { | |
| font-size: 48px; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| margin-top: 0px; | |
| } | |
| h2 { | |
| font-size: 26px; | |
| font-style: normal ; | |
| } | |
| p { | |
| font-size: 14px; | |
| line-height: 18px; | |
| margin:0; | |
| } | |
| a { | |
| font-size: 14px; | |
| line-height: 18px; | |
| } | |
| ul { | |
| font-size: 14px; | |
| padding-left: 15px; | |
| } | |
| em { | |
| color: red; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| .label { | |
| fill: darkslategray; | |
| font-size: 10px; | |
| } | |
| .label2 { | |
| fill: white; | |
| font-size: 10px; | |
| } | |
| .barcolor { | |
| fill: cadetblue; | |
| } | |
| .barcolor:hover { | |
| fill: darkblue; | |
| } | |
| .circcolor { | |
| fill: cadetblue; | |
| } | |
| .circcolor:hover { | |
| fill: purple; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 10px; | |
| } | |
| .y.axis path, | |
| .y.axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <h1>Australian energy by fuel type</h1> | |
| <img src="http://proecogroup.eu/sites/default/files/images/proecogroupPropjekty.jpg"> | |
| <h2>Coal versus Oil</h2> | |
| <p>This is an exercise. The following bar chart was created using d3.</p> | |
| <p>The data shows the amount of energy from coal and from oil generated in Australia, from 1977 to 2013, in Petajoules (10<sup>15</sup> Joules).</p> | |
| <p>The x-axis shows the amount of energy from coal, while the y-axis shows the mount of energy generated from oil.</p> | |
| <p>X-axis and y-axis not to scale</p> | |
| <p>(pass the mouse over a circle to see the year it refers to)</p> | |
| <br> | |
| <script type="text/javascript"> | |
| var w = 700 | |
| var h = 550 | |
| var padding = [ 5, 10, 20, 50 ]; //Top, right, bottom, left | |
| var xScale = d3.scale.linear() | |
| .range([ padding [3], w - padding[1] ]); | |
| var yScale = d3.scale.linear() | |
| .range([ padding[0], h - padding[2] ]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(12); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(12); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //var next = d3.select(this).node().nextSibling; | |
| // Here is where I put the var = next, before the d3.csv. Is that the correct position? | |
| d3.csv("australianenergy.csv", function(data) { | |
| xScale.domain([ 0, d3.max(data, function(d) { | |
| return +d.Coal; | |
| }) * 1.1]); | |
| yScale.domain([ d3.max(data, function(d) { | |
| return +d.OilLPG; | |
| }) * 1.1, 0]); | |
| var circs = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| var lines = svg.selectAll("line") | |
| .data(data) | |
| .enter() | |
| .append("line"); | |
| circs.attr("cx", function(d) { | |
| return xScale(d.Coal) | |
| }) | |
| .attr("class", "circcolor") | |
| .attr("cy", function(d) { | |
| return yScale(d.OilLPG); | |
| }) | |
| .attr("r", 0.1) | |
| .append("title") | |
| .attr("class", "label") | |
| .text(function(d) { | |
| return "In the year of " + d.Year + ", Energy from Coal was " + d.Coal + " and from Oil was " + d.OilLPG + " Petajoules"; | |
| }); | |
| circs.sort(function(a, b) { | |
| return d3.ascending(+a.Coal, +b.Coal); | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(2000) | |
| .attr("r", 5); | |
| lines.attr("x1", function(d) { | |
| return xScale(d.Coal) | |
| }) | |
| .attr("y1", function(d) { | |
| return yScale(d.OilLPG) | |
| }) | |
| .attr("x2", function(d) { | |
| //If a next sibling exists… | |
| if (d3.select(this).node().nextSibling) { | |
| //Get the __data__ object for the next (sibling) element | |
| var nextData = d3.select(this).node().nextSibling.__data__; | |
| //Uncomment the following lines and watch the console | |
| //to see how this works | |
| // console.log(d3.select(this)); | |
| // console.log(d3.select(this).node()); | |
| // console.log(d3.select(this).node().nextSibling); | |
| // console.log(d3.select(this).node().nextSibling.__data__); | |
| // console.log(d3.select(this).node().nextSibling.__data__.Coal); | |
| // console.log(nextData); | |
| return xScale(nextData.Coal); | |
| } else { | |
| //Otherwise, just reuse the x1 value | |
| //(so this line is basically rendered as a point) | |
| return xScale(d.Coal); | |
| } | |
| }) | |
| .attr("y2", function(d) { | |
| //If a next sibling exists… | |
| if (d3.select(this).node().nextSibling) { | |
| //Get the __data__ object for the next (sibling) element | |
| var nextData = d3.select(this).node().nextSibling.__data__; | |
| return yScale(nextData.OilLPG); | |
| } else { | |
| //Otherwise, just reuse the y1 value | |
| //(so this line is basically rendered as a point) | |
| return yScale(d.OilLPG); | |
| } | |
| }) | |
| .style("stroke", 1) | |
| .style("stroke", "gray"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2]) +")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3]) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| <p> Source: Australian Energy Statistics.</p> | |
| <a href="http://www.industry.gov.au/Office-of-the-Chief-Economist/Publications/Pages/Australian-energy-statistics.aspx#">Department of Industry and Science</a> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment