Skip to content

Instantly share code, notes, and snippets.

@russbiggs

russbiggs/delta.csv

Last active May 4, 2020 18:24
Show Gist options
  • Save russbiggs/0d25ab7b0225df2cb1d78bbb1a49318d to your computer and use it in GitHub Desktop.
Save russbiggs/0d25ab7b0225df2cb1d78bbb1a49318d to your computer and use it in GitHub Desktop.
Download ZIP
IMR 11 Compliance Change
Raw
delta.csv
paragraph_number change compliance
14 1 2
15 1 2
16 0 2
17 1 2
18 1 2
19 0 2
20 0 3
21 1 3
22 1 3
23 0 1
24 1 3
25 0 3
26 0 3
27 0 3
28 0 3
29 1 3
30 0 3
31 0 3
32 0 3
33 0 3
34 0 3
35 0 3
36 0 3
37 0 3
38 0 1
39 0 1
40 0 1
41 1 2
42 1 2
43 1 2
44 1 2
45 0 1
46 1 2
47 1 2
48 1 2
49 1 2
50 1 2
51 1 2
52 1 2
53 2 3
54 1 2
55 1 2
56 1 2
57 0 2
58 1 2
59 1 2
60 0 2
61 0 2
62 0 2
63 0 2
64 0 3
65 0 3
66 0 3
67 0 3
68 1 2
69 1 2
70 0 2
71 0 2
72 0 2
73 0 2
74 0 2
75 1 2
77 0 3
78 0 2
79 0 1
80 0 1
81 0 3
82 0 3
83 0 3
84 0 3
85 0 3
86 1 2
87 1 2
88 1 2
89 0 3
90 0 3
91 0 3
92 0 3
93 0 3
94 0 3
95 0 3
96 0 3
97 0 3
98 0 3
99 1 3
100 0 3
101 0 3
102 0 3
103 0 3
104 0 3
105 0 3
106 0 3
107 0 3
108 0 3
109 0 3
110 0 1
111 0 3
112 0 3
113 0 3
114 0 2
115 0 3
116 0 3
117 0 3
119 0 3
120 0 3
121 0 3
122 0 3
123 0 2
124 0 3
125 0 3
126 0 3
127 0 3
128 0 3
129 0 3
130 0 3
131 0 1
132 0 3
133 0 3
134 0 3
135 0 3
136 0 3
137 0 3
139 0 3
140 0 3
141 0 3
142 0 3
143 0 3
144 0 3
145 0 3
146 0 1
147 0 3
148 0 3
149 0 3
150 0 3
151 0 3
152 0 3
153 0 3
154 0 3
155 0 3
156 0 3
157 0 3
158 0 3
159 0 3
160 0 3
161 -1 2
163 0 3
164 0 3
165 0 3
166 0 3
167 0 3
168 0 3
169 0 3
170 0 3
171 0 3
172 0 3
173 0 3
174 0 3
175 0 3
176 0 3
177 0 3
178 0 3
179 0 3
180 0 3
181 0 3
182 0 2
183 0 2
184 0 3
185 0 3
186 0 3
187 0 3
188 0 3
189 0 3
190 0 2
191 0 2
192 0 2
193 0 3
194 0 3
195 0 3
196 0 3
197 0 3
198 0 3
199 0 2
200 0 2
201 0 2
202 0 2
203 0 2
204 0 3
205 1 2
206 1 2
207 0 3
208 1 2
209 1 2
210 1 2
211 -1 1
212 0 1
213 0 1
214 0 1
215 0 1
216 0 1
217 0 1
218 0 1
219 0 1
220 0 2
221 0 2
222 0 2
223 0 2
224 0 2
225 0 3
226 0 3
227 0 3
228 0 2
229 0 2
230 0 3
231 0 1
232 0 3
233 0 3
234 0 3
235 0 3
236 0 3
237 0 3
238 0 3
239 0 3
240 0 3
241 0 3
242 0 3
243 0 3
244 0 3
245 0 3
246 0 3
247 0 3
248 0 3
249 0 3
250 0 3
251 0 3
252 0 3
253 0 3
255 0 2
256 0 2
257 0 2
258 1 2
259 0 2
260 1 3
261 0 3
262 0 3
263 1 3
264 -1 2
265 0 3
266 0 3
267 0 3
268 -1 2
269 0 3
270 -1 2
271 1 3
272 0 3
273 1 3
274 0 3
275 0 3
276 0 3
277 0 3
278 0 3
279 0 3
280 -1 2
281 0 2
282 0 3
283 0 3
284 0 3
285 0 3
286 0 3
287 0 3
288 0 3
289 0 3
290 0 3
291 0 3
292 0 2
320 0 3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>CASA Compliance Change Analysis</title>
<style>
body {
margin:0;
padding:0;
display: flex;
align-items: center;
justify-content: center ;
text-align:center
}
* {
font-family: 'Roboto', sans-serif;
}
.bar--positive {
fill: green;
}
.bar--negative {
fill: red;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.legend {
max-width: 350px;
}
</style>
</head>
<body>
<div class="container">
<h2>Which paragraphs changed compliance in IMR-11?</h2>
<p>bars in <b style="color:red;">red</b> decreased in compliance, bars in <b style="color:green">green</b> increased in compliance</p>
<svg></svg>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 40, left: 30},
width = 400 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var x = d3.scale.linear().rangeRound([0, width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.1);
var xAxis = d3.svg.axis()
.scale(x)
.tickValues([-3,-2,-1,0,1,2,3]).tickFormat(d3.format("d"))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(0)
.tickPadding(6);
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("delta.csv", type, function(error, d) {
let data = d.filter(paragraph => paragraph.change != 0);
x.domain([-3,3])
//x.domain(d3.extent(data, function(d) { return d.change; })).nice();
y.domain(data.map(function(d) { return d.paragraph_number; }));
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function(d) { return "bar bar--" + (d.change < 0 ? "negative" : "positive"); })
.attr("x", function(d) { return x(Math.min(0, d.change)); })
.attr("y", function(d) { return y(d.paragraph_number); })
.attr("width", function(d) { return Math.abs(x(d.change) - x(0)); })
.attr("height", y.rangeBand());
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(0) + ",0)")
.call(yAxis);
});
function type(d) {
d.change = +d.change;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment