Skip to content

Instantly share code, notes, and snippets.

@russbiggs

russbiggs/delta.csv

Last active November 8, 2019 22:18
Show Gist options
  • Save russbiggs/8ed16bdfbb278090ca0decbb4d172961 to your computer and use it in GitHub Desktop.
Save russbiggs/8ed16bdfbb278090ca0decbb4d172961 to your computer and use it in GitHub Desktop.
Download ZIP
IMR-10 Compliance Change
Raw
delta.csv
compliance change paragraph_number
1 0 14
1 0 15
2 0 16
1 0 17
1 0 18
2 0 19
3 0 20
2 0 21
2 0 22
1 0 23
2 0 24
3 1 25
3 0 26
3 1 27
3 0 28
2 0 29
3 0 30
3 0 31
3 1 32
3 0 33
3 0 34
3 0 35
3 0 36
3 0 37
1 0 38
1 0 39
1 0 40
1 0 41
1 0 42
1 0 43
1 0 44
1 0 45
1 0 46
1 0 47
1 0 48
1 0 49
1 0 50
1 0 51
1 0 52
1 0 53
1 0 54
1 0 55
1 0 56
2 1 57
1 0 58
1 0 59
2 0 60
2 0 61
2 0 62
2 0 63
3 0 64
3 0 65
3 0 66
3 0 67
1 -2 68
1 -1 69
2 0 70
2 0 71
2 0 72
2 1 73
2 1 74
1 0 75
2 0 76
3 0 77
2 1 78
0 1 79
1 0 80
3 0 81
3 0 82
3 0 83
3 0 84
3 0 85
1 0 86
1 0 87
1 0 88
3 0 89
3 0 90
3 0 91
3 0 92
3 0 93
3 0 94
3 0 95
3 0 96
3 0 97
3 0 98
2 2 99
3 0 100
3 0 101
3 0 102
3 0 103
3 0 104
3 0 105
3 0 106
3 0 107
3 0 108
3 0 109
1 0 110
3 0 111
3 0 112
3 0 113
2 1 114
3 1 115
3 0 116
3 0 117
3 0 119
3 0 120
3 0 121
3 0 122
2 0 123
3 0 124
3 0 125
3 0 126
3 0 127
3 0 128
3 0 129
3 0 130
1 0 131
3 0 132
3 0 133
3 0 134
3 0 135
3 0 136
3 0 137
3 0 139
3 0 140
3 0 141
3 0 142
3 0 143
3 0 144
3 0 145
1 -2 146
3 0 147
3 0 148
0 3 149
3 0 150
3 0 151
3 0 152
3 0 153
3 0 154
3 0 155
3 0 156
3 0 157
3 0 158
3 0 159
3 0 160
3 1 161
3 0 163
3 0 164
3 0 165
3 0 166
3 0 167
3 0 168
3 0 169
3 0 170
3 0 171
3 0 172
3 0 173
3 0 174
3 0 175
3 0 176
3 0 177
3 0 178
3 0 179
3 0 180
3 0 181
2 0 182
2 0 183
3 0 184
3 0 185
3 0 186
3 0 187
3 0 188
3 0 189
2 0 190
2 0 191
2 -1 192
3 0 193
3 0 194
3 0 195
3 0 196
3 0 197
3 0 198
2 0 199
2 0 200
2 0 201
2 0 202
2 0 203
3 0 204
1 -1 205
1 0 206
3 0 207
1 0 208
1 0 209
1 0 210
2 1 211
1 0 212
1 0 213
1 0 214
1 0 215
1 0 216
1 0 217
1 0 218
1 0 219
2 0 220
2 0 221
2 0 222
2 0 223
2 0 224
3 0 225
3 0 226
3 0 227
2 0 228
2 1 229
3 0 230
1 0 231
3 0 232
3 0 233
3 0 234
3 0 235
3 0 236
3 0 237
3 0 238
3 0 239
3 0 240
3 0 241
3 0 242
3 0 243
3 0 244
3 0 245
3 0 246
3 0 247
3 0 248
3 0 249
3 0 250
3 0 251
3 0 252
3 0 253
2 0 255
2 0 256
2 0 257
1 0 258
2 1 259
2 0 260
3 0 261
3 0 262
2 0 263
3 0 264
0 3 265
3 0 266
3 1 267
3 0 268
3 0 269
3 0 270
2 0 271
3 0 272
2 -1 273
3 0 274
3 0 275
3 0 276
3 0 277
3 0 278
3 0 279
3 0 280
2 0 281
3 0 282
3 0 283
3 0 284
3 0 285
3 0 286
3 0 287
3 0 288
3 0 289
3 0 290
3 0 291
2 -1 292
3 0 320
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>Document</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-10?</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