Last active
August 27, 2018 21:22
-
-
Save stianSjoli/9b28b7e544519c062b014b354809d975 to your computer and use it in GitHub Desktop.
Scatterplot av strømproduksjon og forbruk i Norge i perioden 1974 til 2012. Informasjonen er hentet fra 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> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <meta charset=utf-8 /> | |
| <body> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v5.min.js"><\/script> | |
| <meta charset=utf-8 /> | |
| <body> | |
| </body> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis{ | |
| font-size:14px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width:1px; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <script> | |
| var data = [ | |
| {year:1974,production:76.5,consumption:70.8}, | |
| {year:1975,production:77.3,consumption:71.6}, | |
| {year:1976,production:82,consumption:75.2}, | |
| {year:1977,production:72.3,consumption:73.3}, | |
| {year:1978,production:81,consumption:77.5}, | |
| {year:1979,production:89,consumption:84.3}, | |
| {year:1980,production:84.1,consumption:83.6}, | |
| {year:1981,production:93.2,consumption:87.9}, | |
| {year:1982,production:93,consumption:86.9}, | |
| {year:1983,production:106.4,consumption:92.9}, | |
| {year:1984,production:106.6,consumption:98.3}, | |
| {year:1985,production:103.1,consumption:102.5}, | |
| {year:1986,production:97.1,consumption:99.2}, | |
| {year:1987,production:104.1,consumption:103.7}, | |
| {year:1988,production:110.2,consumption:104.4}, | |
| {year:1989,production:119.3,consumption:104.2}, | |
| {year:1990,production:121.8,consumption:105.9}, | |
| {year:1991,production:111.1,consumption:108.1}, | |
| {year:1992,production:117.7,consumption:109}, | |
| {year:1993,production:119.7,consumption:112.3}, | |
| {year:1994,production:113.5,consumption:113.6}, | |
| {year:1995,production:123.5,consumption:117}, | |
| {year:1996,production:104.9,consumption:113.9}, | |
| {year:1997,production:112,consumption:116}, | |
| {year:1998,production:117,consumption:120.6}, | |
| {year:1999,production:122.9,consumption:121}, | |
| {year:2000,production:142.8,consumption:123.8}, | |
| {year:2001,production:121.9,consumption:125.5}, | |
| {year:2002,production:130.6,consumption:121}, | |
| {year:2003,production:107.1,consumption:114.9}, | |
| {year:2004,production:110.1,consumption:121.5}, | |
| {year:2005,production:137.9,consumption:125.9}, | |
| {year:2006,production:121.7,consumption:122.6}, | |
| {year:2007,production:137.4,consumption:127.4}, | |
| {year:2008,production:142.4,consumption:128.6}, | |
| {year:2009,production:132.8,consumption:123.7}, | |
| {year:2010,production:122.8,consumption:130.4}, | |
| {year:2011,production:125,consumption:121.8}, | |
| {year:2012,production:146.4,consumption:128.8} | |
| ]; | |
| function getYear(record){ | |
| return record.year; | |
| } | |
| function getProduction(record){ | |
| return record.production; | |
| } | |
| function getConsumption(record){ | |
| return record.consumption; | |
| } | |
| function surplus(record){ | |
| return record.production - record.consumption; | |
| } | |
| var height = 800; | |
| var width = 800; | |
| var padding = 100; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var xScale = d3.scaleLinear() | |
| .domain([d3.min(data, getProduction)-10, d3.max(data,getProduction)+10]) | |
| .range([0, width - padding]); | |
| var yScale = d3.scaleLinear() | |
| .domain([d3.min(data, getConsumption)-10, d3.max(data,getConsumption)+10]) | |
| .range([height-padding, padding]); | |
| var xAxis = d3.axisBottom() | |
| .scale(xScale); | |
| var yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| svg.append("g") | |
| .attr("transform", "translate(" + 50 + "," + (height-padding) + ")") | |
| .classed("axis", true) | |
| .call(xAxis) | |
| svg.append("text") | |
| .attr("x", xScale(d3.min(data, getProduction)) - 70) | |
| .attr("y",yScale(d3.max(data, getConsumption)) -100) | |
| .attr("text-anchor", "start") | |
| .attr("fill", "black") | |
| .text("Forbruk i TWh") | |
| svg.append("text") | |
| .attr("x", xScale(d3.max(data, getProduction)) + 80) | |
| .attr("y",yScale(d3.min(data, getConsumption)) + 60) | |
| .attr("text-anchor", "middle") | |
| .attr("fill", "black") | |
| .text("Produksjon i TWh") | |
| svg.append("g") | |
| .attr("transform", "translate(" + 50 + "," + 0 + ")") | |
| .classed("axis",true) | |
| .call(yAxis) | |
| var standardDeviation = Math.sqrt(d3.variance(data,surplus)); | |
| var mean = d3.mean(data, surplus); | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cy", function(d){ | |
| return yScale(getConsumption(d)); | |
| }) | |
| .attr("cx",function(d){ | |
| return 50 + xScale(getProduction(d)) | |
| }) | |
| .attr("r","13px") | |
| .attr("fill", function(d){ | |
| if(surplus(d) > mean + standardDeviation){ | |
| return "green"; | |
| } else if (surplus(d) < mean - standardDeviation) { | |
| return "red"; | |
| } else { | |
| return "steelblue"; | |
| } | |
| }) | |
| .attr("opacity",1) | |
| .attr("stroke", "black") | |
| .attr("stroke-width","1px") | |
| svg.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("y", height - 40) | |
| .attr("x", width/2) | |
| .text("Strøm i Norge fra 1974 til 2012") | |
| .attr("font-size", 25) | |
| svg.selectAll(".years") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .classed("years", true) | |
| .attr("text-anchor", "middle") | |
| .attr("y", function(d){ | |
| return yScale(getConsumption(d)) + 3; | |
| }) | |
| .attr("x", function(d){ | |
| return 50 + xScale(getProduction(d)); | |
| }) | |
| .attr("fill","white") | |
| .text(function(d){ | |
| return getYear(d); | |
| }) | |
| svg.append("rect") | |
| .attr("x",470) | |
| .attr("y",500) | |
| .attr("width",390) | |
| .attr("height",170) | |
| .attr("fill","silver") | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",530) | |
| .attr("fill","black") | |
| .text("Farge er basert på forskjellen mellom") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",560) | |
| .attr("fill","black") | |
| .text("produksjon og forbruk.") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",590) | |
| .attr("fill","black") | |
| .text("Ett standardavvik (\u03C3) over") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",620) | |
| .attr("fill","black") | |
| .text("gjennomsnittet (\u03BC) er grønt, ett under") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",650) | |
| .attr("fill","black") | |
| .text("er rødt mens resten er blått") | |
| .attr("font-size",18) | |
| <\/script> | |
| </html> | |
| </script> | |
| </body> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis{ | |
| font-size:14px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width:1px; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <script> | |
| var data = [ | |
| {year:1974,production:76.5,consumption:70.8}, | |
| {year:1975,production:77.3,consumption:71.6}, | |
| {year:1976,production:82,consumption:75.2}, | |
| {year:1977,production:72.3,consumption:73.3}, | |
| {year:1978,production:81,consumption:77.5}, | |
| {year:1979,production:89,consumption:84.3}, | |
| {year:1980,production:84.1,consumption:83.6}, | |
| {year:1981,production:93.2,consumption:87.9}, | |
| {year:1982,production:93,consumption:86.9}, | |
| {year:1983,production:106.4,consumption:92.9}, | |
| {year:1984,production:106.6,consumption:98.3}, | |
| {year:1985,production:103.1,consumption:102.5}, | |
| {year:1986,production:97.1,consumption:99.2}, | |
| {year:1987,production:104.1,consumption:103.7}, | |
| {year:1988,production:110.2,consumption:104.4}, | |
| {year:1989,production:119.3,consumption:104.2}, | |
| {year:1990,production:121.8,consumption:105.9}, | |
| {year:1991,production:111.1,consumption:108.1}, | |
| {year:1992,production:117.7,consumption:109}, | |
| {year:1993,production:119.7,consumption:112.3}, | |
| {year:1994,production:113.5,consumption:113.6}, | |
| {year:1995,production:123.5,consumption:117}, | |
| {year:1996,production:104.9,consumption:113.9}, | |
| {year:1997,production:112,consumption:116}, | |
| {year:1998,production:117,consumption:120.6}, | |
| {year:1999,production:122.9,consumption:121}, | |
| {year:2000,production:142.8,consumption:123.8}, | |
| {year:2001,production:121.9,consumption:125.5}, | |
| {year:2002,production:130.6,consumption:121}, | |
| {year:2003,production:107.1,consumption:114.9}, | |
| {year:2004,production:110.1,consumption:121.5}, | |
| {year:2005,production:137.9,consumption:125.9}, | |
| {year:2006,production:121.7,consumption:122.6}, | |
| {year:2007,production:137.4,consumption:127.4}, | |
| {year:2008,production:142.4,consumption:128.6}, | |
| {year:2009,production:132.8,consumption:123.7}, | |
| {year:2010,production:122.8,consumption:130.4}, | |
| {year:2011,production:125,consumption:121.8}, | |
| {year:2012,production:146.4,consumption:128.8} | |
| ]; | |
| function getYear(record){ | |
| return record.year; | |
| } | |
| function getProduction(record){ | |
| return record.production; | |
| } | |
| function getConsumption(record){ | |
| return record.consumption; | |
| } | |
| function surplus(record){ | |
| return record.production - record.consumption; | |
| } | |
| var height = 800; | |
| var width = 800; | |
| var padding = 100; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var xScale = d3.scaleLinear() | |
| .domain([d3.min(data, getProduction)-10, d3.max(data,getProduction)+10]) | |
| .range([0, width - padding]); | |
| var yScale = d3.scaleLinear() | |
| .domain([d3.min(data, getConsumption)-10, d3.max(data,getConsumption)+10]) | |
| .range([height-padding, padding]); | |
| var xAxis = d3.axisBottom() | |
| .scale(xScale); | |
| var yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| svg.append("g") | |
| .attr("transform", "translate(" + 50 + "," + (height-padding) + ")") | |
| .classed("axis", true) | |
| .call(xAxis) | |
| svg.append("text") | |
| .attr("x", xScale(d3.min(data, getProduction)) - 70) | |
| .attr("y",yScale(d3.max(data, getConsumption)) -100) | |
| .attr("text-anchor", "start") | |
| .attr("fill", "black") | |
| .text("Forbruk i TWh") | |
| svg.append("text") | |
| .attr("x", xScale(d3.max(data, getProduction)) + 80) | |
| .attr("y",yScale(d3.min(data, getConsumption)) + 60) | |
| .attr("text-anchor", "middle") | |
| .attr("fill", "black") | |
| .text("Produksjon i TWh") | |
| svg.append("g") | |
| .attr("transform", "translate(" + 50 + "," + 0 + ")") | |
| .classed("axis",true) | |
| .call(yAxis) | |
| var standardDeviation = Math.sqrt(d3.variance(data,surplus)); | |
| var mean = d3.mean(data, surplus); | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cy", function(d){ | |
| return yScale(getConsumption(d)); | |
| }) | |
| .attr("cx",function(d){ | |
| return 50 + xScale(getProduction(d)) | |
| }) | |
| .attr("r","13px") | |
| .attr("fill", function(d){ | |
| if(surplus(d) > mean + standardDeviation){ | |
| return "green"; | |
| } else if (surplus(d) < mean - standardDeviation) { | |
| return "red"; | |
| } else { | |
| return "steelblue"; | |
| } | |
| }) | |
| .attr("opacity",1) | |
| .attr("stroke", "black") | |
| .attr("stroke-width","1px") | |
| svg.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("y", height - 40) | |
| .attr("x", width/2) | |
| .text("Strøm i Norge fra 1974 til 2012") | |
| .attr("font-size", 25) | |
| svg.selectAll(".years") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .classed("years", true) | |
| .attr("text-anchor", "middle") | |
| .attr("y", function(d){ | |
| return yScale(getConsumption(d)) + 3; | |
| }) | |
| .attr("x", function(d){ | |
| return 50 + xScale(getProduction(d)); | |
| }) | |
| .attr("fill","white") | |
| .text(function(d){ | |
| return getYear(d); | |
| }) | |
| svg.append("rect") | |
| .attr("x",470) | |
| .attr("y",500) | |
| .attr("width",390) | |
| .attr("height",170) | |
| .attr("fill","silver") | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",530) | |
| .attr("fill","black") | |
| .text("Farge er basert på forskjellen mellom") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",560) | |
| .attr("fill","black") | |
| .text("produksjon og forbruk.") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",590) | |
| .attr("fill","black") | |
| .text("Ett standardavvik (\u03C3) over") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",620) | |
| .attr("fill","black") | |
| .text("gjennomsnittet (\u03BC) er grønt, ett under") | |
| .attr("font-size",18) | |
| svg.append("text") | |
| .attr("x",480) | |
| .attr("y",650) | |
| .attr("fill","black") | |
| .text("er rødt mens resten er blått") | |
| .attr("font-size",18) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment