Skip to content

Instantly share code, notes, and snippets.

@showingmyworking

showingmyworking/ExecOrders_copy.csv

Last active April 26, 2017 19:31
Show Gist options
  • Save showingmyworking/dfdc0736d1cd119611a7f104867ba3c7 to your computer and use it in GitHub Desktop.
Save showingmyworking/dfdc0736d1cd119611a7f104867ba3c7 to your computer and use it in GitHub Desktop.
Download ZIP
ExecOrders
Raw
ExecOrders_copy.csv
day Reagan Bush Clinton W Bush Obama Trump
1 1 1 1 1
2 1 2 1 5 1
3 1 7 2 9 1
4 1 7 2 10 4
5 1 7 2 10 9
6 1 8 2 10 11
7 1 8 2 12 11
8 1 8 2 12 13
9 1 1 8 2 12 16
10 2 1 9 4 12 16
11 2 1 9 4 18 17
12 2 1 9 4 18 17
13 2 1 10 4 18 17
14 2 1 10 4 18 17
15 2 1 10 4 18 19
16 2 1 10 4 19 19
17 2 1 10 4 23 19
18 2 1 10 4 25 19
19 2 1 10 4 25 19
20 2 1 10 4 25 19
21 2 1 10 4 25 23
22 2 1 16 4 25 23
23 2 1 16 5 25 23
24 2 1 16 5 25 23
25 2 1 16 5 25 23
26 3 1 16 5 25 23
27 3 1 16 6 25 23
28 3 1 16 6 25 23
29 5 1 16 10 25 23
30 5 1 16 10 25 23
31 5 1 16 10 26 23
32 5 2 16 10 27 23
33 5 2 16 10 27 23
34 5 2 16 10 27 23
35 7 2 16 10 27 23
36 9 2 16 10 27 24
37 9 2 16 10 27 24
38 9 2 16 11 27 24
39 9 2 16 12 28 24
40 9 2 16 12 28 26
41 9 2 16 12 28 26
42 10 2 16 12 28 26
43 10 2 16 12 29 26
44 10 2 16 12 30 26
45 10 2 16 13 30 26
46 10 2 16 13 30 28
47 10 2 16 13 30 28
48 10 2 16 13 30 28
49 10 3 18 14 33 28
50 10 3 18 14 33 28
51 10 3 18 14 34 28
52 12 3 18 14 34 28
53 12 3 18 14 34 29
54 12 4 18 14 34 29
55 12 4 18 14 34 29
56 12 4 18 14 34 29
57 13 4 18 14 34 29
58 13 4 18 14 34 29
59 13 4 18 14 34 30
60 13 4 18 14 36 30
61 13 5 18 14 36 30
62 13 5 18 15 36 30
63 14 6 18 15 36 30
64 14 6 18 15 36 30
65 14 6 18 15 36 30
66 15 6 18 15 36 30
67 15 6 18 15 36 32
68 15 6 18 15 36 33
69 15 6 19 15 36 34
70 15 6 19 15 36 34
71 15 6 19 15 36 37
72 16 6 19 15 36 37
73 16 6 19 15 36 37
74 16 6 19 15 36 38
75 16 6 19 16 36 39
76 16 6 19 17 36 39
77 16 6 19 18 36 39
78 16 6 19 18 36 39
79 17 6 19 18 37 39
80 17 6 19 18 37 39
81 17 6 19 18 37 39
82 17 6 19 18 37 39
83 17 7 19 19 37 40
84 17 7 19 19 38 40
85 17 7 19 19 38 40
86 17 7 19 19 38 40
87 17 7 19 19 38 40
88 17 7 19 19 38 40
89 17 7 19 19 38 41
90 17 7 19 19 38 41
91 17 8 19 19 38 42
92 17 8 22 19 38 45
93 17 8 22 19 38 45
94 17 8 22 19 38 45
95 17 8 22 19 38 45
96 17 8 23 19 38 45
97 17 9 23 19 38 45
98 17 9 23 19 39 45
99 17 11 23 19 39 45
100 18 11 23 19 39 45
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v4.min.js"></script>
<style>
.axis-x path {
stroke: #000;
}
.line {
fill: none;
stroke-width: 1.5px;
stroke-linejoin: "round";
stroke-linecap: "round";
}
.line:hover {
stroke-width: 6px;
}
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #6F257F;
padding: 14px;
text-align: center;
}
</style>
</head>
<body>
<svg width="340" height="500"></svg>
<script>
//define chart margins
var svg = d3.select("svg"),
margin = {top: 50, right: 80, bottom: 40, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," +margin.top + ")");
//define scales
var x = d3.scaleLinear().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
//color scale
z = d3.scaleOrdinal(d3.schemeCategory20);
//define line generator
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.day); })
.y(function(d) { return y(d.orders); });
//load data
d3.csv("ExecOrders_copy.csv", type, function(error, data) {
if(error) throw error;
//parse data
var presidents = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {day: d.day, orders: d[id]};
})
};
});
//define x axis
x.domain(d3.extent(data, function(d) { return d.day; }));
//define y axis
y.domain([
d3.min(presidents, function(c) { return d3.min(c.values, function (d) { return d.orders; }); }),
d3.max(presidents, function(c) { return d3.max(c.values, function(d) { return d.orders; }); })
]);
//define color scale
z.domain(presidents.map(function(c) { return c.id; }));
//append x axis
g.append("g")
.attr("class", "axis axis-x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
//append y axis
g.append("g")
.attr("class", "axis axis-y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x", -125)
.attr("dy", "0.9em")
.attr("fill", "#000")
.text("Executive Orders");
//append president data to svg
var president = g.selectAll(".president")
.data(presidents)
.enter()
.append("g")
.attr("class", "president")
;
//append president path to svg
president.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); })
.style("stroke-linecap", "round");
//append president labels to svg
president.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.day) + "," + y(d.value.orders) + ")"; })
.attr("x", 4)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
//make it the same colour as the line
.text(function(d) { return d.id + " " + d.value.orders ; });
});
//bind with multiseries data
function type(d, _, columns) {
d.day = +d.day ;
//iterate through each column
for(var i = 1, n = columns.length, c; i < n; ++i)
//bind column data to day
d[c = columns[i]] = +d[c];
return d;
}
//define chart title to svg
let title = svg.append("g")
.attr("class", "title");
title.append("text")
.attr("x", (width/1.4))
.attr("y", 40)
.attr("text-anchor", "middle")
.style("font", "20px sans-serif")
.text("Executive Orders and Memoranda");
//define the data source
var source = svg.append("g")
.attr("class", "source");
source.append("text")
.attr("x", 0)
.attr("y", 495)
.attr("text-anchor", "left")
.style("font", "12px sans-serif")
.text("Source: The American Presidency Project")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment