Last active
September 2, 2018 13:23
-
-
Save stianSjoli/32ce8b18e1faec06e45daa744e25af48 to your computer and use it in GitHub Desktop.
Timeline of export/import of electricity between Norway and other countries. Data taken from table in Nøkkeltall 1974-2012, published by Statnett. Url: http://statnett.no/Kraftsystemet/Data-fra-kraftsystemet/Nokkeltall-1974-2012/
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"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" /> | |
| <style> | |
| text{ | |
| font-family:"Open Sans" | |
| } | |
| .axis-x text, .axis-y text { | |
| font-size: 1.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"><\/script> | |
| <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" /> | |
| <style> | |
| text{ | |
| font-family:"Open Sans" | |
| } | |
| .axis-x text, .axis-y text { | |
| font-size: 1.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| </body> | |
| <script> | |
| var data = [ | |
| {year:1974, change:5.7}, | |
| {year:1975, change:5.7}, | |
| {year:1976, change:6.8}, | |
| {year:1977, change:-1}, | |
| {year:1978, change:3.5}, | |
| {year:1979, change:4.7}, | |
| {year:1980, change:0.5}, | |
| {year:1981, change:5.3}, | |
| {year:1982, change:6.1}, | |
| {year:1983, change:13.5}, | |
| {year:1984, change:8.3}, | |
| {year:1985, change:0.6}, | |
| {year:1986, change:-2.1}, | |
| {year:1987, change:0.4}, | |
| {year:1988, change:5.8}, | |
| {year:1989, change:15.1}, | |
| {year:1990, change:15.9}, | |
| {year:1991, change:3}, | |
| {year:1992, change:8.7}, | |
| {year:1993, change:7.4}, | |
| {year:1994, change:-0.1}, | |
| {year:1995, change:6.5}, | |
| {year:1996, change:-9}, | |
| {year:1997, change:-4}, | |
| {year:1998, change: -3.6}, | |
| {year:1999, change:1.9}, | |
| {year:2000, change:19}, | |
| {year:2001, change:-3.6}, | |
| {year:2002, change:9.6}, | |
| {year:2003, change:-7.8}, | |
| {year:2004, change:-11.4}, | |
| {year:2005, change:12}, | |
| {year:2006, change:-0.9}, | |
| {year:2007, change:10}, | |
| {year:2008, change:13.8}, | |
| {year:2009, change:9.1}, | |
| {year:2010, change:-7.6}, | |
| {year:2011, change:3.2}, | |
| {year:2012, change:17.6} | |
| ]; | |
| var years = data.map(function(d){ | |
| return d.year; | |
| }); | |
| function getYear(d){ | |
| return d.year; | |
| } | |
| function getChange(d){ | |
| return d.change; | |
| } | |
| function color(d){ | |
| if(getChange(d) < 0){ | |
| return "red"; | |
| } else if(d.change === 0.0) return "silver"; | |
| else return "green"; | |
| } | |
| function isMajorTick(d){ | |
| return d.year % 10; | |
| } | |
| var width = 900; | |
| var barWidth = 15; | |
| var height = 500; | |
| var padding = 50; | |
| var xScale = d3.scalePoint() | |
| .domain(years) | |
| .range([padding, width - padding]); | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(data, getChange)]) | |
| .nice() | |
| .range([height - padding, padding]) | |
| var xAxis = d3.axisBottom(xScale) | |
| .tickValues(years) | |
| .tickFormat(function(d,i){ | |
| if(d % 5 === 0){ | |
| return d; | |
| } else return ""; | |
| }) | |
| var yAxis = d3.axisLeft(yScale); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width); | |
| svg.append("g") | |
| .attr("transform", "translate(" + 20 + "," + ((height - padding)) + ")") | |
| .classed("axis-x",true) | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("transform", "translate(" + padding + "," + "0)") | |
| .classed("axis-y",true) | |
| .call(yAxis); | |
| svg.select("g.axis-y") | |
| .append("text") | |
| .attr("font-size", 14) | |
| .attr("fill", "black") | |
| .attr("text-anchor", "middle") | |
| .attr("transform", "rotate(-90)") | |
| .attr("x", -(height-padding)/2) | |
| .attr("y", -35) | |
| .text("TWh") | |
| svg.select("g.axis-x") | |
| .append("text") | |
| .attr("font-size", 14) | |
| .attr("fill", "black") | |
| .attr("text-anchor", "middle") | |
| .attr("x", width/2) | |
| .attr("y", 40) | |
| .text("År") | |
| var bars = svg.selectAll(".bar") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .classed("bar", true); | |
| bars.append("rect") | |
| .attr("x", function(d){ | |
| return 20 + xScale(getYear(d)) - (barWidth/2); | |
| }) | |
| .attr("y", function(d){ | |
| return yScale(Math.abs(getChange(d))); | |
| }) | |
| .attr("height", function(d){ | |
| return (height-padding) - yScale(Math.abs(getChange(d))); | |
| }) | |
| .attr("width", function(d){ | |
| return barWidth; | |
| }) | |
| .attr("fill", color); | |
| bars.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","11px") | |
| .attr("fill", "black") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", 0.2) | |
| .attr("x",function(d){ | |
| return 20 + xScale(getYear(d)); | |
| }) | |
| .attr("y",function(d){ | |
| return yScale(Math.abs(getChange(d))) - 2; | |
| }) | |
| .text(function(d){ | |
| var item = getChange(d); | |
| if(item === d3.min(data, getChange)){ | |
| return Math.abs(item); | |
| } else if(item === d3.max(data, getChange)){ | |
| return item; | |
| } else { | |
| return ""; | |
| } | |
| }) | |
| <\/script> | |
| </html> | |
| </script> | |
| </body> | |
| <script> | |
| var data = [ | |
| {year:1974, change:5.7}, | |
| {year:1975, change:5.7}, | |
| {year:1976, change:6.8}, | |
| {year:1977, change:-1}, | |
| {year:1978, change:3.5}, | |
| {year:1979, change:4.7}, | |
| {year:1980, change:0.5}, | |
| {year:1981, change:5.3}, | |
| {year:1982, change:6.1}, | |
| {year:1983, change:13.5}, | |
| {year:1984, change:8.3}, | |
| {year:1985, change:0.6}, | |
| {year:1986, change:-2.1}, | |
| {year:1987, change:0.4}, | |
| {year:1988, change:5.8}, | |
| {year:1989, change:15.1}, | |
| {year:1990, change:15.9}, | |
| {year:1991, change:3}, | |
| {year:1992, change:8.7}, | |
| {year:1993, change:7.4}, | |
| {year:1994, change:-0.1}, | |
| {year:1995, change:6.5}, | |
| {year:1996, change:-9}, | |
| {year:1997, change:-4}, | |
| {year:1998, change: -3.6}, | |
| {year:1999, change:1.9}, | |
| {year:2000, change:19}, | |
| {year:2001, change:-3.6}, | |
| {year:2002, change:9.6}, | |
| {year:2003, change:-7.8}, | |
| {year:2004, change:-11.4}, | |
| {year:2005, change:12}, | |
| {year:2006, change:-0.9}, | |
| {year:2007, change:10}, | |
| {year:2008, change:13.8}, | |
| {year:2009, change:9.1}, | |
| {year:2010, change:-7.6}, | |
| {year:2011, change:3.2}, | |
| {year:2012, change:17.6} | |
| ]; | |
| var years = data.map(function(d){ | |
| return d.year; | |
| }); | |
| function getYear(d){ | |
| return d.year; | |
| } | |
| function getChange(d){ | |
| return d.change; | |
| } | |
| function color(d){ | |
| if(getChange(d) < 0){ | |
| return "red"; | |
| } else if(d.change === 0.0) return "silver"; | |
| else return "green"; | |
| } | |
| function isMajorTick(d){ | |
| return d.year % 10; | |
| } | |
| var width = 900; | |
| var barWidth = 15; | |
| var height = 500; | |
| var padding = 50; | |
| var xScale = d3.scalePoint() | |
| .domain(years) | |
| .range([padding, width - padding]); | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(data, getChange)]) | |
| .nice() | |
| .range([height - padding, padding]) | |
| var xAxis = d3.axisBottom(xScale) | |
| .tickValues(years) | |
| .tickFormat(function(d,i){ | |
| if(d % 5 === 0){ | |
| return d; | |
| } else return ""; | |
| }) | |
| var yAxis = d3.axisLeft(yScale); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width); | |
| svg.append("g") | |
| .attr("transform", "translate(" + 20 + "," + ((height - padding)) + ")") | |
| .classed("axis-x",true) | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("transform", "translate(" + padding + "," + "0)") | |
| .classed("axis-y",true) | |
| .call(yAxis); | |
| svg.select("g.axis-y") | |
| .append("text") | |
| .attr("font-size", 14) | |
| .attr("fill", "black") | |
| .attr("text-anchor", "middle") | |
| .attr("transform", "rotate(-90)") | |
| .attr("x", -(height-padding)/2) | |
| .attr("y", -35) | |
| .text("TWh") | |
| svg.select("g.axis-x") | |
| .append("text") | |
| .attr("font-size", 14) | |
| .attr("fill", "black") | |
| .attr("text-anchor", "middle") | |
| .attr("x", width/2) | |
| .attr("y", 40) | |
| .text("År") | |
| var bars = svg.selectAll(".bar") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .classed("bar", true); | |
| bars.append("rect") | |
| .attr("x", function(d){ | |
| return 20 + xScale(getYear(d)) - (barWidth/2); | |
| }) | |
| .attr("y", function(d){ | |
| return yScale(Math.abs(getChange(d))); | |
| }) | |
| .attr("height", function(d){ | |
| return (height-padding) - yScale(Math.abs(getChange(d))); | |
| }) | |
| .attr("width", function(d){ | |
| return barWidth; | |
| }) | |
| .attr("fill", color); | |
| bars.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","11px") | |
| .attr("fill", "black") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", 0.2) | |
| .attr("x",function(d){ | |
| return 20 + xScale(getYear(d)); | |
| }) | |
| .attr("y",function(d){ | |
| return yScale(Math.abs(getChange(d))) - 2; | |
| }) | |
| .text(function(d){ | |
| var item = getChange(d); | |
| if(item === d3.min(data, getChange)){ | |
| return Math.abs(item); | |
| } else if(item === d3.max(data, getChange)){ | |
| return item; | |
| } else { | |
| return ""; | |
| } | |
| }) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment