xxxxxxxxxx<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="https://d3js.org/d3.v3.js"></script> </head> <body> <h1>Australian energy by fuel type</h1> <img src="https://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="https://www.industry.gov.au/Office-of-the-Chief-Economist/Publications/Pages/Australian-energy-statistics.aspx#">Department of Industry and Science</a> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js