Skip to content

Instantly share code, notes, and snippets.

@DCMS-Insight

DCMS-Insight/Employment.csv

Created October 24, 2016 10:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DCMS-Insight/bd60fd508928fa2fd9fe4218bfa98488 to your computer and use it in GitHub Desktop.
Save DCMS-Insight/bd60fd508928fa2fd9fe4218bfa98488 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Employment.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-11 1562 545 1292 89 492 174 1457 3932 30129
01-Jan-12 1691 582 1378 84 505 164 1532 4112 30334
01-Jan-13 1713 594 1376 92 488 174 1604 4215 30760
01-Jan-14 1808 623 1394 84 526 184 1432 4162 31410
01-Jan-15 1866 642 1421 85 563 174 1587 4390 32037
Raw
Employmentper.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-11 100 100 100 100 100 100 100 100 100
01-Jan-12 108.29 106.7 106.67 93.89 102.81 94.57 105.11 104.58 100.68
01-Jan-13 109.69 109.02 106.5 103.56 99.37 100.14 110.06 107.2 102.1
01-Jan-14 115.77 114.23 107.89 94.35 107.02 106.2 98.26 105.85 104.25
01-Jan-15 119.47 117.78 110.02 95.58 114.46 100.29 108.89 111.64 106.33
Raw
Exports.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-10 14.7 5.1 23.0 0.2 0.9 4.6 -100 26.8 174.1
01-Jan-11 15.5 4.6 23.6 0.2 1.3 4.6 -100 27.9 188.8
01-Jan-12 17.3 4.9 26.1 0.1 1.1 5.2 -100 30.7 197.5
01-Jan-13 17.9 4.8 27.6 0.3 1.4 6.3 -100 33.1 214.5
01-Jan-14 19.8 5.4 31.8 0.2 1.8 6.8 -100 37.7 218.8
Raw
Exportsper.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-10 100 100 100 100 100 100 -100 100 100
01-Jan-11 105.3 90.1 102.8 118.6 133.4 99.7 -100 104.2 108.4
01-Jan-12 117.2 97.5 113.3 52.1 122.3 113.3 -100 114.5 113.4
01-Jan-13 121.3 94 119.8 179.4 149.6 135.5 -100 123.6 123.2
01-Jan-14 134.6 106.8 138.1 88.1 190.9 146.9 -100 140.5 125.6
Raw
GVA.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-10 65.2 20.3 97.3 8.4 7.0 24.7 49.2 177.1 1414.6
01-Jan-11 69.4 21.0 103.0 9.3 7.4 25.4 53.9 189.8 1452.1
01-Jan-12 73.0 21.8 105.2 9.8 7.9 26.0 57.3 197.9 1495.6
01-Jan-13 77.9 23.5 110.0 10.0 9.8 28.0 59.0 209.4 1551.6
01-Jan-14 81.6 23.5 111.6 10.2 10.3 29.1 60.4 213.3 1624.3
01-Jan-15 87.4 27.0 118.4 10.3 10.1 30.2 62.4 220.9 1661.1
Raw
GVAper.csv
date ci cs ds gamb sport tele tour all uk
01-Jan-10 100 100 100 100 100 100 100 100 100
01-Jan-11 106.5 103.3 105.8 110.2 104.9 102.8 109.8 107.2 102.6
01-Jan-12 112 107.5 108.1 116.6 112.6 105 116.7 111.8 105.7
01-Jan-13 119.5 115.8 113.1 118.4 139.5 113.1 120 118.3 109.7
01-Jan-14 125.2 115.6 114.7 121.5 146.6 117.6 123 120.5 114.8
01-Jan-15 134 133 121.7 122.5 144.4 122.3 127 124.8 117.4
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.area {
fill: lightsteelblue;
stroke-width: 0;
opacity: 0.7;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
color: white;
font: 12px sans-serif;
background: black;
opacity: 0.5;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.hidden {
display: none;
}
#circle {
width: 5px;
height: 5px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: white;
}
/* Tooltip container */
.textcss {
border-bottom: 1px dotted;
}
/* Tooltip text */
.textcss .tooltiptext {
visibility: hidden;
width: 210px;
background-color: black;
opacity: 0.85;
color: #fff;
text-align: center;
padding: 15px;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.textcss:hover .tooltiptext {
visibility: visible;
}
a {
color: darkcyan
}
</style>
<title>DCMS sectors Economic Estimates</title>
<script type='text/javascript'>
//<![CDATA[
window.onload = function() {
d3.csv('GVA.csv', function(errorA, dataA) {
d3.csv('GVAper.csv', function(errorB, dataB) {
d3.csv('Exports.csv', function(errorC, dataC) {
d3.csv('Exportsper.csv', function(errorD, dataD) {
d3.csv('Employment.csv', function(errorE, dataE) {
d3.csv('Employmentper.csv', function(errorF, dataF) {
// Size setting
var margin = {
top: 30,
right: 40,
bottom: 80,
left: 70
},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// create SVG in body
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA (£bn)");
// Initial title of the graph
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015");
// Set initial dataset
function setdataset() {
if (document.getElementById("chart1").checked == false &&
document.getElementById("chart2").checked == false &&
document.getElementById("chart3").checked == false &&
document.getElementById("chart4").checked == false &&
document.getElementById("chart5").checked == false &&
document.getElementById("chart6").checked == false &&
document.getElementById("chart8").checked == false &&
document.getElementById("chart9").checked == false &&
document.getElementById("chart7").checked == true &&
(document.getElementById('opts').value == 'dataC' ||
document.getElementById('opts').value == 'dataD')) {
window.alert("Warning! Because of the nature of the Tourism sector there is no data on exports from it. Please make a different selection.");
document.getElementById("chart7").checked = false;
}
d3.select("#title").remove();
d3.select("#ytitle").remove();
if (document.getElementById('opts').value == 'dataA') {
var data = dataA;
console.log("Data set A in use");
// Replace title
d3.selectAll("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015");
// Replace y label
d3.selectAll("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA (£bn)");
}
if (document.getElementById('opts').value == 'dataB') {
var data = dataB;
console.log("Data set B in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015 (% change from 2010)");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA % change (2010 = 100)");
}
if (document.getElementById('opts').value == 'dataC') {
var data = dataC;
console.log("Data set C in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("Exports of Services from DCMS sectors, 2010-2014");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("Exports (£bn)");
svg.select("line7").remove()
}
if (document.getElementById('opts').value == 'dataD') {
var data = dataD;
console.log("Data set D in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("Exports of Services from DCMS sectors, 2010-2014 (% change from 2010)");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("Exports % change (2010 = 100)");
svg.select("line7").remove()
}
if (document.getElementById('opts').value == 'dataE') {
var data = dataE;
console.log("Data set E in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("Employment in DCMS sectors, 2011-2015");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("Employment (thousands)");
}
if (document.getElementById('opts').value == 'dataF') {
var data = dataF;
console.log("Data set F in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("Employment in DCMS sectors, 2011-2015 (% change from 2011)");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("Employment % change (2010 = 100)");
}
data.forEach(function(d) {
d.ci = +d.ci;
d.cs = +d.cs;
d.dc = +d.ds;
d.gamb = +d.gamb;
d.sport = +d.sport;
d.tele = +d.tele;
d.tour = +d.tour;
d.all = +d.all;
d.uk = +d.uk;
});
return data;
}
data = setdataset();
console.log(data);
var ymax;
var ymax1;
var ymax2;
var ymax3;
var ymax4;
var ymax5;
var ymax6;
var ymax7;
var ymax8;
var ymax9;
ymax = 10;
ymax1 = 10;
ymax2 = 10;
ymax3 = 10;
ymax4 = 10;
ymax5 = 10;
ymax6 = 10;
ymax7 = 10;
ymax8 = 10;
ymax9 = 10;
function setymax() {
if (document.getElementById("chart1").checked) {
ymax1 = d3.max(data, function(d) {
return Math.max(d.ci);
});
} else {
ymax1 = 0
};
if (document.getElementById("chart2").checked) {
ymax2 = d3.max(data, function(d) {
return Math.max(d.cs);
});
} else {
ymax2 = 0
};
if (document.getElementById("chart3").checked) {
ymax3 = d3.max(data, function(d) {
return Math.max(d.ds);
});
} else {
ymax3 = 0
};
if (document.getElementById("chart4").checked) {
ymax4 = d3.max(data, function(d) {
return Math.max(d.gamb);
});
} else {
ymax4 = 0
};
if (document.getElementById("chart5").checked) {
ymax5 = d3.max(data, function(d) {
return Math.max(d.sport);
});
} else {
ymax5 = 0
};
if (document.getElementById("chart6").checked) {
ymax6 = d3.max(data, function(d) {
return Math.max(d.tele);
});
} else {
ymax6 = 0
};
if (document.getElementById("chart7").checked) {
ymax7 = d3.max(data, function(d) {
return Math.max(d.tour);
});
} else {
ymax7 = 0
};
if (document.getElementById("chart8").checked) {
ymax8 = d3.max(data, function(d) {
return Math.max(d.all);
});
} else {
ymax8 = 0
};
if (document.getElementById("chart9").checked) {
ymax9 = d3.max(data, function(d) {
return Math.max(d.uk);
});
} else {
ymax9 = 0
};
ymax = d3.max(data, function(d) {
return Math.ceil(Math.max(ymax1, ymax2, ymax3, ymax4, ymax5, ymax6, ymax7, ymax8, ymax9) / 10) * 10;
});
}
setymax();
data.forEach(function(d) {
d.ci = +d.ci;
d.cs = +d.cs;
d.dc = +d.ds;
d.gamb = +d.gamb;
d.sport = +d.sport;
d.tele = +d.tele;
d.tour = +d.tour;
d.all = +d.all;
d.uk = +d.uk;
});
// date format setting
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%Y");
// Scale setting
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Axis setting
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(6)
.tickFormat(d3.time.format("%Y"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// line 1
var valueline1 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.ci);
});
// line 2
var valueline2 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.cs);
});
// line 3
var valueline3 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.ds);
});
// line 4
var valueline4 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.gamb);
});
// line 5
var valueline5 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.sport);
});
// line 6
var valueline6 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.tele);
});
// line 7
var valueline7 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.tour);
});
// line 8
var valueline8 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.all);
});
// line 9
var valueline9 = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.uk);
});
// add tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// add grid in the background of the graph
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
data.forEach(function(d) {
d.date = parseDate(d.date);
d.ci = +d.ci;
d.cs = +d.cs;
d.ds = +d.ds;
d.gamb = +d.gamb;
d.sport = +d.sport;
d.tele = +d.tele;
d.tour = +d.tour;
d.all = +d.all;
d.uk = +d.uk; // To correct the grid (need an other line : y.domain([0, d3.max(data, function(d) { return Math.max(d.b1, d.b2); })]); )
});
// Scale the range of the data
var xextent = d3.extent(data, function(d) {
return d.date;
});
xextent[1].setDate(xextent[1].getDate() + 2);
x.domain(xextent);
y.domain([0, d3.max(data, function(d) {
return Math.max(d.ci, d.cs, d.ds, d.gamb, d.sport, d.tele, d.tour);
})]);
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
// text label for the x axis
svg.append("text")
.attr("x", width / 2)
.attr("y", height + margin.bottom)
.style("text-anchor", "middle")
.text("Year");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA (£bn)");
// Initial title of the graph
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015");
// Draw the grid lines
svg.append("g")
.attr("id", "gridx")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.append("g")
.attr("id", "gridy")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
var chart1 = svg.append('g').classed('chart1', true);
var chart2 = svg.append('g').classed('chart2', true);
var chart3 = svg.append('g').classed('chart3', true);
var chart4 = svg.append('g').classed('chart4', true);
var chart5 = svg.append('g').classed('chart5', true);
var chart6 = svg.append('g').classed('chart6', true);
var chart7 = svg.append('g').classed('chart7', true);
var chart8 = svg.append('g').classed('chart8', true);
var chart9 = svg.append('g').classed('chart9', true);
// Add the line 1
chart1.append("path")
.attr("d", valueline1(data))
.attr("id", "line1")
.style("stroke", "#70405E");
// Points 1
chart1.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.ci);
})
.attr("id", "circles1")
.style("fill", "white")
.style("stroke", "#70405E")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.ci.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 2
chart2.append("path")
.attr("d", valueline2(data))
.attr("id", "line2")
.style("stroke", "#0A83DF");
// Points 2
chart2.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.cs);
})
.attr("id", "circles2")
.style("fill", "white")
.style("stroke", "#0A83DF")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.cs.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 3
chart3.append("path")
.attr("d", valueline3(data))
.attr("id", "line3")
.style("stroke", "#DF6804");
// Points 3
chart3.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.ds);
})
.attr("id", "circles3")
.style("fill", "white")
.style("stroke", "#DF6804")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.ds.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 4
chart4.append("path")
.attr("d", valueline4(data))
.attr("id", "line4")
.style("stroke", "#003366");
// Points 4
chart4.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.gamb);
})
.attr("id", "circles4")
.style("fill", "white")
.style("stroke", "#003366")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.gamb.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 5
chart5.append("path")
.attr("d", valueline5(data))
.attr("id", "line5")
.style("stroke", "#CDFF33");
// Points 5
chart5.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.sport);
})
.attr("id", "circles5")
.style("fill", "white")
.style("stroke", "#CDFF33")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.sport.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 6
chart6.append("path")
.attr("d", valueline6(data))
.attr("id", "line6")
.style("stroke", "#93C9FF");
// Points 6
chart6.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.tele);
})
.attr("id", "circles6")
.style("fill", "white")
.style("stroke", "#93C9FF")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.tele.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 7
chart7.append("path")
.attr("d", valueline7(data))
.attr("id", "line7")
.style("stroke", "#FCAA6C");
// Points 7
chart7.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.tour);
})
.attr("id", "circles7")
.style("fill", "white")
.style("stroke", "#FCAA6C")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.tour.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});
// Add the line 8
/*chart8.append("path")
.attr("d", valueline8(data))
.attr("id", "line8")
.style("stroke", "#C7006B");
// Points 8
chart8.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.all);
})
.attr("id", "circles8")
.style("fill", "white")
.style("stroke", "#C7006B")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.all.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
});*/
// Add the line 9
/* chart9.append("path")
.attr("d", valueline9(data))
.attr("id", "line9")
.style("stroke", "#AAAAAA");
// Points 9
chart9.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.uk);
})
.attr("id", "circles8")
.style("fill", "white")
.style("stroke", "#AAAAAA")
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.uk.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}); */
// Update on series selection
d3.selectAll('.messageCheckbox').on('click', function() {
var value = this.value,
checked = this.checked;
d3.select('.' + value).classed('hidden', !checked);
setymax();
updateData();
});
// Update on dataset selection
d3.selectAll('.selection').on('change', function() {
setymax();
updateData();
});
//// UPDATE FUNCTION \\\\
function updateData() {
data = setdataset();
data.forEach(function(d) {
if (typeof d.date == 'string') {
d.date = parseDate(d.date);
}
d.ci = +d.ci;
d.cs = +d.cs;
d.ds = +d.ds;
d.gamb = +d.gamb;
d.sport = +d.sport;
d.tele = +d.tele;
d.tour = +d.tour;
d.all = +d.all;
d.uk = +d.uk; // To correct the grid (need an other line : y.domain([0, d3.max(data, function(d) { return Math.max(d.b1, d.b2); })]); )
});
setymax();
// Scale the range of the data
var xextent = d3.extent(data, function(d) {
return d.date;
});
xextent[1].setDate(xextent[1].getDate());
x.domain(xextent);
//x.domain([parseDate("31-Dec-10"),parseDate("31-Dec-14")]);
//y.domain([0, d3.max(data, function(d) { return Math.max(d.b1, d.b2, d.b3); })]);
y.domain([0, ymax]);
// Change Y domain for % charts
if (document.getElementById('opts').value == 'dataB' || document.getElementById('opts').value == 'dataD' || document.getElementById('opts').value == 'dataF') {
y.domain([50, ymax]);
document.getElementById("chart7").disabled = false;
};
// Disable tourism options for exports
if (document.getElementById('opts').value == 'dataC' || document.getElementById('opts').value == 'dataD') {
document.getElementById("chart7").checked = false;
document.getElementById("chart7").disabled = true;
};
// Enable tourism options for employment
if (document.getElementById('opts').value == 'dataE' || document.getElementById('opts').value == 'dataF') {
document.getElementById("chart7").disabled = false;
};
// Enable tourism options for GVA
if (document.getElementById('opts').value == 'dataA' || document.getElementById('opts').value == 'dataB') {
document.getElementById("chart7").disabled = false;
};
// change the x axis
svg.select(".x.axis").transition()
.duration(750)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
svg.select(".y.axis").transition()
.duration(750)
.call(yAxis);
// Change line 1
chart1.data(data).exit().remove();
chart1.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart1.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart1.append("path")
.attr("d", valueline1(data))
.attr("id", "line1")
.style("stroke", "#70405E")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart1.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.ci);
})
.attr("id", "circles1")
.style("fill", "white")
.style("stroke", "#70405E")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.ci.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 2
chart2.data(data).exit().remove();
chart2.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart2.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart2.append("path")
.attr("d", valueline2(data))
.attr("id", "line2")
.style("stroke", "#0A83DF")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart2.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.cs);
})
.attr("id", "circles2")
.style("fill", "white")
.style("stroke", "#0A83DF")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.cs.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 3
chart3.data(data).exit().remove();
chart3.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart3.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart3.append("path")
.attr("d", valueline3(data))
.attr("id", "line3")
.style("stroke", "#DF6804")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart3.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.ds);
})
.attr("id", "circles3")
.style("fill", "white")
.style("stroke", "#DF6804")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.ds.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 4
chart4.data(data).exit().remove();
chart4.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart4.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart4.append("path")
.attr("d", valueline4(data))
.attr("id", "line4")
.style("stroke", "#003366")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart4.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.gamb);
})
.attr("id", "circles4")
.style("fill", "white")
.style("stroke", "#003366")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.gamb.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 5
chart5.data(data).exit().remove();
chart5.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart5.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart5.append("path")
.attr("d", valueline5(data))
.attr("id", "line5")
.style("stroke", "#CDFF33")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart5.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.sport);
})
.attr("id", "circles5")
.style("fill", "white")
.style("stroke", "#CDFF33")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + "<br/>" + d.sport.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 6
chart6.data(data).exit().remove();
chart6.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart6.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart6.append("path")
.attr("d", valueline6(data))
.attr("id", "line6")
.style("stroke", "#93C9FF")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart6.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.tele);
})
.attr("id", "circles6")
.style("fill", "white")
.style("stroke", "#93C9FF")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.tele.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 7
chart7.data(data).exit().remove();
chart7.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart7.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart7.append("path")
.attr("d", valueline7(data))
.attr("id", "line7")
.style("stroke", "#FCAA6C")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart7.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.tour);
})
.attr("id", "circles7")
.style("fill", "white")
.style("stroke", "#FCAA6C")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.tour.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// Change line 8
chart8.data(data).exit().remove();
chart8.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart8.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart8.append("path")
.attr("d", valueline8(data))
.attr("id", "line8")
.style("stroke", "#c700b6")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart8.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.all);
})
.attr("id", "circles8")
.style("fill", "white")
.style("stroke", "#c700b6")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.all.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// change the grid lines
svg.select("#gridx").transition()
.duration(750)
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.select("#gridy").transition()
.duration(750)
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
// Change line 9
chart9.data(data).exit().remove();
chart9.selectAll("circle").transition().duration(700).style("opacity", 0).remove();
chart9.selectAll("path").transition().duration(700).style("opacity", 0).remove();
chart9.append("path")
.attr("d", valueline9(data))
.attr("id", "line9")
.style("stroke", "#aaaaaa")
.style("opacity", 0).transition().duration(750).style("opacity", 0.9);
chart9.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.uk);
})
.attr("id", "circles9")
.style("fill", "white")
.style("stroke", "#aaaaaa")
.style("opacity", 0)
.style("stroke-width", "2px")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .8);
div.html(formatTime(d.date) + ":<br/>" + d.uk.toFixed(1))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(400)
.style("opacity", 0);
}).transition().duration(750).style("opacity", 0.9);
// change the grid lines
svg.select("#gridx").transition()
.duration(750)
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.select("#gridy").transition()
.duration(750)
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
/*if (document.getElementById('opts').value == 'dataA') {
var data = dataA;
console.log("Data set A in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA (£bn)");
}
if (document.getElementById('opts').value == 'dataB') {
var data = dataB;
console.log("Data set B in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("GVA of DCMS sectors, 2010-2015");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("GVA % change (2010 = 100)");
svg.select("line7").remove()
}
if (document.getElementById('opts').value == 'dataC') {
var data = dataC;
console.log("Data set C in use");
// Replace title
d3.select("#title").remove();
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.style("font-size", "16px")
.text("Exports of Services from DCMS sectors, 2010-2014");
// Replace y label
d3.select("#ytitle").remove();
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 + (-margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "0.8em")
.attr("id", "ytitle")
.style("text-anchor", "middle")
.text("Exports (£bn)");
svg.select("line7").remove()
}*/
}
});
});
});
});
});
});
}
</script>
</head>
<body>
<h2>DCMS Sectors Economic Estimates</h2>
<p>This chart shows <span class="textcss">gross value added (GVA)<span class="tooltiptext">Gross value added (GVA) is the measure of the value of goods and services produced in an area, industry or sector of an economy. It is nominal, meaning it has not be adjusted for inflation. It is related to GDP as such: <br/><br/>GVA + taxes on products - subsidies on products = GDP</span></span> of, <span class="textcss">exports in services<span class="tooltiptext">This is the exports of any service, and does not include any physical goods</span></span> from, and <span class="textcss">employment<span class="tooltiptext">This is a measure of the number of jobs, not the number of employed people. This includes both employed and self employed jobs, and first and second jobs.</span></span> in DCMS sectors over time. It can be viewed either in terms of absolute value, or as a percentage change over time (known as an index, where 2010 = 100, and subsequent years show the changes from that base level).</p>
<p>The total contribution of DCMS sectors to the UK economy is 13.3%. This is more accurate than the <a href="https://www.gov.uk/government/statistics/ad-hoc-statistical-analysis-2015-quarter-4-gva-of-dcms-sectors">previous estimate</a> of 15.6%, which was the best estimate based on data analysed with different methodologies over different time periods.</p>
<p>The full statistical release detailing which industries make up the DCMS sectors was published on the 4th August 2016, and can be read <a href="https://www.gov.uk/government/statistics/dcms-sectors-economic-estimates-2016">here</a>.</p>
<div id="option">
Sector:
<div style="display: inline-block; margin-right:1em;"></div>
<br/>
<input type="checkbox" checked="checked" class="messageCheckbox" value="chart1" id="chart1" />Creative Industries
<div id="circle" style="border:3px solid #70405E; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart2" checked="checked" class="messageCheckbox" id="chart2" />Cultural Sector
<div id="circle" style="border:3px solid #0A83DF; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart3" checked="checked" class="messageCheckbox" id="chart3" />Digital Sector
<div id="circle" style="border:3px solid #DF6804; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart4" checked="checked" class="messageCheckbox" id="chart4" />Gambling
<div id="circle" style="border:3px solid #003366; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart5" checked="checked" class="messageCheckbox" id="chart5" />Sport
<div id="circle" style="border:3px solid #CDFF33; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart6" checked="checked" class="messageCheckbox" id="chart6" />Telecoms
<div id="circle" style="border:3px solid #93C9FF; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart7" checked="checked" class="messageCheckbox" id="chart7" />Tourism
<div id="circle" style="border:3px solid #FCAA6C; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart8" class="messageCheckbox" id="chart8" />All DCMS
<div id="circle" style="border:3px solid #C7006B; display: inline-block; margin-right:1em;"></div>
<input type="checkbox" value="chart9" class="messageCheckbox" id="chart9" />UK Economy
<div id="circle" style="border:3px solid #AAAAAA; display: inline-block; margin-right:1em;"></div>
<div style="display: inline-block; margin-right:1em;"></div>
<br/>
<br/>
<br/> Display data:
<div style="display: inline-block; margin-right:1em;"></div>
<select id="opts" class='selection'>
<option value="dataA">GVA</option>
<option value="dataB">GVA (% change)</option>
<option value="dataC">Exports</option>
<option value="dataD">Exports (% change)</option>
<option value="dataE">Employment</option>
<option value="dataF">Employment (% change)</option>
</select>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment