Skip to content

Instantly share code, notes, and snippets.

@stianSjoli

stianSjoli/index.html

Last active August 12, 2018 10:33
Show Gist options
  • Save stianSjoli/de37768cefafe6ef282189e8c3e1632b to your computer and use it in GitHub Desktop.
Save stianSjoli/de37768cefafe6ef282189e8c3e1632b to your computer and use it in GitHub Desktop.
Download ZIP
Bruttonasjonalprodukt (BNP) for Norge. Årlig volumendring. 1972-2017. Data fra statistisk sentralbyrå (ssb). En gjenskapning av ssb sin graf (Url: https://www.ssb.no/nasjonalregnskap-og-konjunkturer/faktaside/norsk-okonomi)
Raw
index.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" />
<title>D3 V4 Playground</title>
<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="//fonts.googleapis.com/css?family=Open+Sans" />
<title>D3 V4 Playground</title>
<style>
text{
font-family:"Open Sans"
}
.axis-x text, .axis-y text {
font-size: 1.5em;
}
</style>
</head>
<body>
</body>
<script>
var data = [
{year:1972, change:5.3},
{year:1973, change:4.5},
{year:1974, change:3.9},
{year:1975, change:5.0},
{year:1976, change:5.8},
{year:1977, change:4.2},
{year:1978, change:3.9},
{year:1979, change:4.4},
{year:1980, change:4.6},
{year:1981, change:1.6},
{year:1982, change:0.2},
{year:1983, change:4.0},
{year:1984, change:6.1},
{year:1985, change:5.6},
{year:1986, change:4.0},
{year:1987, change:1.8},
{year:1988, change:-0.3},
{year:1989, change:1.0},
{year:1990, change:1.9},
{year:1991, change:3.1},
{year:1992, change:3.6},
{year:1993, change:2.8},
{year:1994, change:5.1},
{year:1995, change:4.2},
{year:1996, change:5.0},
{year:1997, change:5.3},
{year:1998, change:2.6},
{year:1999, change:2.0},
{year:2000, change:3.2},
{year:2001, change:2.1},
{year:2002, change:1.4},
{year:2003, change:0.9},
{year:2004, change:4.0},
{year:2005, change:2.6},
{year:2006, change:2.4},
{year:2007, change:3.0},
{year:2008, change:0.5},
{year:2009, change:-1.7},
{year:2010, change:0.7},
{year:2011, change:1.0},
{year:2012, change:2.7},
{year:2013, change:1.0},
{year:2014, change:2.0},
{year:2015, change:2.0},
{year:2016, change:1.1},
{year:2017, change:1.9}
];
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(d.change < 0){
return "red";
} else if(d.change === 0.0) return "silver";
else return "green";
}
function isMajorTick(d){
console.log(d.year);
return d.year % 10;
}
var width = 1200;
var height = 500;
var padding = 50;
var xScale = d3.scalePoint()
.domain(years)
.range([padding, width - padding]);
var yScale = d3.scaleLinear()
.domain([d3.min(data, getChange), 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(" + 25 + "," + (height - padding) + ")")
.classed("axis-x",true)
.call(xAxis);
svg.select("g.axis-x")
.append("text")
.attr("font-size", 14)
.attr("fill", "black")
.attr("text-anchor", "middle")
.attr("x", width/2)
.attr("y", 50)
.text("År")
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("x", 30)
.attr("y", 30)
.text("BNP volumendring (%)")
svg.selectAll("unit")
.data(data)
.enter()
.append("g")
.classed("unit", true)
svg.selectAll("bar")
.data(data)
.enter()
.append("line")
.classed("bar", true)
.attr("x1", function(d){
return 28 + xScale(getYear(d));
})
.attr("x2", function(d){
return 28 + xScale(getYear(d));
})
.attr("y1", function(d){
return yScale(getChange(d)) - 5;
})
.attr("y2", function(d){
return yScale(0);
})
.attr("stroke-width", 3)
.attr("stroke", color)
svg.selectAll("unit.circle")
.data(data)
.enter()
.append("circle")
.attr("r", 14)
.attr("cx", function(d){
return 28 + xScale(getYear(d));
})
.attr("cy", function(d){
return yScale(getChange(d)) - 3;
})
.attr("stroke-width", 2)
.attr("stroke", color)
.attr("fill", color)
svg.selectAll("unit.text")
.data(data)
.enter()
.append("text")
.classed("text-legend", true)
.attr("font-size", 14)
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("x", function(d){
return (28 + xScale(getYear(d)));
})
.attr("y", function(d){
return (yScale(getChange(d)));
})
.text(function(d){
return Math.abs(getChange(d));
})
svg.append("g")
.classed("legend", true)
.append("rect")
.attr("height", 175)
.attr("width", 275)
.attr("x", 900)
.attr("y", 0)
.attr("fill", "silver")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 30)
.text("Norge opplevde")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 70)
.text("finanskrise i 2009 og")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 110)
.text("dobling av oljeprisen")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 150)
.text("i 2004")
svg.append("line")
.attr("x1", 25 + xScale(d3.min(data, getYear)))
.attr("x2", 25 + xScale(d3.max(data, getYear)))
.attr("y1", yScale(0))
.attr("y2", yScale(0))
.attr("stroke-width", 1.5)
.attr("stroke", "silver")
.style("stroke-dasharray", ("3,3"))
<\/script>
</html></script>
<script id="jsbin-source-css" type="text/css">
</script>
</body>
<script>
var data = [
{year:1972, change:5.3},
{year:1973, change:4.5},
{year:1974, change:3.9},
{year:1975, change:5.0},
{year:1976, change:5.8},
{year:1977, change:4.2},
{year:1978, change:3.9},
{year:1979, change:4.4},
{year:1980, change:4.6},
{year:1981, change:1.6},
{year:1982, change:0.2},
{year:1983, change:4.0},
{year:1984, change:6.1},
{year:1985, change:5.6},
{year:1986, change:4.0},
{year:1987, change:1.8},
{year:1988, change:-0.3},
{year:1989, change:1.0},
{year:1990, change:1.9},
{year:1991, change:3.1},
{year:1992, change:3.6},
{year:1993, change:2.8},
{year:1994, change:5.1},
{year:1995, change:4.2},
{year:1996, change:5.0},
{year:1997, change:5.3},
{year:1998, change:2.6},
{year:1999, change:2.0},
{year:2000, change:3.2},
{year:2001, change:2.1},
{year:2002, change:1.4},
{year:2003, change:0.9},
{year:2004, change:4.0},
{year:2005, change:2.6},
{year:2006, change:2.4},
{year:2007, change:3.0},
{year:2008, change:0.5},
{year:2009, change:-1.7},
{year:2010, change:0.7},
{year:2011, change:1.0},
{year:2012, change:2.7},
{year:2013, change:1.0},
{year:2014, change:2.0},
{year:2015, change:2.0},
{year:2016, change:1.1},
{year:2017, change:1.9}
];
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(d.change < 0){
return "red";
} else if(d.change === 0.0) return "silver";
else return "green";
}
function isMajorTick(d){
console.log(d.year);
return d.year % 10;
}
var width = 1200;
var height = 500;
var padding = 50;
var xScale = d3.scalePoint()
.domain(years)
.range([padding, width - padding]);
var yScale = d3.scaleLinear()
.domain([d3.min(data, getChange), 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(" + 25 + "," + (height - padding) + ")")
.classed("axis-x",true)
.call(xAxis);
svg.select("g.axis-x")
.append("text")
.attr("font-size", 14)
.attr("fill", "black")
.attr("text-anchor", "middle")
.attr("x", width/2)
.attr("y", 50)
.text("År")
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("x", 30)
.attr("y", 30)
.text("BNP volumendring (%)")
svg.selectAll("unit")
.data(data)
.enter()
.append("g")
.classed("unit", true)
svg.selectAll("bar")
.data(data)
.enter()
.append("line")
.classed("bar", true)
.attr("x1", function(d){
return 28 + xScale(getYear(d));
})
.attr("x2", function(d){
return 28 + xScale(getYear(d));
})
.attr("y1", function(d){
return yScale(getChange(d)) - 5;
})
.attr("y2", function(d){
return yScale(0);
})
.attr("stroke-width", 3)
.attr("stroke", color)
svg.selectAll("unit.circle")
.data(data)
.enter()
.append("circle")
.attr("r", 14)
.attr("cx", function(d){
return 28 + xScale(getYear(d));
})
.attr("cy", function(d){
return yScale(getChange(d)) - 3;
})
.attr("stroke-width", 2)
.attr("stroke", color)
.attr("fill", color)
svg.selectAll("unit.text")
.data(data)
.enter()
.append("text")
.classed("text-legend", true)
.attr("font-size", 14)
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("x", function(d){
return (28 + xScale(getYear(d)));
})
.attr("y", function(d){
return (yScale(getChange(d)));
})
.text(function(d){
return Math.abs(getChange(d));
})
svg.append("g")
.classed("legend", true)
.append("rect")
.attr("height", 175)
.attr("width", 275)
.attr("x", 900)
.attr("y", 0)
.attr("fill", "silver")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 30)
.text("Norge opplevde")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 70)
.text("finanskrise i 2009 og")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 110)
.text("dobling av oljeprisen")
svg.select("g.legend")
.append("text")
.attr("fill", "black")
.attr("font-size", "24")
.attr("stroke", "black")
.attr("stroke-width", "1px")
.attr("x", 920)
.attr("y", 150)
.text("i 2004")
svg.append("line")
.attr("x1", 25 + xScale(d3.min(data, getYear)))
.attr("x2", 25 + xScale(d3.max(data, getYear)))
.attr("y1", yScale(0))
.attr("y2", yScale(0))
.attr("stroke-width", 1.5)
.attr("stroke", "silver")
.style("stroke-dasharray", ("3,3"))
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment