Skip to content

Instantly share code, notes, and snippets.

@alexismo

alexismo/connections_short.csv

Created May 23, 2012 09:33
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 alexismo/2774232 to your computer and use it in GitHub Desktop.
Save alexismo/2774232 to your computer and use it in GitHub Desktop.
Download ZIP
Merged data from a CSV to make a beautiful DNA style rainbow
Raw
connections_short.csv
device part
0 178
0 179
0 182
0 196
0 197
0 199
0 211
0 218
0 219
0 220
0 221
0 222
0 223
0 224
0 226
0 227
0 228
0 229
0 231
0 232
0 234
0 235
0 237
0 238
0 242
0 244
0 248
0 249
0 250
0 253
0 254
0 255
0 258
0 259
0 260
0 261
0 262
0 269
0 270
0 271
0 272
0 273
0 274
0 275
0 277
0 278
0 281
0 284
0 288
0 289
0 292
0 296
0 300
0 304
0 305
0 306
0 307
0 308
0 309
0 314
0 324
0 341
0 342
0 345
0 348
0 354
0 361
0 376
0 401
0 402
0 404
0 406
0 407
0 431
0 432
0 433
0 438
0 448
0 449
0 461
0 465
0 479
0 482
0 485
0 486
0 487
0 488
0 495
0 496
0 497
0 499
0 500
0 501
0 526
0 527
0 528
0 535
0 536
0 543
0 544
0 545
0 546
0 547
0 548
0 549
0 550
0 551
0 553
0 554
0 555
0 558
0 559
0 568
0 570
0 583
0 592
0 596
0 605
0 606
0 617
0 619
0 621
0 629
0 630
0 642
0 650
0 655
0 665
0 666
0 667
0 668
0 711
0 713
0 769
0 770
0 804
0 819
0 822
0 825
0 826
0 839
0 853
0 901
0 927
0 949
0 954
0 1011
0 1013
0 1042
0 1159
0 1179
0 1180
0 1187
0 1190
0 1195
0 1197
0 1290
0 1310
0 1311
0 1344
0 1346
0 1350
0 1351
0 1375
0 1376
0 1379
0 1380
0 1482
0 1504
0 1525
0 1561
0 1574
0 1575
0 1577
0 1578
0 1580
0 1586
0 1597
0 1598
0 1599
0 1600
0 1601
0 1602
0 1603
0 1613
0 1617
0 1618
0 1619
0 1731
0 1732
0 1742
0 1835
0 1843
0 1910
0 1960
0 1986
0 1994
0 1997
0 2017
0 2115
0 2116
0 2189
0 2190
0 2545
0 2552
0 2607
0 2608
0 2615
0 2624
0 2697
0 2732
0 2783
0 2784
0 2795
0 2803
0 2804
0 2856
0 2857
0 2961
0 3066
0 3155
0 3156
0 3157
0 3158
0 3159
0 3178
0 3200
0 3224
0 3236
0 3241
0 3254
0 3278
0 3281
0 3292
0 3293
0 3303
0 3312
0 3327
0 3328
0 3370
0 3444
0 3469
0 3472
0 3481
0 3501
0 3525
0 3557
0 3567
0 3573
0 3574
0 3575
0 3630
0 3638
0 3641
0 3648
0 3730
0 3731
0 3843
0 3844
0 3845
0 3866
0 3872
0 3883
0 3916
0 3924
0 3925
0 4068
0 4154
0 4155
0 4248
0 4256
0 4257
0 4258
0 4278
0 4321
0 4455
0 4461
0 4463
0 4464
1 178
1 179
1 182
1 196
1 197
1 199
1 211
1 218
1 219
1 220
1 221
1 222
1 223
1 224
1 226
1 227
1 228
1 229
1 231
1 232
1 234
1 235
1 237
1 238
1 242
1 244
1 248
1 249
1 250
1 253
1 254
1 255
1 258
1 259
1 260
1 261
1 262
1 269
1 270
1 271
1 272
1 273
1 274
1 275
1 277
1 278
1 281
1 284
1 288
1 289
1 292
1 296
1 300
1 304
1 305
1 306
1 307
1 308
1 309
1 314
1 324
1 341
1 342
1 345
1 348
1 354
1 361
1 366
1 401
1 402
1 404
1 406
1 407
1 431
1 432
1 433
1 438
1 448
1 449
1 461
1 465
1 479
1 482
1 485
1 486
1 487
1 488
1 495
1 496
1 497
1 499
1 500
1 501
1 526
1 527
1 528
1 535
1 536
1 543
1 544
1 545
1 546
1 547
1 548
1 549
1 550
1 551
1 553
1 554
1 555
1 558
1 559
1 568
1 570
1 592
1 596
1 605
1 606
1 617
1 619
1 621
1 629
1 630
1 642
1 650
1 655
1 665
1 666
1 667
1 668
1 711
1 713
1 769
1 770
1 804
1 819
1 822
1 825
1 826
1 837
1 853
1 901
1 927
1 949
1 954
1 992
1 1011
1 1013
1 1042
1 1159
1 1179
1 1180
1 1187
1 1190
1 1195
1 1197
1 1289
1 1290
1 1311
1 1344
1 1350
1 1351
1 1370
1 1375
1 1376
1 1379
1 1380
1 1482
1 1499
1 1504
1 1525
1 1561
1 1574
1 1586
1 1597
1 1598
1 1600
1 1601
1 1602
1 1617
1 1731
1 1732
1 1742
1 1835
1 1843
1 1910
1 1960
1 1989
1 1994
1 1997
1 2017
1 2115
1 2116
1 2189
1 2190
1 2545
1 2552
1 2607
1 2608
1 2615
1 2624
1 2697
1 2732
1 2783
1 2784
1 2795
1 2803
1 2804
1 2856
1 2857
1 2961
1 3066
1 3155
1 3156
1 3157
1 3158
1 3159
1 3224
1 3236
1 3241
1 3254
1 3278
1 3281
1 3292
1 3293
1 3303
1 3312
1 3327
1 3328
1 3444
1 3469
1 3472
1 3481
1 3501
1 3525
1 3557
1 3567
1 3573
1 3574
1 3575
1 3638
1 3641
1 3648
1 3730
1 3731
1 3843
1 3844
1 3845
1 3866
1 3872
1 3883
1 3924
1 3925
1 3936
1 3937
1 3939
1 3945
1 3946
1 3947
1 3948
1 3949
1 3953
1 3991
1 4004
1 4005
1 4032
1 4055
1 4057
1 4068
1 4106
1 4145
1 4154
1 4155
1 4183
1 4248
1 4256
1 4257
1 4258
1 4278
1 4321
1 4384
1 4453
1 4455
1 4461
1 4463
1 4464
2 178
2 179
2 182
2 196
2 197
2 199
2 211
2 218
2 219
2 220
2 221
2 222
2 223
2 224
2 226
2 227
2 228
2 229
2 231
2 232
2 234
2 235
2 237
2 238
2 242
2 244
2 248
2 249
2 250
2 253
2 254
2 255
2 258
2 259
2 260
2 261
2 262
2 269
2 270
2 271
2 272
2 273
2 274
2 275
2 277
2 278
2 281
2 284
2 288
2 289
2 292
2 296
2 300
2 304
2 305
2 306
2 307
2 308
2 309
2 314
2 324
2 341
2 342
2 345
2 348
2 354
2 361
2 366
2 401
2 402
2 404
2 406
2 407
2 431
2 432
2 433
2 438
2 448
2 449
2 461
2 465
2 479
2 482
2 485
2 486
2 487
2 488
2 495
2 496
2 497
2 499
2 500
2 501
2 526
2 527
2 528
2 535
2 536
2 543
2 544
2 545
2 546
2 547
2 548
2 549
2 550
2 551
2 553
2 554
2 555
2 558
2 559
2 568
2 570
2 592
2 596
2 605
2 606
2 617
2 619
2 621
2 629
2 630
2 642
2 655
2 665
2 666
2 667
2 668
2 711
2 713
2 769
2 770
2 804
2 819
2 822
2 825
2 826
2 837
2 853
2 901
2 927
2 949
2 954
2 992
2 1011
2 1013
2 1042
2 1159
2 1179
2 1180
2 1289
2 1290
2 1344
2 1350
2 1351
2 1370
2 1375
2 1376
2 1379
2 1380
2 1482
2 1499
2 1504
2 1525
2 1561
2 1586
2 1597
2 1598
2 1600
2 1601
2 1602
2 1617
2 1731
2 1732
2 1742
2 1835
2 1843
2 1910
2 1960
2 1989
2 1994
2 1997
2 2017
2 2115
2 2116
2 2189
2 2190
2 2545
2 2552
2 2607
2 2608
2 2615
2 2624
2 2697
2 2732
2 2783
2 2784
2 2795
2 2803
2 2804
2 2856
2 2857
2 2961
2 3066
2 3155
2 3156
2 3157
2 3158
2 3159
2 3224
2 3236
2 3241
2 3278
2 3281
2 3292
2 3293
2 3303
2 3312
2 3327
2 3328
2 3444
2 3469
2 3472
2 3481
2 3501
2 3525
2 3557
2 3567
2 3573
2 3574
2 3575
2 3638
2 3641
2 3648
2 3695
2 3696
2 3697
2 3708
2 3709
2 3730
2 3731
2 3843
2 3844
2 3845
2 3866
2 3872
2 3883
2 3924
2 3925
2 3936
2 3937
2 3939
2 3947
2 3948
2 3950
2 3951
2 3952
2 3953
2 3991
2 3996
2 3997
2 4032
2 4055
2 4057
2 4068
2 4106
2 4146
2 4154
2 4155
2 4183
2 4248
2 4256
2 4257
2 4258
2 4278
2 4321
2 4385
2 4450
2 4455
2 4461
2 4463
2 4464
3 178
3 179
3 182
3 196
3 197
3 199
3 211
3 218
3 219
3 220
3 221
3 222
3 223
3 224
3 226
3 227
3 228
3 229
3 231
3 232
3 234
3 235
3 237
3 238
3 239
3 242
3 244
3 248
3 249
3 250
3 253
3 254
3 255
3 258
3 259
3 260
3 261
3 262
3 269
3 270
3 271
3 272
3 273
3 274
3 275
3 277
3 278
3 281
3 284
3 288
3 289
3 292
3 296
3 300
3 304
3 305
3 306
3 307
3 308
3 309
3 314
3 324
3 341
3 342
3 345
3 348
3 354
3 361
3 373
3 401
3 402
3 404
3 406
3 407
3 431
3 432
3 433
3 438
3 448
3 449
3 457
3 461
3 465
3 479
3 482
3 485
3 486
3 487
3 488
3 495
3 496
3 497
3 499
3 500
3 501
3 526
3 527
3 528
3 535
3 536
3 543
3 544
3 545
3 546
3 547
3 548
3 549
3 550
3 551
3 553
3 554
3 555
3 558
3 559
3 568
3 569
3 570
3 583
3 592
3 596
3 605
3 606
3 617
3 619
3 621
3 629
3 630
3 642
3 655
3 665
3 666
3 667
3 668
3 711
3 713
3 767
3 769
3 770
3 804
3 819
3 822
3 825
3 826
3 839
3 853
3 875
3 900
3 901
3 927
3 949
3 954
3 1011
3 1013
3 1022
3 1042
3 1076
3 1159
3 1179
3 1180
3 1275
3 1286
3 1290
3 1327
3 1328
3 1344
3 1346
3 1375
3 1380
3 1405
3 1406
3 1482
3 1501
3 1504
3 1525
3 1561
3 1579
3 1581
3 1582
3 1586
3 1597
3 1598
3 1599
3 1600
3 1601
3 1602
3 1603
3 1604
3 1605
3 1606
3 1614
3 1622
3 1623
3 1624
3 1731
3 1732
3 1742
3 1835
3 1843
3 1857
3 1910
3 1960
3 1986
3 1994
3 1997
3 2017
3 2115
3 2116
3 2189
3 2190
3 2545
3 2552
3 2607
3 2608
3 2615
3 2624
3 2697
3 2732
3 2783
3 2784
3 2795
3 2803
3 2804
3 2856
3 2857
3 2961
3 3066
3 3155
3 3156
3 3157
3 3158
3 3159
3 3177
3 3178
3 3224
3 3236
3 3241
3 3278
3 3281
3 3292
3 3293
3 3303
3 3312
3 3327
3 3328
3 3371
3 3444
3 3469
3 3472
3 3481
3 3501
3 3525
3 3557
3 3573
3 3574
3 3575
3 3638
3 3641
3 3648
3 3730
3 3731
3 3843
3 3844
3 3845
3 3866
3 3872
3 3883
3 3903
3 3916
3 3924
3 3925
3 3988
3 4068
3 4072
3 4154
3 4155
3 4248
3 4256
3 4257
3 4258
3 4278
3 4321
3 4455
3 4461
3 4463
3 4464
4 178
4 179
4 182
4 196
4 197
4 199
4 211
4 218
4 219
4 220
4 221
4 222
4 223
4 224
4 226
4 227
4 228
4 229
4 231
4 232
4 234
4 235
4 237
4 238
4 239
4 242
4 244
4 248
4 249
4 250
4 253
4 254
4 255
4 258
4 259
4 260
4 261
4 262
4 269
4 270
4 271
4 272
4 273
4 274
4 275
4 277
4 278
4 281
4 284
4 288
4 289
4 292
4 296
4 300
4 304
4 305
4 306
4 307
4 308
4 309
4 314
4 324
4 341
4 342
4 345
4 348
4 354
4 361
4 366
4 401
4 402
4 404
4 406
4 407
4 431
4 432
4 433
4 438
4 448
4 449
4 457
4 461
4 465
4 479
4 482
4 485
4 486
4 487
4 488
4 495
4 496
4 497
4 499
4 500
4 501
4 526
4 527
4 528
4 535
4 536
4 543
4 544
4 545
4 546
4 547
4 548
4 549
4 550
4 551
4 553
4 554
4 555
4 558
4 559
4 568
4 569
4 570
4 592
4 596
4 605
4 606
4 617
4 619
4 621
4 629
4 630
4 642
4 655
4 665
4 666
4 667
4 668
4 711
4 713
4 767
4 769
4 770
4 804
4 819
4 822
4 825
4 826
4 837
4 853
4 875
4 900
4 901
4 927
4 949
4 954
4 992
4 1011
4 1013
4 1022
4 1042
4 1076
4 1159
4 1179
4 1180
4 1275
4 1286
4 1289
4 1290
4 1328
4 1344
4 1370
4 1375
4 1380
4 1405
4 1482
4 1499
4 1501
4 1504
4 1525
4 1561
4 1586
4 1597
4 1598
4 1600
4 1601
4 1602
4 1604
4 1731
4 1732
4 1742
4 1835
4 1843
4 1857
4 1910
4 1960
4 1989
4 1994
4 1997
4 2017
4 2115
4 2116
4 2189
4 2190
4 2545
4 2552
4 2607
4 2608
4 2615
4 2624
4 2697
4 2732
4 2783
4 2784
4 2795
4 2803
4 2804
4 2856
4 2857
4 2961
4 3066
4 3155
4 3156
4 3157
4 3158
4 3159
4 3224
4 3236
4 3241
4 3278
4 3281
4 3292
4 3293
4 3303
4 3312
4 3327
4 3328
4 3444
4 3469
4 3472
4 3481
4 3501
4 3525
4 3557
4 3573
4 3574
4 3575
4 3638
4 3641
4 3648
4 3730
4 3731
4 3843
4 3844
4 3845
4 3866
4 3872
4 3883
4 3924
4 3925
4 3936
4 3937
4 3939
4 3948
4 3953
4 3954
4 3955
4 3967
4 3988
4 3991
4 4006
4 4007
4 4032
4 4048
4 4050
4 4051
4 4053
4 4058
4 4068
4 4072
4 4079
4 4106
4 4147
4 4154
4 4155
4 4183
4 4248
4 4256
4 4257
4 4258
4 4278
4 4321
4 4386
4 4451
4 4455
4 4461
4 4463
4 4464
5 178
5 179
5 182
5 196
5 199
5 206
5 209
5 218
5 219
5 220
5 221
5 222
5 223
5 224
5 226
5 227
5 228
5 229
5 231
5 232
5 234
5 235
5 237
5 238
5 239
5 242
5 244
5 248
5 249
5 250
5 253
5 254
5 255
5 258
5 259
5 260
5 261
5 262
5 263
5 269
5 270
5 271
5 272
5 273
5 274
5 275
5 277
5 278
5 281
5 284
5 289
5 292
5 296
5 300
5 304
5 305
5 306
5 307
5 308
5 309
5 314
5 324
5 341
5 342
5 345
5 348
5 354
5 360
5 373
5 395
5 401
5 402
5 404
5 407
5 412
5 431
5 432
5 433
5 438
5 448
5 449
5 458
5 461
5 465
5 479
5 482
5 485
5 486
5 487
5 488
5 495
5 496
5 497
5 499
5 500
5 501
5 526
5 527
5 528
5 544
5 545
5 546
5 547
5 550
5 551
5 553
5 554
5 555
5 557
5 568
5 569
5 570
5 583
5 592
5 605
5 606
5 617
5 619
5 621
5 629
5 630
5 642
5 655
5 659
5 665
5 666
5 704
5 705
5 706
5 707
5 710
5 712
5 714
5 767
5 769
5 770
5 804
5 819
5 822
5 825
5 826
5 839
5 853
5 875
5 900
5 901
5 949
5 955
5 1010
5 1011
5 1013
5 1022
5 1042
5 1076
5 1159
5 1179
5 1180
5 1274
5 1285
5 1290
5 1319
5 1325
5 1326
5 1344
5 1346
5 1374
5 1383
5 1391
5 1407
5 1408
5 1451
5 1465
5 1470
5 1480
5 1481
5 1482
5 1489
5 1504
5 1525
5 1561
5 1583
5 1584
5 1585
5 1586
5 1588
5 1597
5 1598
5 1599
5 1600
5 1601
5 1602
5 1603
5 1604
5 1605
5 1606
5 1616
5 1622
5 1623
5 1624
5 1625
5 1738
5 1742
5 1837
5 1845
5 1859
5 1910
5 1960
5 1986
5 1994
5 1997
5 2017
5 2115
5 2116
5 2189
5 2190
5 2545
5 2552
5 2607
5 2608
5 2615
5 2624
5 2697
5 2732
5 2783
5 2784
5 2795
5 2803
5 2804
5 2856
5 2857
5 3065
5 3155
5 3156
5 3157
5 3158
5 3159
5 3177
5 3178
5 3224
5 3236
5 3241
5 3278
5 3281
5 3292
5 3293
5 3303
5 3327
5 3328
5 3372
5 3444
5 3469
5 3472
5 3481
5 3501
5 3525
5 3557
5 3573
5 3574
5 3575
5 3638
5 3641
5 3730
5 3731
5 3733
5 3843
5 3844
5 3845
5 3866
5 3872
5 3883
5 3915
5 3924
5 3925
5 4019
5 4020
5 4068
5 4121
5 4154
5 4155
5 4248
5 4256
5 4257
5 4258
5 4278
5 4321
5 4454
5 4455
5 4456
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Data-Group</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
<script src="http://mbostock.github.com/d3/d3.v2.js" type="text/javascript"></script>
<style>
svg{
shape-rendering:sharpEdges;
}
circle.little {
fill: #aaa;
stroke: #666;
stroke-width: 1.5px;
}
g.follow{
fill: white;
stroke: black;
stroke-width: 1px;
}
g.follow text{
font-size:12px;
fill:black;
font:14px sans-serif
}
</style>
</head>
<body>
<script type="text/javascript">
var margin = {top: 19, right: 20, bottom: 20, left: 19},
width = screen.width - margin.left - margin.right,
height = 750 - margin.top - margin.bottom;
var boxSize = {w:50, h:20};
var device = function(d){
return d;
};
//initialize a bunch of crap
var nestedData = null;
var maxParts = null;
var c = null;
var mouseRect = null;
var barWidth = null;
var csv = d3.csv("connections_short.csv", //parse all the data :D
function(data){
nestedData = d3.nest()//SQL GROUP_BY groups all the data by device
.key(function(d){return d.device})
.entries(data);
maxParts = d3.max(nestedData, function(d){return d.values.length});
console.log(maxParts);
//initialize functions that work with data
c = d3.scale.linear().domain([0,maxParts]).range(["hsl(0, 50%, 50%)", "hsl(350, 60%, 50%)"]).interpolate(d3.interpolateHsl);
drawBars();//draw it :D
initBox();//make the little toolbox that could.
});
var chart = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "chart")
.append("g")
.attr("transform", "translate(" + (margin.left) + "," + (margin.top) + ")");
var drawBars = function(){
barWidth = Math.floor(width/maxParts);
console.log(barWidth, width);
var row = chart.selectAll(".row")//groups the data by row, so it can be translated
.data(nestedData).enter().append("svg:g")
.attr("class","row");
var col = row.selectAll(".cell")
.data(function(d){return d.values;})
.enter().append("svg:rect")
.attr("class", "cell")
.attr("stroke", "none").attr("fill", function(d){return c(d.part);})
.attr("x", function(d, i){return i})
.attr("y", function(d){return d.device*20})
.attr("width", barWidth)
.attr("height", 20)
.on("mouseover", function(d, i){
var pos = {x: parseInt(d3.select(this).attr("x")),y:parseInt(d3.select(this).attr("y"))};
moveBox(d.part, pos);
subSelect(d.part)
.attr("stroke","#000")
.attr("stroke-width","1px");
})
.on("mouseout", function(d, i){
subSelect(d.part)
.attr("stroke", "none")
.attr("stroke-width","0");
});
};
var subSelect = function(part){
return chart.selectAll("rect").
filter(function(d, i){
return d.part == part;
});
};
var initBox = function(){
var pos = {x:-100, y:-100};
mouseRect = chart.selectAll(".follow")
.data(["boop"]).enter()
.append("g")
.attr("class", "follow")
.attr("transform", "translate(" + (pos.x) + "," + (pos.y) + ")");
mouseRect.selectAll(".follow")
.data(["boop"]).enter()
.append("rect")
.attr("stroke","#000")
.attr("fill","#fff")
.attr("width",boxSize.w).attr("height",boxSize.h);
mouseRect.selectAll(".follow")
.data(["boop"]).enter()
.append("text")
.attr("dy","1em")
.attr("dx","1em")
.attr("text-anchor","left")
.text("boop");
}
var moveBox = function(text, pos){
pos.x += 2*barWidth;//move the box a bit to the right, so you can still mouseover the new ones
//newPosition = mouseRect.attr("transform").split('(')[1].split(')')[0].split(',');
if(pos.x + boxSize.w > width - margin.left)//if the box is too much to the right, make it jump back
pos.x -= 1.45*boxSize.w;
mouseRect.attr("transform", "translate("+(pos.x)+","+(pos.y)+")")
.selectAll("text")
.text(text);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment