Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Last active August 29, 2015 13:59
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 wboykinm/10499388 to your computer and use it in GitHub Desktop.
Save wboykinm/10499388 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked area chart, dead in the water
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var format = d3.time.format("%m/%d/%Y");
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var z = d3.scale.category20c();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.days);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var stack = d3.layout.stack()
.offset("zero")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
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 + ")");
d3.csv("responses_ordered.csv", function(data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
Raw
responses_ordered.csv
date key value
1/4/2013 phone 549
1/4/2013 phone 402
1/21/2013 mail 620
2/7/2013 phone 165
2/10/2013 email 265
2/11/2013 phone 217
2/14/2013 mail 362
3/11/2013 mail 62
3/14/2013 url 706
3/16/2013 email 471
3/24/2013 phone 211
3/24/2013 email 503
3/29/2013 phone 276
4/3/2013 phone 425
4/5/2013 url 266
4/7/2013 phone 134
4/10/2013 email 333
4/10/2013 email 233
4/12/2013 phone 537
4/13/2013 mail 723
4/14/2013 url 52
4/15/2013 mail 375
4/19/2013 url 618
4/20/2013 url 91
4/21/2013 url 348
4/23/2013 mail 189
4/24/2013 mail 380
4/25/2013 phone 737
4/26/2013 email 381
4/26/2013 mail 485
4/27/2013 mail 571
5/1/2013 phone 777
5/1/2013 url 234
5/1/2013 url 696
5/2/2013 mail 549
5/3/2013 phone 159
5/4/2013 url 519
5/5/2013 email 252
5/7/2013 phone 348
5/7/2013 phone 157
5/9/2013 phone 106
5/10/2013 email 107
5/12/2013 email 374
5/14/2013 mail 374
5/16/2013 phone 50
5/17/2013 url 347
5/22/2013 email 149
5/22/2013 email 4
5/23/2013 mail 487
5/24/2013 url 472
5/26/2013 phone 336
5/26/2013 phone 555
5/27/2013 mail 55
5/29/2013 url 321
5/29/2013 phone 239
5/31/2013 mail 414
6/1/2013 url 312
6/3/2013 url 538
6/3/2013 url 351
6/3/2013 url 318
6/6/2013 mail 749
6/6/2013 url 614
6/7/2013 url 300
6/7/2013 email 350
6/8/2013 url 483
6/8/2013 mail 254
6/10/2013 mail 682
6/11/2013 email 48
6/11/2013 url 195
6/12/2013 email 274
6/18/2013 email 395
6/19/2013 mail 841
6/19/2013 mail 371
6/21/2013 url 385
6/22/2013 email 342
6/23/2013 phone 151
6/25/2013 url 242
6/27/2013 phone 272
6/27/2013 mail 488
6/28/2013 email 454
6/30/2013 mail 151
6/30/2013 email 365
7/2/2013 phone 187
7/3/2013 url 285
7/4/2013 phone 134
7/5/2013 mail 202
7/6/2013 mail 595
7/6/2013 phone 300
7/6/2013 phone 91
7/7/2013 email 636
7/7/2013 email 364
7/8/2013 email 469
7/8/2013 email 138
7/9/2013 phone 527
7/11/2013 mail 110
7/11/2013 mail 593
7/12/2013 phone 452
7/12/2013 url 394
7/12/2013 email 292
7/14/2013 email 183
7/15/2013 phone 691
7/15/2013 url 200
7/17/2013 url 305
7/18/2013 email 226
7/19/2013 mail 543
7/19/2013 phone 330
7/19/2013 url 189
7/19/2013 mail 302
7/20/2013 email 228
7/22/2013 url 107
7/22/2013 mail 266
7/23/2013 email 173
7/23/2013 phone 437
7/24/2013 email 241
7/24/2013 url 251
7/24/2013 phone 605
7/25/2013 phone 274
7/27/2013 email 235
7/28/2013 mail 332
7/28/2013 url 418
7/30/2013 url 455
7/30/2013 email 380
7/31/2013 phone 49
7/31/2013 url 364
8/1/2013 phone 391
8/1/2013 email 430
8/1/2013 mail 378
8/4/2013 url 387
8/5/2013 email 150
8/5/2013 email 164
8/5/2013 email 692
8/5/2013 email 317
8/5/2013 phone 117
8/6/2013 url 271
8/6/2013 email 9
8/7/2013 mail 407
8/7/2013 mail 211
8/8/2013 url 605
8/9/2013 url 835
8/10/2013 phone 419
8/11/2013 email 186
8/12/2013 url 315
8/13/2013 mail 217
8/13/2013 url 442
8/15/2013 mail 638
8/15/2013 phone 241
8/16/2013 mail 161
8/16/2013 email 116
8/16/2013 url 35
8/17/2013 phone 127
8/17/2013 url 473
8/17/2013 email 428
8/18/2013 email 219
8/18/2013 url 402
8/18/2013 email 601
8/18/2013 email 155
8/19/2013 phone 204
8/19/2013 email 172
8/20/2013 url 82
8/20/2013 email 598
8/20/2013 mail 347
8/21/2013 mail 206
8/22/2013 url 85
8/23/2013 phone 630
8/23/2013 mail 290
8/24/2013 phone 70
8/24/2013 email 205
8/24/2013 email 474
8/25/2013 email 449
8/25/2013 phone 253
8/25/2013 phone 251
8/26/2013 url 667
8/27/2013 url 347
8/27/2013 url 529
8/28/2013 email 9
8/28/2013 url 427
8/28/2013 url 539
8/29/2013 url 145
8/29/2013 mail 386
8/29/2013 email 55
8/30/2013 email 235
8/30/2013 email 248
8/31/2013 email 340
9/1/2013 email 338
9/1/2013 url 538
9/1/2013 mail 569
9/1/2013 url 213
9/1/2013 mail 195
9/2/2013 url 300
9/2/2013 mail 376
9/3/2013 email 565
9/3/2013 mail 235
9/4/2013 url 405
9/4/2013 phone 380
9/5/2013 phone 87
9/6/2013 mail 222
9/6/2013 phone 219
9/6/2013 email 86
9/6/2013 phone 61
9/6/2013 email 367
9/7/2013 email 141
9/7/2013 mail 659
9/7/2013 email 561
9/8/2013 phone 6
9/8/2013 email 106
9/8/2013 mail 370
9/9/2013 email 457
9/9/2013 email 197
9/9/2013 phone 340
9/9/2013 mail 545
9/9/2013 email 311
9/9/2013 email 260
9/10/2013 url 531
9/10/2013 email 579
9/10/2013 url 464
9/10/2013 url 528
9/10/2013 phone 184
9/11/2013 url 258
9/11/2013 phone 17
9/11/2013 url 212
9/12/2013 mail 464
9/12/2013 url 317
9/13/2013 url 296
9/13/2013 mail 716
9/13/2013 phone 282
9/14/2013 mail 365
9/14/2013 url 410
9/14/2013 email 40
9/15/2013 mail 286
9/15/2013 email 404
9/16/2013 mail 510
9/16/2013 url 494
9/16/2013 phone 215
9/17/2013 email 17
9/19/2013 phone 263
9/19/2013 url 795
9/20/2013 url 320
9/20/2013 mail 169
9/20/2013 url 616
9/22/2013 email 50
9/22/2013 mail 100
9/23/2013 email 236
9/23/2013 email 221
9/23/2013 mail 601
9/24/2013 email 541
9/24/2013 url 319
9/25/2013 url 14
9/25/2013 phone 107
9/25/2013 url 124
9/25/2013 mail 295
9/25/2013 url 577
9/26/2013 mail 51
9/27/2013 mail 785
9/27/2013 mail 557
9/27/2013 email 289
9/27/2013 phone 374
9/27/2013 url 443
9/27/2013 url 400
9/28/2013 mail 435
9/28/2013 phone 416
9/28/2013 mail 394
9/29/2013 email 513
9/29/2013 phone 396
9/29/2013 email 1
9/29/2013 email 300
9/30/2013 url 287
9/30/2013 url 533
10/1/2013 url 94
10/1/2013 phone 456
10/2/2013 email 327
10/2/2013 url 46
10/3/2013 phone 402
10/3/2013 mail 380
10/3/2013 url 18
10/3/2013 url 184
10/3/2013 phone 212
10/3/2013 phone 379
10/4/2013 email 72
10/4/2013 mail 172
10/4/2013 email 291
10/5/2013 email 378
10/6/2013 url 125
10/6/2013 phone 541
10/7/2013 url 638
10/7/2013 email 190
10/7/2013 mail 342
10/8/2013 mail 185
10/9/2013 email 242
10/9/2013 mail 331
10/9/2013 phone 172
10/10/2013 url 347
10/10/2013 email 608
10/10/2013 phone 190
10/10/2013 mail 87
10/10/2013 url 457
10/10/2013 email 54
10/12/2013 mail 242
10/13/2013 mail 94
10/13/2013 url 70
10/13/2013 phone 205
10/13/2013 phone 132
10/13/2013 url 176
10/13/2013 mail 354
10/13/2013 mail 619
10/13/2013 url 564
10/13/2013 email 476
10/13/2013 url 431
10/14/2013 email 283
10/14/2013 phone 207
10/14/2013 url 469
10/14/2013 email 411
10/15/2013 phone 126
10/15/2013 mail 315
10/15/2013 email 188
10/15/2013 mail 167
10/15/2013 phone 330
10/17/2013 email 172
10/17/2013 url 633
10/18/2013 url 286
10/19/2013 url 747
10/19/2013 mail 365
10/19/2013 email 681
10/20/2013 mail 410
10/21/2013 phone 203
10/21/2013 phone 586
10/21/2013 phone 687
10/21/2013 url 151
10/21/2013 phone 345
10/21/2013 url 487
10/23/2013 url 618
10/23/2013 phone 244
10/23/2013 url 57
10/23/2013 url 352
10/23/2013 email 365
10/24/2013 url 231
10/24/2013 url 411
10/24/2013 email 40
10/24/2013 email 309
10/24/2013 phone 192
10/24/2013 url 137
10/24/2013 phone 21
10/25/2013 email 335
10/25/2013 url 379
10/25/2013 mail 227
10/25/2013 mail 344
10/25/2013 url 88
10/25/2013 email 317
10/26/2013 phone 744
10/26/2013 url 429
10/26/2013 phone 125
10/26/2013 mail 254
10/27/2013 mail 99
10/27/2013 phone 143
10/28/2013 phone 231
10/28/2013 email 370
10/28/2013 mail 80
10/28/2013 email 163
10/28/2013 mail 360
10/28/2013 mail 596
10/28/2013 email 558
10/28/2013 phone 358
10/29/2013 email 424
10/29/2013 phone 421
10/29/2013 phone 182
10/29/2013 phone 453
10/29/2013 mail 423
10/29/2013 email 521
10/29/2013 mail 310
10/30/2013 phone 314
10/31/2013 mail 405
10/31/2013 phone 386
10/31/2013 email 129
10/31/2013 phone 550
10/31/2013 url 383
11/1/2013 email 375
11/1/2013 url 331
11/1/2013 url 352
11/1/2013 phone 134
11/1/2013 url 537
11/2/2013 email 195
11/2/2013 mail 52
11/2/2013 mail 308
11/2/2013 phone 214
11/2/2013 email 175
11/2/2013 email 291
11/3/2013 phone 235
11/3/2013 url 126
11/4/2013 url 445
11/4/2013 phone 277
11/4/2013 url 530
11/4/2013 phone 146
11/5/2013 phone 534
11/5/2013 url 89
11/5/2013 phone 188
11/5/2013 email 226
11/5/2013 mail 147
11/5/2013 url 397
11/6/2013 mail 216
11/6/2013 url 53
11/7/2013 url 273
11/7/2013 url 91
11/8/2013 email 435
11/8/2013 phone 347
11/8/2013 email 164
11/8/2013 mail 498
11/8/2013 url 255
11/9/2013 email 244
11/9/2013 mail 3
11/10/2013 phone 78
11/10/2013 phone 224
11/10/2013 mail 199
11/10/2013 email 272
11/11/2013 url 137
11/11/2013 email 202
11/11/2013 url 319
11/11/2013 url 198
11/12/2013 email 519
11/12/2013 mail 422
11/12/2013 email 600
11/12/2013 phone 209
11/12/2013 email 957
11/12/2013 phone 122
11/12/2013 email 643
11/12/2013 phone 293
11/12/2013 url 153
11/13/2013 mail 480
11/13/2013 url 575
11/13/2013 url 508
11/13/2013 mail 300
11/14/2013 url 52
11/14/2013 url 343
11/15/2013 phone 549
11/15/2013 mail 302
11/15/2013 mail 81
11/15/2013 phone 596
11/15/2013 url 460
11/16/2013 phone 288
11/16/2013 url 40
11/16/2013 mail 437
11/16/2013 email 281
11/16/2013 url 377
11/16/2013 mail 537
11/16/2013 mail 467
11/16/2013 phone 84
11/16/2013 email 262
11/16/2013 url 576
11/17/2013 email 331
11/17/2013 email 440
11/17/2013 email 300
11/17/2013 mail 43
11/17/2013 phone 370
11/17/2013 mail 293
11/18/2013 url 107
11/18/2013 mail 493
11/18/2013 mail 17
11/18/2013 phone 597
11/19/2013 email 690
11/19/2013 email 326
11/19/2013 url 278
11/19/2013 phone 245
11/19/2013 url 283
11/20/2013 email 214
11/20/2013 mail 491
11/20/2013 url 410
11/20/2013 email 727
11/20/2013 mail 111
11/21/2013 phone 346
11/21/2013 mail 546
11/21/2013 email 95
11/21/2013 phone 210
11/21/2013 mail 455
11/21/2013 mail 555
11/21/2013 mail 12
11/22/2013 url 250
11/22/2013 phone 470
11/22/2013 mail 480
11/22/2013 phone 133
11/23/2013 email 384
11/23/2013 email 234
11/23/2013 email 146
11/23/2013 mail 416
11/23/2013 phone 641
11/23/2013 url 11
11/24/2013 email 331
11/24/2013 email 371
11/24/2013 email 261
11/24/2013 mail 15
11/24/2013 url 143
11/25/2013 url 63
11/25/2013 url 127
11/25/2013 phone 88
11/25/2013 phone 229
11/26/2013 url 263
11/26/2013 email 416
11/26/2013 mail 4
11/26/2013 phone 480
11/26/2013 url 114
11/27/2013 email 354
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment